javascript - 使用 onbeforeunload 事件，选择留在此页面上的 url 更改

Question

重写问题 -

我正在尝试制作一个页面，如果用户离开页面（到其他链接/网站或关闭窗口/选项卡），我想向处理程序显示onbeforeunload，we have a great offer for you?如果用户选择leave the page它应该进行正常的传播，但如果他选择stay on the page我需要他将其重定向到提供页面redirection is important, no compromise。对于测试，让我们重定向到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并选择，leave the page他不会去雅虎，而是去谷歌:(

帮我！！提前致谢

这是小提琴代码

在这里你可以如何测试，因为 onbeforeunload 在 iframe 上不起作用

score 8 · Accepted Answer

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

~~http://jsfiddle.net/W3vUB/4/show~~

~~http://jsfiddle.net/W3vUB/4/~~

编辑：在codepen上设置DEMO，显然jsFiddle不喜欢这个片段（？！）顺便说一句，bing.com由于谷歌不允许在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);
}

score 2 · Accepted Answer

最好在本地检查。
查看评论并尝试以下操作：LIVE DEMO

var linkClick=false; 
document.onclick = function(e)
{
    linkClick = true;
    var elemntTagName = e.target.tagName;
    if(elemntTagName=='A')
    {
        e.target.getAttribute("href");
        if(!confirm('Are your sure you want to leave?'))
        {
           window.location.href = "http://google.com";
           console.log("http://google.com");
        }
        else
        {
            window.location.href = e.target.getAttribute("href");
            console.log(e.target.getAttribute("href"));
        }
        return false;
    }
}
function OnBeforeUnLoad () 
{
    return "Are you sure?";
    linkClick=false; 
    window.location.href = "http://google.com";
    console.log("http://google.com");
}

并将您的 html 代码更改为：

<body onbeforeunload="if(linkClick == false) {return OnBeforeUnLoad()}">
    <a href="http://yahoo.com">try it</a>
</body>

score 1 · Accepted Answer

在解决了这个问题一段时间后，我做了以下事情。它似乎工作，但它不是很可靠。最大的问题是超时功能需要桥接足够大的时间跨度，以便浏览器与链接的 href 属性中的 url 建立连接。

jsfiddle 来演示。我使用 bing.com 而不是 google.com 因为X-Frame-Options: SAMEORIGIN

var F = function(){}; // empty function
var offerUrl = 'http://bing.com';
var url;


var handler = function(e) {
    timeout = setTimeout(function () {
        console.log('location.assign');
        location.assign(offerUrl);

    /*
     * This value makes or breaks it.
     * You need enough time so the browser can make the connection to
     * the clicked links href else it will still redirect to the offer url.
     */
    }, 1400);

    // important!
    window.onbeforeunload = F;

    console.info('handler');
    return 'Do you wan\'t to leave now?';
};

window.onbeforeunload = handler;

score 0 · Accepted Answer

尝试以下，（添加一个始终检查状态的全局函数）。

var redirected=false;
$(window).bind('beforeunload', function(e){
    if(redirected)
        return;
    var orgLoc=window.location.href;
    $(window).bind('focus.unloadev',function(e){
        if(redirected==true)
            return;
        $(window).unbind('focus.unloadev');
        window.setTimeout(function(){
            if(window.location.href!=orgLoc)
                return;
            console.log('redirect...');
            window.location.replace('http://google.com');
        },6000);
        redirected=true;
    });
    console.log('before2'); 
    return "okdoky2";
});

$(window).unload(function(e){console.log('unloading...');redirected=true;});

score -1 · Accepted Answer

<script>
        function endSession() {
            // Browser or Broswer tab is closed
            // Write code here
            alert('Browser or Broswer tab closed');
        }
</script>

<body onpagehide="endSession();">

score -2 · Accepted Answer

我认为您对事件的进度感到困惑，在卸载页面之前仍在交互，返回方法就像返回“确认（）”的快捷方式，但是确认的返回根本无法处理，所以您无法真正调查用户的响应并决定走哪条路，响应将立即执行为“是”离开页面，或“否”不离开页面......

请注意，在提示用户之前，您已经将 url 的来源更改为 Google，此操作无法撤消......除非可能，您可以将超时设置为 5 秒（但如果用户不够快，它不会接他的答案）

编辑：我刚刚做了 5000 次延时，它总是转到 Yahoo! 永远不要拿起谷歌的变化。

javascript - 使用 onbeforeunload 事件，选择留在此页面上的 url 更改

6 回答 6

Related

Reference