防止使用JavaScript浏览网页


Answers:


159

使用onunload可以显示消息,但不会中断导航(因为为时已晚)。但是,使用onbeforeunload会中断导航:

window.onbeforeunload = function() {
  return "";
}

注意:返回空字符串,因为较新的浏览器提供了诸如“任何未保存的更改将丢失的消息”之类的消息,该消息不能被覆盖。

在较旧的浏览器中,您可以指定要在提示中显示的消息:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

11
浏览器将显示适当的提示。只需使用window.onbeforeunload = function() { return ""; }
KIM Taegyoon

但这还不够。表单中的控件呢?他们也触发了这一点。
Fandango68年

1
现代浏览器不允许您在提示中显示自定义消息,因为网络钓鱼者等滥用了该消息。
Flimm

感谢@Flimm,我已经更新了答案,因此它对于当前的浏览器来说是准确的。
Jimmie R. Houts,

@Flimm我想在在线用户关闭浏览器选项卡或浏览器时更新用户在线状态。我使用了解决方案中的代码,但没有用,是否有解决方案?
纳辛巴

23

与此处介绍的其他方法不同,这段代码不会导致浏览器显示警告,询问用户是否要离开。相反,它利用DOM的事件性质在浏览器有机会从内存中卸载它之前将其重定向回到当前页面(从而取消导航)。

由于它是通过直接短路导航来工作的,因此不能用来防止页面被关闭;但是,它可以用于禁用帧消除。

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

免责声明:绝对不要这样做。如果页面上有禁止使用框架的代码,请尊重作者的意愿。


如果用户要关闭浏览器(单击关闭),如何显示模式?它真的?

15

我最终得到了这个略有不同的版本:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

在其他地方,当表单被弄脏时,我将dirty标志设置为true(否则,我想防止导航离开)。这使我可以轻松控制用户是否收到“确认导航”提示。

使用所选答案中的文字,您会看到多余的提示:

在此处输入图片说明


3
在IE中,如果dirty为false,将显示字符串“ null”。只需将其包装在if语句中即可。请参阅:stackoverflow.com/questions/11793996/...
雅各布面包车林根

同意@JacobvanLingen,这将是此处以及其他三个 问题的最佳答案,如果它以null 结尾而不是null。(1)有条件(2)提及“肮脏”是阻碍导航的最常见合法原因,并且(3)具有屏幕截图。 undefined
鲍勃·斯坦

如果它以undefined而不是null结尾,是否可以在所有浏览器上使用?
危险


7

在Ayman的示例中,通过返回false可以防止浏览器窗口/选项卡关闭。

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

2
除非浏览器是Opera,否则如果关闭选项卡/窗口/程序,则跳过onunload事件。
Powerlord

5

等效于jQuery 1.11中接受的答案:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

JSFiddle示例

altCognito的答案使用了该unload事件,该事件为时已晚,以至于JavaScript无法中止导航。


3

使用onunload

对于jQuery,我认为这是这样的:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

返回false不会不幸地取消卸载-该unload事件在用户离开页面时beforeunload触发,这与之前触发的事件不同(可能会被取消)
Jimbo

@altCognito:您通过falseIfYouWantToButBeCareful()给了我一个好主意,现在我可以避免IE或FF给出的默认弹出窗口了。但是对于铬,它不起作用。看着它。
user367134 2012年

3

该建议的错误消息可能与浏览器已经显示的错误消息重复。在chrome中,这2条类似的错误消息会在同一窗口中依次显示。

在chrome中,自定义消息后显示的文本是:“确定要离开此页面吗?”。在firefox中,它根本不显示我们的自定义错误消息(但仍显示对话框)。

更合适的错误消息可能是:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

或stackoverflow样式:“您已开始撰写或编辑帖子。”


2

如果您在捕获浏览器的后退/前进按钮时不想导航,则可以使用:

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

否则,您可以使用beforeunload事件,但是该消息可能跨浏览器正常运行,也可能无法跨浏览器运行,并且需要返回强制内置提示的内容。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.