Question

我的问题比使用以下简单的JavaScript代码更复杂

window.onbeforeunload = function (e) {      
  return 'Are You Sure?';
};

在电子商务网页上，我想提醒用户他在购物车中有物品，以便他可以改变主意

关闭浏览器标签/窗口
导航到其他域

上面的JavaScript方法无法解决我的问题，因为即使用户在域中导航也会引发它。

短：

用户尝试关闭窗口 - ＆gt;显示对话框
用户在浏览器的地址栏中将www.mydomain.com/shoppingcart网址更改为www.google.com - ＆gt;显示对话框
用户使用结帐按钮导航至www.mydomain.com/checkout或按浏览器中的后退按钮 - ＆gt;不要显示对话框

Answer 1

无法判断用户是按下后退按钮还是关闭标签，而您无法访问其预定位置。

可以阻止对话框显示是否单击了内部链接：

(function(){

    function isExternal( href ) {
        return RegExp('https?:\\/\\/(?!' + window.location.hostname + ')').test(href);
    }

    var returnValue = 'Are you sure?';

    document.documentElement.onclick = function(e){
        var target = e ? e.target : window.event.srcElement;
        if (target.href && !isExternal(target.href)) {
            returnValue = undefined;
        }
    };

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

})();

Answer 2

很抱歉，您的“问题”没有技术解决方案。

当用户决定离开您的网站时，即输入一个新网址时，这不是偶然的，所以阻止他们说“嘿，你还没有退房”是没有意义的。

Answer 3

我建议让访问者自由地离开您的网站，只记住他们的信息（DB，Sessions vars等）。就电子商务而言，这是保持客户的礼貌方式。

如果有人想要离开您的网站，他们会。事先仔细检查可能只会刺激顾客并减少他们返回的机会。

Answer 4

由于beforeUnload-event对象不包含用户尝试访问的位置，因此执行此操作的一个“hack”是将click侦听器添加到站点上的所有链接，并禁用unload-listener。处理程序。它不是很漂亮，如果用户使用键盘导航它可能不会起作用，但这是我最好的猜测。

Answer 5

听起来您需要使用onbeforeunload，然后修改所有内部链接以禁用它。可能后者的事情是jQuery事件;让实际的hrefs运行JS会很糟糕，尤其是因为它会破坏搜索引擎爬行。

Answer 6

我也在研究这个问题，原因是我们有一些非常愚蠢的最终用户填写了整个网络表单，然后没有按下保存按钮。

我发现这是你感兴趣的，似乎是一个很好的解决方案： http://www.4guysfromrolla.com/demos/OnBeforeUnloadDemo1.htm

防止用户意外导航

6 个答案: