在浏览器关闭之前提示用户?

2022-01-20 00:00:00 popup javascript browser-close

我们有一个管理门户，我们的老师经常忘记在注销和/或关闭浏览器窗口之前下载他们最新的 PDF 说明.我环顾四周，但找不到我要找的东西.

We have an administrative portal that our teachers constantly forget to download their latest PDF instructions before logging out and/or closing the browser window. I have looked around but can't find what I'm looking for.

我想完成以下目标:

在用户关闭浏览器窗口之前，系统会提示他们您记得下载表单吗?"有两个选项，是/否.是则关闭，否则返回页面.

Before a user can close the browser window, they are prompted "Did you remember to download your form?" with two options, yes/no. If yes, close, if no, return to page.

在用户点击退出"按钮之前，他们会收到与上述相同的提示.

Before a user can click the 'logout' button, they are prompted with the same as above.

我第一次通过非常基本的代码(不适用于关闭浏览器)是:

My first pass at the very basic code (which does not work for browser close) is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function init() {
    if (window.addEventListener) {
        window.addEventListener("beforeunload", unloadMess, false);
    } else if (window.onbeforeunload) {
        window.onbeforeunload = unloadMess;
    };
}

function unloadMess() {
    var User_Message = "[Your user message here]"
    return User_Message;
}
</script>
</head>

<body onload="init();">
     hello this is my site
</body>
</html>

编辑 - 新问题

下面提供的解决方案有效，但也有其自身的问题:

EDIT - NEW ISSUES

The solution provided below works but also has its own issues:

当用户单击链接以实际下载表单时，页面会认为他们正在尝试离开并反过来向他们显示错误消息！另外-我希望发生一个事件或另一个事件，但不一定同时发生.IE.他们点击注销"按钮，他们会看到 OnClick 事件，然后是浏览器提示.有什么想法吗?

When user clicks the link to actually download the forms, the page thinks they are trying to leave and in turn present an error message to them! Also - I would like for one event or another to occur but not necessarily both. I.e. they hit 'logout' button and they are presented with the OnClick event, THEN the browser prompt. Any ideas?

推荐答案

2017年更新

所有现代浏览器不再支持自定义消息.

All modern browsers do not support custom messages any longer.

window.onbeforeunload = function(evt) {
   return true;
}

这个用于关闭标签:

window.onbeforeunload = function(evt) {
    var message = 'Did you remember to download your form?';
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt) {
        evt.returnValue = message;
    }

    return message;
}

并使用 onClick 事件作为注销按钮:

and use onClick event for logout button:

onClick="return confirm('Did you remember to download your form?');"

相关文章