aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/api/windoweventhandlers
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/api/windoweventhandlers
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/api/windoweventhandlers')
-rw-r--r--files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html111
-rw-r--r--files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html124
-rw-r--r--files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html68
-rw-r--r--files/zh-cn/web/api/windoweventhandlers/onunload/index.html69
4 files changed, 372 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html b/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..78bed99eb9
--- /dev/null
+++ b/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,111 @@
+---
+title: window.onbeforeunload
+slug: Web/API/Window/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p>当窗口即将被{{domxref("window.onunload","卸载(关闭)")}}时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被{{domxref("event.preventDefault","取消")}}.</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">window.onbeforeunload = <var>funcRef</var></pre>
+
+<ul>
+ <li><code>funcRef</code> 是一个函数引用</li>
+ <li>该函数应当将一个说明字符串赋值给<code>Event</code>对象的<code>returnValue</code>属性(兼容旧版浏览器),并且返回该字符串</li>
+ <li>请注意,在Firefox4及其后续版本中,返回的说明字符串并不向用户显示,也就是无法自定义说明字符串.查看<a class="external link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=588292" title="https://bugzilla.mozilla.org/show_bug.cgi?id=588292">Bug 588292</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre class="brush:js">window.onbeforeunload = function (e) {
+ e = e || window.event;
+
+ // 兼容IE8和Firefox 4之前的版本
+ if (e) {
+ e.returnValue = '关闭提示';
+ }
+
+ // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
+ return '关闭提示';
+};
+</pre>
+
+<h2 id="附注">附注</h2>
+
+<p>当该事件返回的字符串(事前设置好的event.returnValue的值)不为null或者undefined时,弹出确认窗口让用户自行选择是否关闭当前页面。一些浏览器将该事件返回的字符串显示在弹出窗上。从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始,通用确认信息代替事件返回的字符串。比如,火狐上会显示“本页面要求您确认您要离开 - 您输入的数据可能不会被保存”,请查阅{{bug("588292")}}和<a href="https://www.chromestatus.com/feature/5349061406228480">Chrome Platform Status</a>。</p>
+
+<p>从2011年5月25日起,  <a class="external" href="http://www.w3.org/TR/html5-diff/#changes-2011-05-25" title="http://www.w3.org/TR/html5-diff/#changes-2011-05-25">HTML5 规范</a> 声明:在该事件的处理函数中调用下列弹窗相关的方法时,可以忽略不执行,<code><a class="new" href="https://developer.mozilla.org/zh-CN/docs/DOM/window.showModalDialog">window.showModalDialog()</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/window.alert">window.alert()</a></code>, <code><a class="new" href="https://developer.mozilla.org/zh-CN/docs/DOM/window.confirm">window.confirm()</a></code> <code><a href="https://developer.mozilla.org/zh-CN/docs/DOM/window.prompt">window.prompt()</a></code>.</p>
+
+<p>需要指出的是,许多浏览器会忽略该事件并自动关闭页面无需用户的确认。火狐浏览器在配置页面<a>about:config</a>设有一个dom.disable_beforeunload的开关变量用于开启这个功能。</p>
+
+<p>你可以通过{{domxref("EventTarget.addEventListener","window.addEventListener()")}} 或者 {{event("beforeunload")}} 创建该事件。更多信息请点击以上链接。</p>
+
+<p>创建这个事件能防止浏览器缓存部分由javascript产生的页面内容。在页面中含Javascript产生的内容情形下,再次导航返回到原页面javascript不在运行。如果事先有window.onbeforeunload事件,导航返回到先前的页面后javascript将被触发并更新页面内容。</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari (WebKit)</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>1</td>
+ <td>1</td>
+ <td>4</td>
+ <td>12</td>
+ <td>3</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Android</th>
+ <th>Firefox Mobile (Gecko)</th>
+ <th>IE Phone</th>
+ <th>Opera Mobile</th>
+ <th>Safari Mobile</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ <td>{{CompatUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<p><code>该事件最初是由微软公司的IE4引进,虽然没有公开的规范说明,但所有浏览器都支持该事件.</code>目前已被添加至HTML5规范草案中.</p>
+
+<ul>
+ <li>{{spec("http://dev.w3.org/html5/spec-LC/history.html#unloading-documents", "HTML5: Browsing the Web, Unloading documents", "LC")}}</li>
+</ul>
+
+<h2 id="See also" name="See also">相关链接</h2>
+
+<ul>
+ <li><a href="http://msdn.microsoft.com/zh-CN/library/ms536907(VS.85).aspx">MSDN: onbeforeunload event</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html b/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..0c7f3ebefa
--- /dev/null
+++ b/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,124 @@
+---
+title: window.onhashchange
+slug: Web/API/Window/onhashchange
+tags:
+ - HTML-DOM
+ - Property
+ - Reference
+ - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>当 一个窗口的 hash (URL 中 # 后面的部分)改变时就会触发 <strong>hashchange </strong>事件(参见 {{domxref("Window.location", "location.hash")}})。</p>
+
+<h2 class="editable" id="语法"><span>语法</span></h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p>或者</p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;</pre>
+
+<p>以上操作将覆盖现有的事件处理程序。</p>
+
+<p>为了添加一个新的事件处理程序,而不覆盖掉已有的其他事件处理程序,可以使用函数 <strong>"addEventListener"</strong>。</p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="参数"><span>参数</span></h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>对一个函数的引用。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">if ("onhashchange" in window) {
+ alert("该浏览器支持 hashchange 事件!");
+}
+
+function locationHashChanged() {
+ if (location.hash === "#somecoolfeature") {
+ somecoolfeature();
+ }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 class="editable" id="hashchange_事件">hashchange 事件</h2>
+
+<p><code>hashchange</code> 事件对象有下面两个属性:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <td class="header">属性</td>
+ <td class="header">类型</td>
+ <td class="header">描述</td>
+ </tr>
+ <tr>
+ <td><code>newURL</code> {{ gecko_minversion_inline("6.0") }}</td>
+ <td><code>DOMString</code></td>
+ <td>当前页面新的URL</td>
+ </tr>
+ <tr>
+ <td><code>oldURL</code> {{ gecko_minversion_inline("6.0") }}</td>
+ <td><code>DOMString</code></td>
+ <td>当前页面旧的URL</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Workaround_for_event.newURL_and_event.oldURL">Workaround for event.newURL and event.oldURL</h3>
+
+<pre class="brush: js">//let this snippet run before your hashchange event binding code
+if(!window.HashChangeEvent)(function(){
+ var lastURL=document.URL;
+ window.addEventListener("hashchange",function(event){
+ Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
+ Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
+ lastURL=document.URL;
+ });
+}());</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+ <td>{{Spec2('HTML5.1')}}</td>
+ <td> </td>
+ </tr>
+ <tr>
+ <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.WindowEventHandlers.onhashchange")}}</p>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating the browser history">Manipulating the browser history</a>, <a href="/en-US/docs/DOM/window.history" title="DOM/window.history">history.pushState() and history.replaceState()</a> methods, <a href="/en-US/docs/DOM/window.onpopstate" title="DOM/window.onpopstate">popstate</a> event.</li>
+</ul>
diff --git a/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html b/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..6efc1ec835
--- /dev/null
+++ b/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,68 @@
+---
+title: window.onpopstate
+slug: Web/API/Window/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<h3 id="Summary" name="Summary">概述</h3>
+
+<p><code>window.onpopstate</code>是<code>popstate</code>事件在window对象上的事件处理程序.</p>
+
+<p><code>每当处于激活状态的历史记录条目发生变化时,popstate</code>事件就会在<code>对应window</code>对象上触发. 如果当前<code>处于激活状态的历史记录条目是由</code><code>history.pushState()</code>方法创建,或者由<code>history.replaceState()方法修改过</code>的, 则<code>popstate事件对象的</code><code>state</code>属性包含了这个历史记录条目的state对象的一个拷贝.</p>
+
+<p><strong>注意:</strong>调用<code>history.pushState()</code>或者<code>history.replaceState()</code>不会触发popstate事件. <code>popstate</code>事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用<code>history.back()、history.forward()、history.go()</code>方法),此外,a 标签的锚点也会触发该事件.</p>
+
+<p>当网页加载时,各浏览器对<code>popstate</code>事件是否触发有不同的表现,Chrome 和 Safari会触发<code>popstate</code>事件, 而Firefox不会.</p>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="eval notranslate">window.onpopstate = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> 是个函数名.</li>
+</ul>
+
+<h3 id="popstate事件">popstate事件</h3>
+
+<p>假如当前网页地址为http://example.com/example.html,则运行下述代码后:</p>
+
+<pre class="brush: js notranslate">window.onpopstate = function(event) {
+ alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+//绑定事件处理函数.
+history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
+history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
+history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
+history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // 弹出 "location: http://example.com/example.html, state: null
+history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>即便进入了那些非pushState和replaceState方法作用过的(比如http://example.com/example.html)没有state对象关联的那些网页, <code>popstate</code>事件也仍然会被触发.</p>
+
+<h3 id="Specification" name="Specification">规范</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate" title="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h3 id="浏览器兼容性">浏览器兼容性</h3>
+
+<div class="hidden">
+<p>本页面的兼容性表格是由结构化数据生成的。如果你愿意为这些数据做点贡献,请在 github <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 检出代码,然后发送 pull request 给我们。</p>
+</div>
+
+<p>{{Compat("api.WindowEventHandlers.onpopstate")}}</p>
+
+<h3 id="相关链接">相关链接</h3>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li><a href="/zh-cn/DOM/Manipulating_the_browser_history" title="zh-cn/DOM/Manipulating the browser history">Manipulating the browser history</a></li>
+</ul>
+
+<p>{{ languages( {"en": "en/DOM/window.onpopstate" } ) }}</p>
diff --git a/files/zh-cn/web/api/windoweventhandlers/onunload/index.html b/files/zh-cn/web/api/windoweventhandlers/onunload/index.html
new file mode 100644
index 0000000000..5e766c1d67
--- /dev/null
+++ b/files/zh-cn/web/api/windoweventhandlers/onunload/index.html
@@ -0,0 +1,69 @@
+---
+title: window.onunload
+slug: Web/API/Window/onunload
+translation_of: Web/API/WindowEventHandlers/onunload
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<h3 id="Summary" name="Summary">概述</h3>
+
+<p>{{domxref("WindowEventHandlers")}} 的混入特性 <strong><code>onunload</code></strong> 是 {{domxref("EventHandler")}}  处理 {{Event("unload")}} 事件的方法。该事件在关闭窗口资源和内容的时候触发。页面资源的清除工作会在 <code>unload</code>  事件之后进行。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意事项:</strong> 具备弹窗阻止功能的浏览器会忽略 <code>onunload</code>  事件回调中调用的 {{domxref("Window.open()")}} 方法。</p>
+</div>
+
+<div class="blockIndicator warning">
+<p><code>onunload</code> 特性(乃至 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/unload_event">unload</a></code> 事件本身) 并非使用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon()</a></code>的正确途径,要调用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon()</a></code> 接口,应当使用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event">visibilitychange</a></code> 和 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event">pagehide</a></code> 事件。 参见 <a href="https://volument.com/blog/sendbeacon-is-broken#comments">Beacon API is broken</a>。</p>
+</div>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="notranslate">window.addEventListener("unload", function(event) { ... });
+window.onunload = function(event) { ... };</pre>
+
+<p>通常而言,我们推荐使用 {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} 来监听 {{event("unload")}} 事件,而不是直接给 <code>onunload</code> 赋值。</p>
+
+<h3 id="Example" name="Example">例子</h3>
+
+<pre class="notranslate">&lt;html&gt;
+&lt;head&gt;
+
+&lt;title&gt;onunload test&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+window.onunload = unloadPage;
+
+function unloadPage()
+{
+ alert("unload event detected!");
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p&gt;Reload a new page into the browser&lt;br /&gt;
+ to fire the unload event for this page.&lt;/p&gt;
+&lt;p&gt;You can also use the back or forward buttons&lt;br /&gt;
+ to load a new page and fire this event.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+
+</pre>
+
+<h3 id="Specification" name="Specification">规范</h3>
+
+<p>{{ DOM0() }}</p>
+
+<p>{{ languages( {"en": "en/DOM/window.onunload" } ) }}</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WindowEventHandlers.onunload")}}</p>
+
+<p>在 Firefox 1.5 中,页面使用此事件处理程序会阻止浏览器在 bfcache 内存中缓存页面(译者注:翻译可能没有达意,请对照英文原文)。详细信息<a href="https://developer.mozilla.org/en-US/Firefox/Releases/1.5/Using_Firefox_1.5_caching">请参阅使用 Firefox 1.5:缓存</a>。</p>