window.open详解（打开新窗口、脱离当前浏览器窗口打开新窗口）

打开新窗口的方式有哪些:

• 在链接上单击右键，然后选择「在新窗口打开链接」或者「在新标签打开链接」
• 按住键盘上的 Ctrl/Command 单击链接，新标签打开链接
• <a href="...." target="_blank">
• window.open()

下面仅介绍window.open的使用

window.open详解（打开新窗口、脱离当前浏览器窗口打开新窗口）

?

1	window.open(URL,name,features,replace)

 

参数	描述
URL	字符串（可选），新窗口中要显示的地址
name	字符串（可选），打开窗口的方式，类似a标签tartget属性：_blank,_parent,_self,_top
features	字符串（可选），申明新窗口的显示特征，见下表
replace	布尔值（可选），true - URL 替换浏览历史中的当前条目；false - URL 在浏览历史中创建新的条目

 

 

 

 

 

 

参数说明：

• Url：可选，新窗口需要载入的url地址。strUrl可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。
• name：可选，新窗口的名称。该字符串可以用来作为超链接 <a> 或表单<form> 元素的目标属性值。字符串中不能含有空白字符。注意：strWindowName 并不是新窗口的标题。
• features：可选，列出新窗口的特征(大小，位置，滚动条等)作为一个DOMString。

第一个参数，如果没有指定URL，打开一个新的空白窗口。

第二个参数指定target属性或窗口的名称。支持以下值：

• _blank     URL加载到一个新的窗口。这是默认
• _parent   URL加载到父框架
• _self       URL替换当前页面
• _top        URL替换任何可加载的框架集
• name     窗口名称，相同名称会直接替换显示页面

第三个参数我们用的比较少，详细说明可参考
window.open 参数3介绍

窗口特征（Features）

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

案例

在新窗口打开地址

?

1	window.open('http://www.test.url.com','_blank');

　　

在新窗口打开地址(脱离当前浏览器窗口)

?

1	window.open('http://www.test.url.com','_blank','location=no');

　　

相关链接：
https://www.w3school.com.cn/jsref/met_win_open.asp

 

在新窗口中打开页面？小心有坑！

Window open() 方法

弹窗和 window 的方法