使用onbeforeunload事件，url在此页面上选择停留时更改
重写问题 –
我想创建一个页面，如果用户离开页面（到其他链接/网站或关闭窗口/选项卡）我想显示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他不会去雅虎但谷歌而是:(
帮我 ！！ 提前致谢
这是小提琴代码
这里你如何测试，因为onbeforeunload不能很好地适用于iframe
此解决方案适用于所有情况，使用后退浏览器按钮，在地址栏中设置新URL或使用链接。 我发现触发onbeforeunload处理程序不会显示附加到onbeforeunload处理程序的对话框。 在这种情况下（需要触发时），使用确认框显示用户消息。 此解决方法在chrome / firefox和IE（7到10）中测试
http://jsfiddle.net/W3vUB/4/show
编辑：在codepen上设置DEMO，显然jsFiddle不喜欢这个片段（？！）BTW，使用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); }
最好在本地查看。
看看评论，试试这个： 现场演示
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代码更改为：
try it
在玩了这个问题后，我做了以下几点。 它似乎工作，但它不是很可靠。 最大的问题是，超时function需要为浏览器桥接足够大的时间跨度，以便在链接的href属性中建立与url的连接。
jsfiddle来演示 。 由于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;
尝试以下方法 ，（添加一个全局函数，尽管一直检查状态）。
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;});
我觉得你对事件的进展感到困惑，在卸载页面之前还在进行交互，返回方法就像是返回“confirm（）”的快捷方式，然后确认的返回根本无法处理，所以你无法真正调查用户的反应并决定它走哪条路，响应将立即执行为“是”离开页面，或“否”不离开页面…
请注意，在您提示用户之前，您已经将URL的来源更改为Google，此操作无法撤消…除非可能，您可以选择超时5秒（但如果用户不够快，则可以不会拿起他的答案）
编辑：我刚刚做了5000次失误，它总是发给雅虎！ 永远不要拿起谷歌的变化。