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

【问题标题】：using onbeforeunload event, url change on selecting stay on this page使用 onbeforeunload 事件，选择留在此页面上的 url 更改
【发布时间】：2013-05-22 15:32:34
【问题描述】：

重写问题 -

我正在尝试创建一个页面，如果用户离开页面（到其他链接/网站或关闭窗口/选项卡）我想显示 onbeforeunload 处理程序说 we have a great offer for you? 并且如果用户选择 @987654325 @ 它应该进行正常的传播，但如果他选择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，他不会去雅虎而是去谷歌:(

帮帮我！！提前致谢

here is the fiddle code

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

【问题讨论】：

用户讨厌这个。如果他们不想离开，他们不会更改 URL 或关闭选项卡。你为什么要惹恼他们？
我知道，但它是为了学习目的而不是作为 ux 的真实项目
@GeorgeCummins 在某些应用程序中欢迎“确认导航”对话框。例如，在 Google Docs 中，如果用户在自动保存完成之前尝试导航。一方面，我宁愿被“确认导航”对话所困扰，也不愿失去我的工作。
@RohitAgrawal 我真的对这个特殊问题感到困惑。如果用户选择留下......为什么要把他们送到其他地方？（你不是在为 Google 工作，是吗？？）
它可以是来自我网站的任何链接或任何促销页面，消息可以是你想看到一个报价，停留在页面上可以将他带到那个报价页面，离开应该可以正常工作

标签： javascript jquery

【解决方案1】：

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

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

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

编辑： 在 codepen 上设置 DEMO，显然 jsFiddle 不喜欢这个 sn-p(?!) 顺便说一句，由于谷歌不允许在 iframe 中显示更多内容，因此使用 bing.com。

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

【讨论】：

点击 tryit 然后离开页面应该转到 yahoo 但它会转到 google
让我们continue this discussion in chat
请注意，Firefox 不会为 onbeforeunload 对话框显示自定义消息。它始终显示默认消息。
@Riateche 真的！ OP告诉他这对他来说不是问题。请参阅有问题的 cmets。
如何在离开页面按钮时执行功能一切都很好，但是如何在离开页面按钮时触发事件

【解决方案2】：

最好在本地检查。
查看 cmets 并尝试以下操作：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>

【讨论】：

如果用户离开页面（到其他链接/网站或关闭窗口/标签），点击将无法解决我的问题，对不起
@RohitAgrawal 在 Firefox 中再次检查答案。
如果我尝试使用地址栏或关闭窗口更改 url，警报不会出现
@RohitAgrawal 你在 Firefox 中测试过吗？如果您尝试关闭窗口并且不同意关闭窗口的确认（接受报价）。您将重定向到 google.com。
它没有在 Firefox 中为我打开任何确认块

【解决方案3】：

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

jsfiddle to demonstrate。 我使用 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;

【讨论】：

点击试用然后离开页面转到bing.com而不是yahoo.com
不可靠的部分 :-) 您需要使用超时毫秒来获得正确的结果。 1400 为我工作，但也许您需要将其设置为更高的值。
所以和我已经做过的一样，我需要解决这个问题，如果选择留在页面上以获得更高的值，它将稍后转到 bing.com

【解决方案4】：

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

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

【讨论】：

没用，我用你的代码jsfiddle.net/pb7th/20/show点击试试看，说离开页面会导致google.com而不是链接url:(
仍然是同样的错误，我点击尝试它然后离开页面它应该去 yahoo.com 而是去 google.com
这是一个时间问题。我用 jquery 重写了整个事情。希望现在对我有帮助...您可以将时间更改为等待 10 秒，并且可能会让它变得更加鲁棒...jsfiddle.net/pb7th/41
如果你增加了很多时间然后点击尝试它并且点击停留在页面上将在10秒后进入谷歌，所以使用会认为没有执行任何操作，同样的问题我最初与计时器有关
您可以在屏幕上添加一个指示器，它会显示“redirect in... secs..”，在任何情况下都是如此。（关闭和所有）。希望对您有所帮助。

【解决方案5】：

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

<body onpagehide="endSession();">

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

我并没有说它不能完成......但是无论如何当我点击内部时你的解决方案，什么都没有发生......另一个链接是一个简单的点击事件，这不是什么问题是关于。
内部链接指向 div 元素（同一页面的底部），它是使用哈希“#”的内部链接。它只是为了证明您仍然可以使用内部链接。如果您单击链接“尝试一下”，您会看到这正是 OP 正在寻找的...
嗯，如果问题是关于处理简单的点击，那么为什么要使用“onbeforeunload”呢？当我单击内部时，您的示例真的非常好，什么也没做。
jsfiddle.net/W3vUB/4/show希望现在更容易理解...
我想我理解我的混淆，我使用 1900px 分辨率，所以内部链接真的，真的什么都没做:) 无论如何，你所做的是将问题分成两个单独的部分并以不同的方式处理链接从浏览器关闭，这很聪明，但我认为提问者这样做是为了研究目的，看看它是否可行。