Window open() 方法

谁践踏了优雅 2022-05-12 00:03 158阅读 0赞

## 定义和用法 ##

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

## 语法 ##

window.open( *URL,name,specs,replace*)

<table style="border-collapse:collapse;border:0px;width:678px;color:#333333;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;font-size:12px;line-height:normal;"> 
 <tbody style="border:0px;"> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;width:56px;background-color:#555555;" align="left">参数</th> 
   <th style="border-collapse:collapse;border:1px solid #555555;color:#ffffff;vertical-align:top;width:621px;background-color:#555555;" align="left">说明</th> 
  </tr> 
  <tr style="border:0px;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;width:56px;">URL</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;width:621px;">可选。打开指定的页面的URL。如果没有指定URL，打开新的空白窗口。</td> 
  </tr> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;width:56px;">name</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;width:621px;">可选。指定target属性或窗口的名称。支持以下值： 
    <ul style="border:0px;line-height:18.2px;"> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;">_blank - URL加载到一个新的窗口。这是默认</li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;">_parent - URL加载到父框架</li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;">_self - URL替换当前页面</li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;">_top - URL替换任何可加载的框架集</li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;"> <em>name</em>&nbsp;- 窗口名称</li> 
    </ul></td> 
  </tr> 
  <tr style="border:0px;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;width:56px;">specs</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;width:621px;">可选。一个逗号分隔的项目列表。支持以下值：<br><br> 
    <div> 
     <div> 
      <table style="border-collapse:collapse;border:0px;width:610px;"> 
       <tbody style="border:0px;"> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">channelmode=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否要在影院模式显示 window。默认是没有的。仅限IE浏览器</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">directories=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否添加目录按钮。默认是肯定的。仅限IE浏览器</td> 
        </tr> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">fullscreen=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">height=pixels</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">窗口的高度。最小.值为100</td> 
        </tr> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">left=pixels</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">该窗口的左侧位置</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">location=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否显示地址字段.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">menubar=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否显示菜单栏.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">resizable=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否可调整窗口大小.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">scrollbars=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否显示滚动条.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">status=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否要添加一个状态栏.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">titlebar=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">toolbar=yes|no|1|0</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">是否显示浏览器工具栏.默认值是yes</td> 
        </tr> 
        <tr style="border:0px;background-color:#f6f4f0;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">top=pixels</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">窗口顶部的位置.仅限IE浏览器</td> 
        </tr> 
        <tr style="border:0px;"> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;min-width:24px;line-height:2em;vertical-align:top;width:154px;">width=pixels</td> 
         <td style="border-collapse:collapse;border:1px solid #d4d4d4;line-height:2em;min-width:24px;vertical-align:top;width:455px;">窗口的宽度.最小.值为100</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> </td> 
  </tr> 
  <tr style="border:0px;background-color:#f6f4f0;"> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;min-width:24px;line-height:2em;vertical-align:top;width:56px;">replace</td> 
   <td style="border-collapse:collapse;border:1px solid #d4d4d4;font-size:13px;line-height:2em;min-width:24px;vertical-align:top;width:621px;">Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： 
    <ul style="border:0px;line-height:18.2px;"> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;">true - URL 替换浏览历史中的当前条目。</li> 
     <li style="margin-left:1em;border:0px;line-height:1.5em;background-position:0% .5em;">false - URL 在浏览历史中创建新的条目。</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

## 实例 ##

1.      <!DOCTYPE html>
        <html>
        <head>
        <meta charset="gb2312">
        <title>菜鸟教程(runoob.com)</title>
        <script>
        function open_win()
        {
        	window.open("http://www.baidu.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
        }
        </script>
        </head>
        <body>
        	
        <form>
        <input type="button" value="打开窗口" οnclick="open_win()">
        </form>
        	
        </body>
        </html>

## 运行结果 ##

![59073078-c6ef-3eff-ad45-6485156d386f.png][]

[59073078-c6ef-3eff-ad45-6485156d386f.png]: /images/20220512/462a9eff28ae40889d94be7e5514aa2b.png