JS 打开新窗口

矫情吗；* 2022-06-07 07:28 328阅读 0赞

**使用JavaScript window对象（属于BOM）打开新窗口：**  
语法：  
window.open(URL,name,features);  
该方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。  
  
参数说明：

URL ：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

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

features ：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在<窗口特征>这个表格中，我们对该字符串的格式进行了详细的说明。

窗口特征(常用)：

<table style=""> 
 <thead style=""> 
  <tr style=""> 
   <th style=""><span style="font-family:Microsoft YaHei; font-size:18px">属性名称</span></th> 
   <th style=""><span style="font-family:Microsoft YaHei; font-size:18px">说 明</span></th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">height、width</span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">窗口文档显示区的高度、宽度。以像素计。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">left、top</span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">窗口的x坐标、y坐标。以像素计</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">toolbar=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否显示浏览器的工具栏。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">scrollbars=<code style="">yes | no | 1| 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否显示滚动条。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">location=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否显示地址地段。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">status=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否添加状态栏。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">menubar=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否显示菜单栏。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">resizable=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">窗口是否可调节尺寸。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">titlebar=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否显示标题栏。黙认是yes。</span></td> 
  </tr> 
  <tr style=""> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">fullscreen=<code style="">yes | no | 1 | 0</code></span></td> 
   <td style=""><span style="font-family:Microsoft YaHei; font-size:18px">是否使用全屏模式显示浏览器。黙认是no。</span></td> 
  </tr> 
 </tbody> 
</table>

注：不同的游览器对窗口特征属性支持也不相同

使用案例：  
1、打开新的窗口，窗口特性使用默认值

<body>
    <script type="text/javascript">
        function openAnother() {
            window.open("http://www.baidu.com"); //打开新窗口，窗口特性全部使用默认值。
        }
    </script>
    <button οnclick="openAnother()">打开新窗口</button>
    </body>

2、打开新的窗口，设置窗口特性

<body>
        <button οnclick="openAnother();">打开新窗口</button>
        <script type="text/javascript">
          var win;
          function openAnother () {
              win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");//有些特性在个别浏览器上已被进制修改。
          }
        </script>
    </body>

3、关闭新打开的窗口

open方法返回打开的那个窗口的window对象，可以调用close方法关闭新打开的窗口。

<body>
    <button οnclick="openAnother();">打开新窗口</button>
    <button οnclick="closeAnother();">关闭新打开的窗口</button>
    <script type="text/javascript">
        var win;
        function openAnother () {
            win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");
        }
        function closeAnother() {
            win.close();//关闭指定窗口
        }
    </script>
    </body>