JS window.open()打开新窗口、监听页面打开关闭状态（详细）

使用 window 对象的 open() 方法可以打开一个新窗口。用法如下：

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

参数列表如下：

URL：可选字符串，声明在新窗口中显示网页文档的 URL。如果省略，或者为空，则新窗口就不会显示任何文档。
name：可选字符串，声明新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的 target 目标值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features 参数将被忽略。
features：可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示。如果省略该参数，新窗口将具有所有标准特征。
replace：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

该方法返回值为新创建的 window 对象，使用它可以引用新创建的窗口。

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。
toolbar = yes \| no \| 1 \| 0	是否显示浏览器的工具栏。默认是 yes。
top = pixels	窗口的 y 坐标
width = pixels	窗口的文档显示区的宽度。单位为元素。

新创建的 window 对象拥有一个 opener 属性，引用打开它的原始对象。opener 只在弹出窗口的最外层 window 对象（top）中定义，而且指向调用 window.open() 方法的窗口或框架。

示例1

下面示例演示了打开的窗口与原窗口之间的关系。

win = window.open();  //打开新的空白窗口
win.document.write ("<h1>这是新打开的窗口</h1>");  //在新窗口中输出提示信息
win.focus ();  //让原窗口获取焦点
win.opener.document.write ("<h1>这是原来窗口</h1>");  //在原窗口中输出提示信息
console.log(win.opener == window);  //检测window.opener属性值

使用 window 的 close() 方法可以关闭一个窗口。例如，关闭一个新创建的 win 窗口可以使用下面的方法实现。

win.close;

如果在打开窗口内部关闭自身窗口，则应该使用下面的方法。

window.close;

使用 window.closed 属性可以检测当前窗口是否关闭，如果关闭则返回 true，否则返回 false。

下面是一个监听当前新开页面该窗口的打开关闭状态的示例

const winURL = window.open('URL');  // 设置要打开的对象
const loop = setInterval(() => {    // 使用定时器查询当前状态if (winURL && winURL .closed) {  // 进行判断条件   closed属性就是返回当前窗口的状态console.log('我被关闭了')clearInterval(loop);       // 清除定时器// Logical code}}, 500);

JS window.open()打开新窗口、监听页面打开关闭状态（详细）相关推荐

JavaScript监听页面的关闭、刷新和最小化、onload事件、ctrlKey、altKey事件
visibilitychange事件是指当浏览器的某个标签页切换到后台或者从后台切换到前台时,会触发该事件.可以用来判断当前页面可见性的状态,用于判断当前页面是否是最小化状态. onload事件 on ...
angular2 页面中使用window.open打开新窗口后，新页面document.addEventListener visibilitychange事件不生效（谷歌浏览器）
如题目所述,在原来页面中,使用window.open打开新页面链接,新页面中需要实现浏览器窗口切换时,监听当前窗口切换超过几次进行提醒,新窗口监听事件如下 if (document.hidden != ...
浏览器拦截打开新窗口情况总结
在打开一个新窗口时,由于浏览器的安全机制,用户未始终允许的情况下,可能会触发到浏览器拦截,无法正常直接弹出. 网上有很多给出解决方案的只言片语,不够全面,所以针对自己遇到的问题做了详细的情况分析.总结 ...
vue 拖动 datatransfer 问题_electron-vue跨平台桌面应用开发实战教程（四）——窗口样式amp;打开新窗口...
> 本文我们讲解下怎么修改窗口样式,系统默认的窗口非常普通,通常与设计不符,所以我们要自定义,接下来我们讲解下怎么去掉原有样式,怎么实现实现窗口的最小化,最大化和关闭按钮.还有怎么打开一个新页 ...
打开新窗口的几种方式及target=_blank指定窗口名称
打开新窗口的几种方式及target=_blank指定窗口名称打开新窗口的几种方式: 1.form提交到新窗口 <form action="action.jsp" ta ...
a标签实现文件、图片下载和打开新窗口
a标签实现文件.图片下载 a标签实现文件或图片下载只需要设置 download="" 属性即可,该属性的值可以为空,如果设置值,则该值就将是文件下载的默认名字. <a her ...
云闪付APP内嵌H5监听左上角X关闭事件
最近在做云闪付蓝牙对接,遇到的一个问题. 需求用户进入云闪付APP内嵌 H5页面调用接口连上蓝牙后,可能不想支付使用,或其他原因,随手关闭左上角X关闭浏览器,这时需要监听这个动作,断开蓝牙连接,不然 ...
vue监听页面滚动事件
方法:监听滚动实现通过addEventListener方式监听通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...
jq监听页面的滚动事件，
jQuery监听页面的滚动状态,实现代码: $(document).scroll(function() { var scroH = $(document).scrollTop(); // ...

JS window.open()打开新窗口、监听页面打开关闭状态（详细）

JS window.open()打开新窗口、监听页面打开关闭状态（详细）相关推荐

最新文章

热门文章