Question

重写问题 -

我正在尝试创建一个页面，如果用户离开页面（到其他链接/网站或关闭窗口/标签）我想显示onbeforeunload handeler说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他不会去雅虎而是去谷歌:(

帮帮我!!在此先感谢

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不喜欢这个代码段（？！）顺便说一句，由于谷歌不允许在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);
}

Answer 2

最好在当地检查。
查看评论并尝试：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>

Answer 3

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

jsfiddle to demonstrate。 由于X-Frame-Options: SAMEORIGIN

，我使用的是bing.com而不是google.com

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;

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

Answer 5

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

<body onpagehide="endSession();">

Answer 6

我认为你对事件的进展感到困惑，在卸载页面之前还在进行交互，返回方法就像是返回“confirm（）”的快捷方式，然后返回确认无法处理，所以你无法真正调查用户的反应并决定它走哪条路，响应将立即执行为“是”离开页面，或“否”不离开页面...... < / p>

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

编辑：我刚刚做了5000次失误，它总是发给雅虎！永远不要接受谷歌的变化。

使用onbeforeunload事件，在此页面上选择停留时更改URL

6 个答案: