blocks|key|1351743|text|在Ayman的示例中，通过返回false，您可以阻止浏览器窗口/选项卡关闭。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1351744|window.onunload+=+function+()+{
++alert('You+are+trying+to+leave.');
++return+false;
}|code-block|syntax|javascript|1351745|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In Ayman's example by returning false you prevent the browser window/tab from closing.

<pre><code>window.onunload = function () {
 alert('You are trying to leave.');
 return false;
}
</code></pre>

blocks|key|1567271|text|使用onunload允许您显示消息，但不会中断导航(因为为时已晚)。但是，使用onbeforeunload将中断导航：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1567272|window.onbeforeunload+=+function()+{
++return+"";
}|code-block|syntax|javascript|1567273|注意:返回空字符串是因为较新的浏览器提供了无法覆盖的消息，例如“任何未保存的更改都将丢失”。|1567274|在较旧的浏览器中，您可以指定要在提示中显示的消息：|1567275|window.onbeforeunload+=+function()+{
++return+"Are+you+sure+you+want+to+navigate+away?";
}|1567276|entityMap^0|2|8|13|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

Using <code>onunload</code> allows you to display messages, but will not interrupt the navigation (because it is too late). However, using <code>onbeforeunload</code> will interrupt navigation:

<pre><code>window.onbeforeunload = function() {
 return "";
}
</code></pre>

Note: An empty string is returned because newer browsers provide a message such as "Any unsaved changes will be lost" that cannot be overridden.

In older browsers you could specify the message to display in the prompt:

<pre><code>window.onbeforeunload = function() {
 return "Are you sure you want to navigate away?";
}
</code></pre>

blocks|key|1351664|text|使用onunload。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1351665|对于jQuery，我认为它是这样工作的：|1351666|$(window).unload(function()+{+
++alert("Unloading");+
++return+falseIfYouWantToButBeCareful();
});|code-block|syntax|javascript|1351667|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/jsref_onunload.asp^0|2|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Use <a href="http://www.w3schools.com/jsref/jsref_onunload.asp" rel="nofollow noreferrer">onunload</a>. 

For jQuery, I think this works like so:

<pre><code>$(window).unload(function() { 
 alert("Unloading"); 
 return falseIfYouWantToButBeCareful();
});
</code></pre>

blocks|key|1351855|text|该建议的错误消息可能会重复浏览器已经显示的错误消息。在chrome中，两个类似的错误消息在同一窗口中依次显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1351856|在chrome中，在自定义消息之后显示的文本是：“你确定要离开这个页面吗？”在firefox中，它根本不显示我们的自定义错误消息(但仍然显示对话框)。|1351857|更合适的错误消息可能是：|1351858|window.onbeforeunload+=+function()+{
++++return+"If+you+leave+this+page,+you+will+lose+any+unsaved+changes.";
}|code-block|syntax|javascript|1351859|或者stackoverflow风格：“你已经开始写或编辑一篇文章了。”|1351860|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

That suggested error message may duplicate the error message the browser already displays. In chrome, the 2 similar error messages are displayed one after another in the same window.

In chrome, the text displayed after the custom message is: "Are you sure you want to leave this page?". In firefox, it does not display our custom error message at all (but still displays the dialog).

A more appropriate error message might be:

<pre><code>window.onbeforeunload = function() {
 return "If you leave this page, you will lose any unsaved changes.";
}
</code></pre>

Or stackoverflow style: "You have started writing or editing a post."

blocks|key|1351970|text|我最终得到了这个略有不同的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1351971|var+dirty+=+false;
window.onbeforeunload+=+function()+{
++++return+dirty+?+"If+you+leave+this+page+you+will+lose+your+unsaved+changes."+:+null;
}|code-block|syntax|javascript|1351972|在其他地方，当表单被弄脏(或者我想要阻止导航离开)时，我将脏标志设置为true。这使我可以轻松地控制用户是否得到确认导航提示。|1351973|使用所选答案中的文本，您会看到多余的提示：|1351974|​|1351975|📷|atomic|offset|length|1351976|1351977|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e0cef1eb119a3d080d17c25d29402e7d.png|imageAlt^0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|15|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|16|8|@]|9|@$P|17|Q|18|1|19]]|A|$]]|$1|R|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]]]

I ended up with this slightly different version:

<pre><code>var dirty = false;
window.onbeforeunload = function() {
 return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}
</code></pre>

Elsewhere I set the dirty flag to true when the form gets dirtied (or I otherwise want to prevent navigating away). This allows me to easily control whether or not the user gets the Confirm Navigation prompt.

With the text in the selected answer you see redundant prompts:

<img src="https://i.stack.imgur.com/vQRUN.png" alt="enter image description here">

blocks|key|1567481|text|相当于jQuery+1.11中接受的答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1567482|$(window).on("beforeunload",+function+()+{
++++return+"Please+don't+leave+me!";
});|code-block|syntax|javascript|1567483|JSFiddle+example|offset|length|1567484|altCognito的回答使用了unload事件，对于JavaScript来说，这个事件发生得太晚了，无法中止导航。|style|CODE|1567485|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/485xsaao/^0|0|0|0|G|0|0|G|6|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@$I|13|J|14|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

The equivalent to the accepted answer in jQuery 1.11:

<pre><code>$(window).on("beforeunload", function () {
 return "Please don't leave me!";
});
</code></pre>

<a href="http://jsfiddle.net/485xsaao/" rel="noreferrer">JSFiddle example</a>

altCognito's answer used the <code>unload</code> event, which happens too late for JavaScript to abort the navigation.

blocks|key|1352059|text|使用现代addEventListener+API，以一种更现代且与浏览器兼容的方式实现了等价物。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1352060|window.addEventListener('beforeunload',+(event)+=>+{
++//+Cancel+the+event+as+stated+by+the+standard.
++event.preventDefault();
++//+Chrome+requires+returnValue+to+be+set.
++event.returnValue+=+'';
});|code-block|syntax|javascript|1352061|来源：https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload|offset|length|1352062|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload^0|0|0|3|1S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

The equivalent in a more modern and browser compatible way, using modern addEventListener APIs.

<pre><code>window.addEventListener('beforeunload', (event) =&gt; {
 // Cancel the event as stated by the standard.
 event.preventDefault();
 // Chrome requires returnValue to be set.
 event.returnValue = '';
});
</code></pre>

Source: <a href="https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload</a>

问阻止网页使用JavaScript导航离开
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止网页使用JavaScript导航离开EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止网页使用JavaScript导航离开
EN