Question

我打开这样的弹出窗口：

function showWindow(url){
    var newwindow=window.open(url,'name','height=300,width=350');
        newwindow.onbeforeunload =  function () {
            alert("closed");
        };
}

HTML

<button type="button" onclick="return showWindow('popup.html')">bbb</button>
<p id="text" style="display:none">aaa</p>

并在popup.html中：

<html>
<head>
<script type="text/javascript">

</script>
</head>

<body>
a: <input type="text" id="name"/> </br>
a: <input type="text" id="surname"/></br>
a: <input type="text" id="cardNumber"/></br>
a: <input type="text" id="way"/></br>
a: <input type="text" id="freePlaces"/></br>

<button type="button" onclick="window.close()">G</button>
</body>
</html>

但是当我使用window.close关闭弹出窗口时，我的onbeforeunload没有被调用。怎么解决这个问题？

Answer 1

不要在打开窗口的函数中设置onbeforeunload，而是在新窗口（popup.html）上设置，如下所示：

window.onbeforeunload = function () {
    alert("closed");
};

然而，为了能够关闭新窗口，请在开启者页面上设置一个功能，如下所示：

function closeWindow() {
    newwindow.close();
}

然后在新窗口中调用它：

<button type="button" onclick="window.opener.closeWindow();">G</button>

确保newwindow与您打开窗口（var newwindow=window.open(url,'name','height=300,width=350');）的变量的名称相同。

EDITED！

我有一个更好的一个...

原始页面：

<强> HTML

<button type="button" onclick="toggleMe('popup.html',false);">bbb</button>

<强> JS

function toggleMe(url, closeMe){
    var newwindow = window.open(url,'name','height=300,width=350');
    if (closeMe) {
        newwindow.close();
    }
}

popup.html：

<强> HTML

<button type="button" onclick="window.opener.toggleMe('popup.html',true);">G</button>
<!-- Make sure popup.html is the same as above -->

<强> JS

window.onbeforeunload = function() { return "closed"; };
// Hint: I used return "text" because alert doesn't seem to work on Chrome

用2个html文件弹出如何获得弹出关闭事件？

1 个答案:

EDITED！

原始页面：

popup.html：