javascript - 使用 onbeforeunload 事件，选择停留在此页面时 url 发生变化

Question

重写问题 -

我正在尝试创建一个页面，如果用户离开该页面(前往其他链接/网站或关闭窗口/选项卡)，我想显示 onbeforeunload 处理程序说 我们有对您来说是一个很好的报价吗？如果用户选择离开页面它应该进行正常的传播，但如果他选择留在页面上我需要他将其重定向到优惠页面重定向很重要，不能妥协。为了进行测试，让我们重定向到 google.com

我编写了一个程序如下 -

var stayonthis = true;
  var a;
  function load() {
   window.onbeforeunload = function(e) {
        if(stayonthis){
         a = setTimeout('window.location.href="http://google.com";',100);
         stayonthis = false;    
         return "Do you really want to leave now?";
        }
        else {
            clearTimeout(a);
        }

    };
    window.onunload = function(e) {
         clearTimeout(a);
    };
  }
  window.onload = load;

但问题是，如果他点击 yahoo.com 的链接并选择离开页面，他就不会访问 yahoo，而是访问 google :(

帮帮我!!提前致谢

here is the fiddle code

here how you can test because onbeforeunload does not work on iframe well

Answer 1

此解决方案适用于所有情况，使用后退浏览器按钮、在地址栏中设置新网址或使用链接。 我发现触发 onbeforeunload 处理程序不会显示附加到 onbeforeunload 处理程序的对话框。 在这种情况下(需要触发时)，请使用确认框来显示用户消息。此解决方法已在 chrome/firefox 和 IE(7 到 10)中测试

<罢工> http://jsfiddle.net/W3vUB/4/show

<罢工> http://jsfiddle.net/W3vUB/4/

编辑:在codepen上设置DEMO，显然jsFiddle不喜欢这个片段(？!) 顺便说一句，使用 bing.com由于 Google 不允许 iframe 内显示更多内容。

http://codepen.io/anon/pen/dYKKbZ

var a, b = false,
    c = "http://bing.com";

function triggerEvent(el, type) {
    if ((el[type] || false) && typeof el[type] == 'function') {
        el[type](el);
    }
}

$(function () {
    $('a:not([href^=#])').on('click', function (e) {
        e.preventDefault();
        if (confirm("Do you really want to leave now?")) c = this.href;


        triggerEvent(window, 'onbeforeunload');

    });
});

window.onbeforeunload = function (e) {
    if (b) return;
    a = setTimeout(function () {
        b = true;
        window.location.href = c;
        c = "http://bing.com";
        console.log(c);
    }, 500);
    return "Do you really want to leave now?";
}
window.onunload = function () {
    clearTimeout(a);
}