打开一个自定义的浏览器窗口

港控/mmm° 2022-03-28 04:00 283阅读 0赞

## 打开一个自定义的浏览器窗口 ##

### HTML DOM open() 方法： ###

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

#### 语法定义： ####

window.open(URL,name,features,replace);
    	参数介绍：
    		1.URL:一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
    		2.name:一个可选的字符串，该字符串是一个由逗号分隔的特征列表，可以有数字、字符、下划线组成，该字母声明了新窗口的名称。如果该参数指定了一个已经存在的窗口，那么open()将不会打开新的窗口，而只是返回对指定窗口的引用。在这种情况下，features将被忽略。
    		3.features：一个可选的字符串，声明了新窗口要显示的浏览器特征和大小样式，如果省略该参数，新建窗口默认使用浏览器默认的标准特征。
    		4.replace：一个可选的布尔值，规定了装载到窗口的URL是在浏览历史中创建一个新的条目，还是代替浏览历史中的当前条目。支持：true - URL 替换浏览历史中的当前条目； fals - URL 在浏览历史中创建新的条目。

*  简单实例1（打开一个新窗口） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 1]
 *  实例2（自定义窗体特征）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 3]
 *  关闭新建的窗口  
    ![在这里插入图片描述][20190115144049831.jpg]  
    ![在这里插入图片描述][20190115144103326.jpg]
    
    **注：在实际开发中，如果想在关闭窗体前刷新父页面，可以执行以下代码：  
    self.opener.location.reload()；  
    进行父页面更新**

#### 窗口特征（features） ####

<table> 
 <thead> 
  <tr> 
   <th>特性</th> 
   <th>值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>channelmode</td> 
   <td>yes、no、1、0</td> 
   <td>是否使用剧院模式显示窗口。默认为 no。</td> 
  </tr> 
  <tr> 
   <td>directories</td> 
   <td>yes、no、1、0</td> 
   <td>是否添加目录按钮。默认为 yes。</td> 
  </tr> 
  <tr> 
   <td>fullscreen</td> 
   <td>yes、no、1、0</td> 
   <td>是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td></td> 
   <td>窗口文档显示区的高度。以像素计。</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td></td> 
   <td>窗口的 x 坐标。以像素计。</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td></td> 
   <td>窗口的 y 坐标。</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td>yes、no、1、0</td> 
   <td>是否显示地址字段。默认是 yes。</td> 
  </tr> 
  <tr> 
   <td>menubar</td> 
   <td>yes、no、1、0</td> 
   <td>是否显示菜单栏。默认是 yes。</td> 
  </tr> 
  <tr> 
   <td>resizable</td> 
   <td>yes、no、1、0</td> 
   <td>窗口是否可调节尺寸。默认是 yes。</td> 
  </tr> 
  <tr> 
   <td>scrollbars</td> 
   <td>yes、no、1、0</td> 
   <td>是否显示滚动条。默认是 yes。</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>yes、no、1、0</td> 
   <td>是否添加状态栏。默认是 yes。</td> 
  </tr> 
  <tr> 
   <td>titlebar</td> 
   <td>yes、no、1、0</td> 
   <td>是否显示标题栏。默认是 yes。</td> 
  </tr> 
  <tr> 
   <td>toolbar</td> 
   <td>yes、no、1、0</td> 
   <td>是否显示浏览器的工具栏。默认是 yes。、</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td></td> 
   <td>窗口的文档显示区的宽度。以像素计。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70]: /images/20220328/7456466dee59425a94426e6706bc521a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 1]: /images/20220328/e0b248bc76e141d1829e6c88b7567433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 2]: /images/20220328/17283af68f21465fbb1076eaa866f896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjUxODA2Mg_size_16_color_FFFFFF_t_70 3]: /images/20220328/2c5430c4ecb24979ac3a0b6bd48f2cec.png
[20190115144049831.jpg]: /images/20220328/6e93e990b84c410dbf87891d64b9db5f.png
[20190115144103326.jpg]: /images/20220328/66fba701a76044d0a9aefa648553fd41.png