怎么监听window.open打开的新窗口是否关闭
时间: 2023-07-16 10:15:30 浏览: 399
可以使用window.open()方法打开一个新窗口,并给新窗口命名,然后使用window.close()方法关闭新窗口。同时,可以在父窗口中使用setInterval()方法定时检查子窗口是否已关闭。
示例代码如下:
在父窗口中:
```
var childWindow = window.open('child.html', 'childWindow');
var checkChildWindow = setInterval(function() {
if (childWindow.closed) {
clearInterval(checkChildWindow);
console.log('Child window is closed');
}
}, 1000);
```
在子窗口中:
```
<button onclick="window.close()">Close window</button>
```
这段代码会在父窗口中打开一个名为"childWindow"的子窗口,并每秒钟检查一次子窗口是否已关闭。在子窗口中,当点击"Close window"按钮时,子窗口会被关闭。
相关问题
vue中如何实现window.open打开得新窗口点击页面按钮关闭新窗口
你可以在Vue组件中使用`window.open()`方法来打开新窗口,在新窗口中为关闭按钮添加一个事件监听器来关闭该窗口。
以下是示例代码:
```
<template>
<div>
<button @click="openWindow">打开新窗口</button>
</div>
</template>
<script>
export default {
methods: {
openWindow() {
let newWindow = window.open('https://www.example.com', '_blank');
newWindow.addEventListener('beforeunload', () => {
console.log('新窗口已关闭');
});
}
}
};
</script>
```
在上面的代码中,我们首先在`openWindow`方法中使用`window.open()`方法打开一个新窗口,并将其存储为`newWindow`变量。然后,我们为新窗口添加了一个事件监听器,该监听器在用户关闭该窗口之前触发。在这个监听器中,我们可以执行一些逻辑,例如在控制台中输出一条消息。
值得注意的是,在大多数浏览器中,由于安全限制,您无法在关闭一个由`window.open()`打开的窗口。因此,您需要让用户自己关闭该窗口。
vue2获取window.open打开的指定其他页面的关闭事件
在Vue.js 2.x中,想要监听窗口`window.open()`打开的新页面并捕获其关闭事件,可以使用JavaScript的`addEventListener`方法来添加事件监听。但是需要注意的是,由于浏览器的安全限制,直接监听新窗口的关闭事件通常是不可行的,因为这涉及到跨域问题。
你可以尝试以下方法:
1. **通过查询历史记录**:如果新窗口是你应用的一部分,并且你知道它会有一个特定的历史记录条目,你可以定期检查这个条目的存在与否来推测窗口是否已经关闭。
```javascript
// 假设你有个变量保存新窗口的引用
let newWindow;
window.addEventListener('popstate', function() {
if (newWindow && !window.location.href.includes('/your/path')) { // 当前路径与预期不符时
console.log('新窗口已关闭');
// 在这里处理窗口关闭的逻辑
newWindow = null;
}
});
```
2. **利用iframe通信**:如果你有控制权去创建那个新窗口,并且两者在同一域名下,可以在它们之间建立一个iframe通道来传递消息,当新窗口关闭时,通知主窗口。
```javascript
newWindow = window.open('/new-page', '_blank', 'width=500,height=400');
// 创建一个在两个窗口间通信的函数
const sendMessageToNewWindow = (message) => {
const iframe = document.getElementById('communicationIframe');
if (iframe.contentWindow) {
iframe.contentWindow.postMessage(message, '*');
}
}
// 新窗口关闭时发送关闭信号
newWindow.onunload = function() {
sendMessageToNewWindow('window-closed');
};
// 主窗口监听来自新窗口的消息
window.addEventListener('message', function(event) {
if (event.origin === 'http://yourdomain.com') {
if (event.data === 'window-closed') {
console.log('新窗口已关闭');
newWindow = null;
}
}
}, false);
```
请注意,这些方法都可能存在兼容性和性能问题,而且并不是标准做法。最好的解决方案是尽量避免在用户无感知的情况下打开新窗口,除非你能确保有更好的交互机制来同步状态变化。
阅读全文