项目中一些页面，在有的时候需要在一个新窗口中打开，又不想在新窗口显示太多可操作信息，如隐藏菜单栏、工具栏、配置窗口大小、滚动条等。

一、先看看效果：

1、【这是没隐藏菜单栏等界面】

javascript 隐藏地址栏 状态栏 js隐藏浏览器菜单栏_window.open

2、【这是隐藏菜单栏、工具栏等界面】

javascript 隐藏地址栏 状态栏 js隐藏浏览器菜单栏_window.open方法参数_02

注意：经测试大部分都功能都可配置，但隐藏地址栏无效 location=no，因为一些浏览器会强制新窗口始终渲染位置栏！

3、window.open()方法实列代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS打开新窗口（不显示菜单、工具栏等相关配置）</title>
  </head>

  <body>
    <button type="button" onclick="open_new_win(event)">打开新窗口</button>
    <script async>

      // 打开新窗口
      function open_new_win(event) {

        // 打开新窗口默认宽高
        window.open('http://www.muguilin.com', '_blank', 'toolbar=no, menubar=no, location=no, status=no');

        // 打开新窗口宽350，高750
        window.open('http://www.muguilin.com', '_blank', 'width=350, height=750, top=100, left=100, toolbar=no, menubar=no, location=no, status=no');

        // 打开新窗口全屏
        window.open('http://www.muguilin.com', '_blank', 'width=' + screen.width + ', height=' + screen.height + ', top=0, left=0, toolbar=no, menubar=no, location=no, status=no, help=no, center=yes, scrollbars=yes, resizable=yes, minmizebutton=yes, maxmizebutton=yes');

        // 如果要关闭原来的旧窗口
        // window.opener = null;
        // window.close();

      };

      // 如果 需要在打开页后，再自动打开新窗口
      document.onreadystatechange = function (event) {
        if (document.readyState === "complete") {
          open_new_win(event);
        }
      };

    </script>
  </body>

</html>

注意：window.open(strUrl, strWindowName, [strWindowFeatures], replace);

1、调用window.open()方法以后，远程 URL 不会被立即载入，载入过程是异步的。（实际加载这个 URL 的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行）。

2、调用window.open()是打开“新窗口” 或者 是打开“新标签页”，可以配置第2个参数strWindowName 设置为_blank就可以在新的窗口中打开啦。

window.open('http://www.muguilin.com', '_blank');

 

二、window.open()方法参数说明： 

// 语法格式
window.open(strUrl, strWindowName, [strWindowFeatures], replace);

参数1：strUrl【可选参数，字符串类型】要在新打开的窗口中加载的 URL
        要在新打开的窗口中加载的URL，如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

参数2：strWindowName【可选参数，字符串类型】新窗口的名称
        该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，strWindowFeatures将被忽略。
    

参数3：strWindowFeatures【可选参数，字符串类型】 一个可选参数，列出新窗口的特征 (大小，位置，滚动条等，不在意前后顺序) 
        列出新窗口的特征(大小，位置，滚动条等)，一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。
strWindowFeatures解释说明：

参数名

值类型（Number/ Boolean）

默认值

功能作用

top

0 | 0%

0

新窗口距离显示器顶端（y坐标）的像素值

left

0 | 0%

0

新窗口距离显示器左边（x坐标）的像素值

width

0 | 0%

同屏幕大小

新窗口的宽度

height

0 | 0%

同屏幕大小

新窗口的高度

innerWidth

0 | 0%

...

与宽度相同，但仅支持Netscape和Mozilla浏览器。指定内容区域的宽度，即新辅助窗口的查看区域（以像素为单位）。innerWidth值包括垂直滚动条的宽度（如果存在）。如果已展开，则innerWidth值不包括侧边栏。最小要求值为100

innerHeight

0 | 0%

...

与高度相同，但仅支持Netscape和Mozilla浏览器。指定内容区域的高度，即新辅助窗口的查看区域（以像素为单位）。innerHeight值包括水平滚动条的高度（如果存在）。最小要求值为100

outerWidth

0 | 0%

...

以像素为单位指定整个浏览器窗口的宽度。此outerWidth值包括窗口垂直滚动条（如果存在）以及左右窗口大小调整边框

outerHeight

0 | 0%

...

以像素为单位指定整个浏览器窗口的高度。此outerHeight值包括任何/所有存在的工具栏、窗口水平滚动条（如果存在）以及顶部和底部窗口大小调整边框。最小要求值为100。注意：由于标题栏总是被渲染的，因此请求outerHeight=100将使浏览器窗口的innerHeight处于最小100像素以下

centerscreen

1 | 0 | yes | no

no

使窗口相对于其父级的大小和位置居中

titlebar 

1 | 0 | yes | no

yes

是否显示标题栏

toolbar 

1 | 0 | yes | no

yes

是否显示工具栏

menubar 

1 | 0 | yes | no

yes

是否显示菜单栏

location 

1 | 0 | yes | no

yes

是否显示地址栏

status 

1 | 0 | yes | no

yes

是否显示状态栏

scrollbars 

1 | 0 | yes | no

yes

是否显示滚动条

resizable 

1 | 0 | yes | no

yes

是否允许改变窗口大小

directories

1 | 0 | yes | no

yes

是否添加目录按钮（部分浏览器已废弃）

fullscreen

1 | 0 | yes | no

no

是否使用全屏模式显示浏览器， 注：处于全屏模式的窗口必须同时处于剧院模式。

channelmode

1 | 0 | yes | no

no

是否使用剧院模式显示窗口

参数4：replace 【可选参数，布尔值类型】 浏览历史
        true --> URL替换浏览历史中的当前条目。
        false --> URL在浏览历史中创建新的条目。

 

三、更多window.open()相关方法说明：

 地址：Window.open() - Web API 接口参考 | MDN