window.open()的问题

墨蓝 2022-06-13 10:14 133阅读 0赞

今天在项目上有一个需求需要用到window.open()函数来打开新的窗口。

这里查一下，window.open()函数的相关知识，这里总结一下。

一。定义和用法

window.open() 用来打开一个新窗口和查找一个已命名的窗口。在这里只说一下打开新窗口的用法，查找功能暂时没做考虑，以后再说，哈哈。

二。语法

window.open(url, name, feature, replace)

参数描述：

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>打开新窗口的地址</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>打开新窗口的名称，这里我只试过用_blank &nbsp;表示永远打开一个<br> 新的浏览器窗口，<br> 亲测可用</td> 
  </tr> 
  <tr> 
   <td>feature</td> 
   <td>表示浏览器的属性，</td> 
  </tr> 
  <tr> 
   <td>replace</td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px; font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(245,245,245)"> 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px; font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(245,245,245)"> 历史中创建一个新条目，还是替换浏览历史中的当前条目。</p> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px; line-height:21px; font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(245,245,245)"> 支持下面的值：</p> 
    <ul style="margin:0px; padding:0px; border:0px; list-style-type:none; font-family:PingFangSC-Regular,Verdana,Arial,微软雅黑,宋体; font-size:14px; background-color:rgb(245,245,245)"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">true - URL 替换浏览历史中的当前条目。</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">false - URL 在浏览历史中创建新的条目。</li> 
    </ul> 这一条是复制的网上的 也没测试暂时还没搞懂</td> 
  </tr> 
 </tbody> 
</table>

feature的参数描述

<table> 
 <tbody> 
  <tr> 
   <td>channeimode=yes/no/1/0</td> 
   <td>是否使用剧院模式显示窗口,默认no</td> 
  </tr> 
  <tr> 
   <td>directories=yes/no/1/0</td> 
   <td>是否添加目录按钮，默认yes</td> 
  </tr> 
  <tr> 
   <td>fullscreen=yes/no/1/0</td> 
   <td>是否使用全屏模式打开窗口，默认no,处于全屏模式的窗口必须处于剧院模式</td> 
  </tr> 
  <tr> 
   <td>height=px</td> 
   <td>窗口的高</td> 
  </tr> 
  <tr> 
   <td>width=px</td> 
   <td>窗口的宽</td> 
  </tr> 
  <tr> 
   <td>location=yes/no</td> 
   <td>是否显示地址字段，默认yes</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">menubar</span></td> 
   <td>是否显示 菜单栏，默认yes</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">resizable</span></td> 
   <td>窗口是否可调节尺寸，</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">scrollbars</span></td> 
   <td>是否显示滚动条</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">status</span></td> 
   <td>是否添加状态栏</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">titlebar</span></td> 
   <td>是否显示标题条</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">toolbar</span></td> 
   <td>是否显示浏览器工具栏</td> 
  </tr> 
  <tr> 
   <td><span style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px">top</span></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

下面贴上项目中的代码：

function openDetailDialog(url){
    				window.open(url, "_blank", "scrollbars=yes,fullscreen=yes,location=yes,resizable=yes,status=yes,titlebar=yes,menubar=yes"); 
    			}

这段代码可以实现打开一个页面，以全屏模式打开，有地址栏，有工具栏，可以调整窗口大小，带有标题条等