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

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

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

下面仅介绍window.open的使用

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

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 窗口的文档显示区的宽度。以像素计。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

案例

在新窗口打开地址

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

  

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

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

  

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

 

在新窗口中打开页面?小心有坑!

Window open() 方法

弹窗和 window 的方法

posted @ 2022-05-05 22:14  IT6889  阅读(7135)  评论(0编辑  收藏  举报