代码之家 › 专栏 › 技术社区 › Germstorm Pierre-Alain Vigeant

防止用户意外离开

javascript-events javascript

Germstorm Pierre-Alain Vigeant · 技术社区 · 15 年前

我的问题比使用以下简单的javascript代码要复杂一些

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

在一个电子商务网页上,我想提醒用户,他在购物车里有东西,这样他就可以改变主意了。

关闭浏览器选项卡/窗口
导航到其他域

上面的javascript方法不能解决我的问题,因为即使用户在域中导航,它也会被调用。

Short:

用户试图关闭窗口->显示对话框
用户在浏览器的地址栏->显示对话框中将www.mydomain.com/shoppingcart url更改为www.google.com
用户使用“签出”按钮导航到www.mydomain.com/checkout,或在浏览器中按“后退”按钮->不显示对话框

6 回复 | 直到 15 年前

Butifarra 15 年前

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

当一个用户决定离开你的网站时,也就是通过输入一个新的URL,这不是意外,所以阻止他们说“嘿,你还没有签出”是毫无意义的。

James 15 年前

无法判断用户是按后退按钮还是关闭选项卡,而您无权访问他们的预期位置。

如果单击内部链接,则可以停止显示对话框,但:

(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;
    };

})();

Paulo 15 年前

我建议让访问者自由地离开您的网站,只需记住他们的信息(数据库、会话变量等)。在电子商务方面,这是保持客户的礼貌方式。

如果有人想离开你的网站,他们会的。事先反复检查可能只会激怒客户,减少他们回来的机会。

PatrikAkerstrand 15 年前

由于beforeunload事件对象不包含用户试图访问的位置,因此要执行此操作,一个“黑客”是将单击侦听器添加到站点上的所有链接,并在该处理程序中禁用卸载侦听器。它不是很漂亮,如果用户使用键盘导航,它可能不会工作,但这是我目前最好的猜测。

chaos 15 年前

听起来你需要使用 onbeforeunload 然后修改所有内部链接以禁用它。对于后者,可能要做的事情是jquery事件;使 hrefs 运行JS会很糟糕,尤其是因为它会击败搜索引擎爬行。

leighli 15 年前

我也在研究这个问题,原因是我们有一些非常愚蠢的最终用户,他们填写了一个完整的Web表单,然后不按保存按钮。

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