防止使用JavaScript导航网页

StackOverflow https://stackoverflow.com/questions/821011

  •  03-07-2019
  •  | 
  •  

题

如何防止网页使用JavaScript导航？

有帮助吗？

解决方案

使用 onunload 只允许您显示消息，但不会中断导航（因为为时已晚）。但是，您可以使用 onbeforeunload ，它将中断导航：

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

编辑：在return语句中删除了 confirm（），因为这导致了预期的确认窗口，但也显示第二次确认与第一次确认的结果。

其他提示

与此处介绍的其他方法不同，这段代码将不导致浏览器显示警告，询问用户是否要离开;相反，它利用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);
})();

免责声明：你永远不应该这样做。如果页面上有破坏框架的代码，请尊重作者的意愿。

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

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

在其他地方，当表单变脏时（或者我想阻止导航），我将脏标志设置为true。这使我可以轻松控制用户是否获得确认导航提示。

使用所选答案中的文本，您会看到多余的提示：

在Ayman的例子中，返回false会阻止浏览器窗口/选项卡关闭。

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

使用现代的addEventListener API，以更现代和浏览器兼容的方式使用它。

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

来源： https://developer.mozilla.org/en-美国/文档/网络/活动/ beforeunload

相当于jQuery 1.11中接受的答案：

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

JSFiddle示例

altCognito的回答使用了 unload 事件，这种情况发生得太晚，JavaScript无法中止导航。

使用 onunload 。

对于jQuery，我认为这样做是这样的：

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

建议的错误消息可能会复制浏览器已显示的错误消息。在chrome中，两个类似的错误消息在同一窗口中一个接一个地显示。

在Chrome中，自定义消息后显示的文字为：“您确定要离开此页吗？”。在Firefox中，它根本不显示我们的自定义错误消息（但仍然显示对话框）。

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

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

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

如果您正在捕捉浏览器后退/前进按钮并且不想离开，则可以使用：

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 活动，但是消息可能会或可能不会跨浏览器工作，并且需要返回强制内置提示符的内容。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top