diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/window | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/window')
137 files changed, 12021 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/window/alert/index.html b/files/zh-cn/web/api/window/alert/index.html new file mode 100644 index 0000000000..6295c8e7cd --- /dev/null +++ b/files/zh-cn/web/api/window/alert/index.html @@ -0,0 +1,61 @@ +--- +title: window.alert +slug: Web/API/Window/alert +tags: + - alert + - 'alert(`uid = ${uid}`);// alert(`desc ${key}`) !== console.log(`desc `' + - console.log + - key); +translation_of: Web/API/Window/alert +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.alert(<em>message</em>); +</pre> + +<div class="note"> +<p> </p> + +<p>alert(`uid = ${uid}`);</p> + +<p>// alert(`desc ${key}`) !== console.log(`desc `, key);</p> +</div> + +<ul> + <li><code>message是要显示在对话框中的文本字符串</code>,如果传入其他类型的值,会转换成字符串.</li> +</ul> + +<h3 id="Example" name="Example">示例</h3> + +<pre class="eval">window.alert("Hello world!"); +</pre> + +<p>显示如下(不同的浏览器下显示不同):</p> + +<p><img alt="Image:AlertHelloWorld.png" class="internal" src="/@api/deki/files/30/=AlertHelloWorld.png"></p> + +<h3 id="Notes" name="Notes">附注</h3> + +<p>警告对话框使用在无需用户确认的情况下,否则应该使用其他类型的对话框,比如<a href="/zh-CN/DOM/window.confirm" title="zh-CN/DOM/window.confirm">confirm</a>, <a href="/zh-CN/DOM/window.prompt" title="zh-CN/DOM/window.prompt">prompt</a>.</p> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.confirm</span> 这里显示的对话框是一个模态窗口,它能阻止用户对浏览器窗口界面的其他部位进行操作,你不应该过多的使用这种模态窗口.</p> + +<p>扩展开发者有时候需要使用<a href="/zh-CN/nsIPromptService" title="zh-CN/nsIPromptService">nsIPromptService</a>接口来代替<code>该alert</code>方法.</p> + +<p>从Firefox 4开始,在网页中弹出的对话框都换成了标签页范围内的模态窗口,即不会影响其他的标签页,同时还能阻止过多次数的弹窗.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="See_also" name="See_also">相关链接</h3> + +<p><a href="/zh-CN/docs/Web/API/Window/confirm" title="zh-CN/DOM/window.confirm">confirm</a>, <a href="/zh-CN/docs/Web/API/Window/prompt" title="zh-CN/DOM/window.prompt">prompt</a></p> + +<p>扩展开发者应该查看<a href="/zh-CN/nsIPromptService#alert" title="zh-CN/nsIPromptService#alert">alert()</a>和<a href="/zh-CN/nsIPromptService#alert" title="zh-CN/nsIPromptService#alert">alertCheck()</a></p> diff --git a/files/zh-cn/web/api/window/applicationcache/index.html b/files/zh-cn/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..945ab7bd12 --- /dev/null +++ b/files/zh-cn/web/api/window/applicationcache/index.html @@ -0,0 +1,38 @@ +--- +title: window.applicationCache +slug: Web/API/Window/applicationCache +tags: + - HTML5 + - HTML5.1 + - HTML5.2 + - REC +translation_of: Web/API/Window/applicationCache +--- +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>返回该window 中的应用缓存对象的一个引用。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>cache</var> = window.applicationCache +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>cache</code> 对象是一个 {{domxref("OfflineResourceList")}} 的引用。</li> +</ul> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li>{{spec("https://www.w3.org/TR/html5/browsers.html#appcache","HTML 5","REC")}}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Using_the_application_cache">使用应用缓存</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/back/index.html b/files/zh-cn/web/api/window/back/index.html new file mode 100644 index 0000000000..ead8d52bb6 --- /dev/null +++ b/files/zh-cn/web/api/window/back/index.html @@ -0,0 +1,26 @@ +--- +title: Window.back() +slug: Web/API/Window/back +translation_of: Web/API/Window/back +--- +<div>{{APIRef}}</div> + +<div>{{ Non-standard_header() }}</div> + +<div>{{ obsolete_header(31) }}</div> + +<h2 id="Summary" name="Summary">总结</h2> + +<p>跳转窗口到history中的前一个地址， 这曾是 Gecko 的方法。请使用标准的history.back 替代它。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>window.back()</code></pre> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">function goBack() { + if ( canGoBack ) window.back(); +}</pre> + +<h2 id="Specification" name="Specification"> </h2> diff --git a/files/zh-cn/web/api/window/blur_event/index.html b/files/zh-cn/web/api/window/blur_event/index.html new file mode 100644 index 0000000000..44cc5ffd7f --- /dev/null +++ b/files/zh-cn/web/api/window/blur_event/index.html @@ -0,0 +1,116 @@ +--- +title: 'Window: blur event' +slug: Web/API/Window/blur_event +translation_of: Web/API/Window/blur_event +--- +<div>{{APIRef}}</div> + +<p>当元素失去焦点时，<strong><code>blur</code></strong>事件将触发。</p> + +<p>与 <code>blur</code> 相反的是{{domxref("Window/focus_event", "focus")}}。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles（是否支持冒泡）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable（可撤销）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface（接口）</th> + <td>{{DOMxRef("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property（事件处理程序属性）</th> + <td>{{domxref("GlobalEventHandlers/onblur", "onblur")}}</td> + </tr> + <tr> + <th scope="row">Sync / Async（同步/异步）</th> + <td>Sync</td> + </tr> + <tr> + <th scope="row">Composed</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="在线示例">在线示例</h3> + +<p>此示例当文档失去焦点时，更改其外观。它使用{{domxref("EventTarget.addEventListener()","addEventListener()")}} 去监听{{domxref("Window/focus_event", "focus")}}和 <code>blur</code> 事件。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p id="log">Click on this document to give it focus.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.paused { + background: #ddd; + color: #555; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function pause() { + document.body.classList.add('paused'); + log.textContent = 'FOCUS LOST!'; +} + +function play() { + document.body.classList.remove('paused'); + log.textContent = 'This document has focus. Click outside the document to lose focus.'; +} + +const log = document.getElementById('log'); + +window.addEventListener('blur', pause); +window.addEventListener('focus', play);</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("在线示例")}}</p> + +<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("UI Events", "#event-type-blur")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-blur")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.blur_event")}}</p> + +<p>{{DOMxRef(" document. activeelement ")}}的值在处理({{bug(452307)}})时因浏览器而异 ;({{bug(452307)}}):IE10将其设置为焦点将移动到的元素，而Firefox和Chrome通常将其设置为文档的 body。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关联事件: {{domxref("Window/focus_event", "focus")}}</li> + <li>Element 目标上的这个事件:{{domxref("Element/blur_event", "blur")}} 事件</li> +</ul> diff --git a/files/zh-cn/web/api/window/cancelanimationframe/index.html b/files/zh-cn/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..0d98e5db24 --- /dev/null +++ b/files/zh-cn/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,117 @@ +--- +title: window.cancelAnimationFrame +slug: Web/API/Window/cancelAnimationFrame +translation_of: Web/API/Window/cancelAnimationFrame +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<h2 id="概述">概述</h2> + +<p>取消一个先前通过调用{{ domxref("window.requestAnimationFrame()") }}方法添加到计划中的动画帧请求.</p> + +<h2 id="语法">语法</h2> + +<pre class="eval">window.mozCancelAnimationFrame(<em>requestID</em>); // Firefox +</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt><code>requestID</code></dt> + <dd>先前调用{{ domxref("window.requestAnimationFrame()") }}方法时返回的ID.</dd> +</dl> + +<h2 id="Notes" name="Notes">示例</h2> + +<pre class="deki-transform">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; + +var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; + +var start = window.mozAnimationStartTime; // 只有Firefox支持mozAnimationStartTime属性,其他浏览器可以使用Date.now()来替代. + +var myReq; +function step(timestamp) { + var progress = timestamp - start; + d.style.left = Math.min(progress/10, 200) + "px"; + if (progress < 2000) { + myReq = requestAnimationFrame(step); + } +} +myReq = requestAnimationFrame(step); + +window.cancelAnimationFrame(myReq); +</pre> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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> + <p>21.0 {{ property_prefix("webkit") }}</p> + + <p>24.0 脱前缀</p> + </td> + <td> + <p>{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }} </p> + </td> + <td>10</td> + <td>{{ CompatUnknown() }}</td> + <td> + <p>6.0 {{ property_prefix("webkit") }}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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> + <p>{{ CompatUnknown() }}</p> + </td> + <td>{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>{{ spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD") }}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{ domxref("window.mozAnimationStartTime") }}</li> + <li>{{ domxref("window.requestAnimationFrame()") }}</li> +</ul> diff --git a/files/zh-cn/web/api/window/cancelidlecallback/index.html b/files/zh-cn/web/api/window/cancelidlecallback/index.html new file mode 100644 index 0000000000..79abf32d93 --- /dev/null +++ b/files/zh-cn/web/api/window/cancelidlecallback/index.html @@ -0,0 +1,107 @@ +--- +title: window.cancelIdleCallback() +slug: Web/API/Window/cancelIdleCallback +tags: + - API + - JavaScript timers + - Window + - cancelIdleCallback +translation_of: Web/API/Window/cancelIdleCallback +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p> <strong><code>window.cancelIdleCallback()</code></strong> 方法用于取消之前调用{{domxref("window.requestIdleCallback()")}} 的回调。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.cancelIdleCallback(<em>handle</em>);</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><code>handle</code></dt> + <dd>调用 {{domxref("window.requestIdleCallback()")}} 时返回的 ID.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code>.</p> + +<h2 id="示例">示例</h2> + +<p>在文章 <a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a> 中可以查看<a href="/en-US/docs/Web/API/Background_Tasks_API#Example"> 完整示例</a> 。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Background Tasks')}}</td> + <td>{{Spec2('Background Tasks')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatChrome(47)}}</td> + <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatGeckoMobile(53)}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Idle callback 在 Firefox 53 中增加, 默认是禁用状态，设置 <code>dom.requestIdleCallback.enabled</code> 为 <code>true</code>启用。 Idle callbacks 再 Firefox 55及之后版本中默认启用。</p> diff --git a/files/zh-cn/web/api/window/clearimmediate/index.html b/files/zh-cn/web/api/window/clearimmediate/index.html new file mode 100644 index 0000000000..84d84226e6 --- /dev/null +++ b/files/zh-cn/web/api/window/clearimmediate/index.html @@ -0,0 +1,72 @@ +--- +title: window.clearImmediate +slug: Web/API/Window/clearImmediate +translation_of: Web/API/Window/clearImmediate +--- +<p>{{ ApiRef() }}</p> +<h2 id="概述">概述</h2> +<p>此方法用来清除 {{ domxref("window.setImmediate") }}.</p> +<div class="note"> + <strong>注意:</strong> 注意: 该方法最近刚刚被微软提出, 可能不会被w3c批准成为标准, 目前只有最新版Internet Explorer实现了该方法.</div> +<h2 id="语法">语法</h2> +<pre>window.clearImmediate(immediateID) +</pre> +<p>这里的immediateID是由{{ domxref("window.setImmediate") }}返回的.</p> +<h2 id="例子">例子</h2> +<pre>var immediateID = setImmediate(function () { + // Run some code +} + +document.getElementById("button").addEventListener(function () { + clearImmediate(immediateID); +}, false); +</pre> +<h2 id="浏览器兼容性">浏览器兼容性</h2> +<p>{{ CompatibilityTable() }}</p> +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="相关链接">相关链接</h2> +<p>{{ domxref("window.setImmediate") }}</p> +<p>{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}</p> diff --git a/files/zh-cn/web/api/window/clearinterval/index.html b/files/zh-cn/web/api/window/clearinterval/index.html new file mode 100644 index 0000000000..9a2d6e1790 --- /dev/null +++ b/files/zh-cn/web/api/window/clearinterval/index.html @@ -0,0 +1,74 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/Window/clearInterval +tags: + - API + - WindowOrWorkerGlobalScope + - 参考 + - 方法 +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("WindowOrWorkerGlobalScope")}} mixin 的 <strong><code>clearInterval()</code></strong> 方法可取消先前通过 {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} 设置的重复定时任务。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>intervalID</code></dt> + <dd>要取消的定时器的 ID。是由 <code>setInterval()</code> 返回的。</dd> +</dl> + +<p>值得一提的是，{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} 共用其定义的 IDs，即可以使用 <code>clearInterval()</code> 和 {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} 中的任意一个。然而，为了使代码可读性更强，你应该尽量避免这种用法。</p> + +<h3 id="返回值">返回值</h3> + +<p>{{jsxref("undefined")}}</p> + +<h2 id="示例">示例</h2> + +<p>查看 <a href="/en-US/docs/DOM/window.setInterval#Example"><code>setInterval()</code> 的示例</a>。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/JavaScript/Timers" title="JavaScript/Timers">JavaScript 定时器</a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li> + <li>{{domxref("Window.requestAnimationFrame")}}</li> + <li><a href="/en-US/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/close/index.html b/files/zh-cn/web/api/window/close/index.html new file mode 100644 index 0000000000..d9904dd794 --- /dev/null +++ b/files/zh-cn/web/api/window/close/index.html @@ -0,0 +1,77 @@ +--- +title: Window.close() +slug: Web/API/Window/close +tags: + - API + - DOM + - Window + - 参考 + - 方法 +translation_of: Web/API/Window/close +--- +<div>{{APIRef}}</div> + +<p><code><strong>Window.close()</strong></code> 方法关闭当前窗口或某个指定的窗口。</p> + +<p>该方法只能由 {{domxref("Window.open()")}} 方法打开的窗口的 <code>window</code> 对象来调用。如果一个窗口不是由脚本打开的，那么，在调用该方法时，JavaScript 控制台会出现类似下面的错误：<code>不能使用脚本关闭一个不是由脚本打开的窗口。</code> 或 <code>Scripts may not close windows that were not opened by script.</code> 。</p> + +<p>同时也要注意，对于由 <code><a href="/zh-CN/docs/Web/API/HTMLIFrameElement/contentWindow">HTMLIFrameElement.contentWindow</a></code> 返回的 {{domxref("Window")}} 对象，<code>close()</code> 也没有效果。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.close();</pre> + +<h2 id="例子">例子</h2> + +<h3 id="关闭一个由_window.open方法打开的窗口">关闭一个由 <code>window.open()</code>方法打开的窗口</h3> + +<p>这个例子展示了如何使用这个方法关闭使用 {{domxref("window.open()")}} 打开的窗口</p> + +<pre class="brush: js">// 用于存储将要打开的窗口（的引用）的全局变量 +var openedWindow; + +function openWindow() { + openedWindow = window.open('moreinfo.htm'); +} + +function closeOpenedWindow() { + openedWindow.close(); +} +</pre> + +<h3 id="关闭当前窗口">关闭当前窗口</h3> + +<p>当直接调用 window 对象的 <code>close()</code> 方法而非在一个 window 实例上调用 <code>close()</code> 时，浏览器会关闭最前面的窗口，无论是不是你的脚本创建的这个窗口。（Firefox 35.0.1：脚本不能关闭不是他打开的窗口）</p> + +<pre class="brush: js">function closeCurrentWindow() { + window.close(); +} +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.close")}}</p> diff --git a/files/zh-cn/web/api/window/closed/index.html b/files/zh-cn/web/api/window/closed/index.html new file mode 100644 index 0000000000..084eeaa92e --- /dev/null +++ b/files/zh-cn/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +<div>{{APIRef}}</div> + +<h2 id="概述">概述</h2> + +<p>此只读属性表示所引用的窗口是否关闭。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>isClosed</var> = <var>windowRef</var>.closed; +</pre> + +<dl> + <dt><code>isClosed</code></dt> + <dd>一个布尔值。 可能的值： + <ul> + <li><code>true</code>: 窗口已被关闭。</li> + <li><code>false</code>: 窗口是打开的。</li> + </ul> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<h3 id="更改一个弹出窗口的URL">更改一个弹出窗口的URL</h3> + +<p>下面的示例演示怎样更改一个已打开的弹出窗口的URL。尝试更改URL之前，它使用window.opener属性来检查有窗口被打开，并且该窗口没有关闭：</p> + +<pre class="brush:js">// Check that an opener exists and is not closed +if (window.opener && !window.opener.closed) { + window.opener.location.href = "http://www.mozilla.org"; +}</pre> + +<p>请注意，弹出窗口只能访问打开他们的窗口。</p> + +<h3 id="刷新先前打开的弹出窗口">刷新先前打开的弹出窗口</h3> + +<p>在这个例子中，函数refreshPopupWindow()调用重载方法的弹出的位置要刷新其数据的对象。如果弹出窗口尚未打开，或者用户已关闭它打开一个新窗口。</p> + +<pre class="brush:js">var popupWindow = null; + +function refreshPopupWindow() { + if (popupWindow && !popupWindow.closed) { + // popupWindow is open, refresh it + popupWindow.location.reload(true); + } else { + // Open a new popup window + popupWindow = window.open("popup.html","dataWindow"); + } +} +</pre> + +<h2 id="技术说明">技术说明</h2> + +<p>HTML5</p> diff --git a/files/zh-cn/web/api/window/confirm/index.html b/files/zh-cn/web/api/window/confirm/index.html new file mode 100644 index 0000000000..5f021b77e9 --- /dev/null +++ b/files/zh-cn/web/api/window/confirm/index.html @@ -0,0 +1,70 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - API + - DOM + - React-Router + - Window + - Window.confirm() +translation_of: Web/API/Window/confirm +--- +<div>{{ApiRef("Window")}}</div> + +<p><code><strong>Window.confirm()</strong></code> 方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre><em>result</em> = window.confirm(<em>message</em>); +</pre> + +<ul> + <li>message 是要在对话框中显示的可选字符串。</li> + <li>result 是一个布尔值，表示是选择确定还是取消 (true表示OK)。</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre>if (window.confirm("Do you really want to leave?")) { + window.open("exit.html", "Thanks for Visiting!"); +} +</pre> + +<p>运行结果: </p> + +<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br> + </p> + +<h2 id="Notes" name="Notes">注意事项:</h2> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span>对话框是弹出式(modal)的(也即alert样式, 译者注). 直到这个对话框被点击后, 后面的脚本才会运行. 请勿滥用此功能, 这里列出了很多个理由: <a href="http://alistapart.com/article/neveruseawarning">请放弃使用对话框来确认信息</a>.</p> + +<p><a href="/en-US/Chrome" title="Chrome">Mozilla Chrome</a> 的用户(比如Firefox插件开发者)应该使用{{interface("nsIPromptService")}}这个方法.</p> + +<p>Chrome浏览器版本 {{CompatChrome(46.0)}} 开始屏蔽内部{{htmlelement("iframe")}}元素, 除非用户在沙箱内开启了<code>allow-modal选项.</code></p> + +<p>在{{gecko_minversion_inline("23.0")}}内核中, 参数是可选的.</p> + +<h2 id="Specification" name="Specification">兼容性</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML5 Web application', '#dom-confirm', 'confirm()')}}</td> + <td>{{Spec2('HTML5 Web application')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">更多</h2> + +<ul> + <li>{{domxref("window.alert","alert")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/console/index.html b/files/zh-cn/web/api/window/console/index.html new file mode 100644 index 0000000000..3e00d38643 --- /dev/null +++ b/files/zh-cn/web/api/window/console/index.html @@ -0,0 +1,49 @@ +--- +title: Window.console +slug: Web/API/Window/console +translation_of: Web/API/Window/console +--- +<p>{{ APIRef }}</p> + +<p>只读属性Window.console返回一个对{{domxref("Console")}}对象的引用，Window.console提供了向浏览器控制台输出日志信息的方法。这些方法仅应该用于调试，并不应该用来给最终用户呈现信息。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; +</pre> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="输出信息">输出信息</h3> + +<p>第一个例子向控制台输出文字。</p> + +<pre class="brush: js">console.log("An error occurred while loading the content"); +</pre> + +<p>下边这个例子向控制台打印一个对象，可以通过点击展开组件查看对象的各项属性。</p> + +<pre class="brush: js">console.dir(someObject);</pre> + +<p>更多示例参考 {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>当前各种浏览器之间的实现还有很多差异，推动一致的工作也在进行当中。</p> +</div> diff --git a/files/zh-cn/web/api/window/content/index.html b/files/zh-cn/web/api/window/content/index.html new file mode 100644 index 0000000000..d3d3f4be3d --- /dev/null +++ b/files/zh-cn/web/api/window/content/index.html @@ -0,0 +1,27 @@ +--- +title: window.content +slug: Web/API/Window/content +translation_of: Web/API/Window/content +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回主内容窗口的<a href="zh-CN/DOM/window">Window对象</a>.该属性只在包含有属性<code>type="content-primary"</code>的<code><browser></code> (或者 <code>tabbrowser</code> 或者 <code><iframe></code>)标签的XUL窗口下才会用到.最常用到的地方就是Firefox的主窗口, <code>browser.xul</code>. 在这种情况下, <code>content</code> 返回一个浏览器中的当前页面的<code>Window对象的引用</code>.相当于<code><var>browserRef</var>.contentWindow的快捷方式</code>.</p> +<p>在一个非特权的内容窗口中 (网页), <code>content</code> 等同于普通的 <a href="zh-CN/DOM/window.top">top</a> (除非网页是在侧边栏中加载的, <code>content</code>仍然会指向当前标签页中的<code>Window对象</code>).</p> +<p>一些旧的代码示例中使用了 <code>_content</code> 而不是 <code>content</code>.该形式的属性名已经被废弃很久了,你应该在新的代码中使用<code>content</code>.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">var <var>windowObject</var> = window.content; +</pre> +<h3 id="Example" name="Example">例子</h3> +<p>在一个拥有<code><browser type="content-primary"/>标签的</code>chrome XUL 窗口下运行下面的代码.会在浏览器当前显示的页面上的第一个div标签上添加一个红色的边框:</p> +<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p>不属于W3C规范.</p> +<h3 id="See_also" name="See_also">相关链接</h3> +<ul> + <li><a href="zh-CN/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> + <li>When accessing content documents from privileged code, be aware of <a href="zh-CN/XPCNativeWrapper">XPCNativeWrappers</a>.</li> +</ul> +<div class="noinclude"> + </div> +<p>{{ languages( { "fr": "fr/DOM/window.content", "ja": "ja/DOM/window.content", "pl": "pl/DOM/window.content" } ) }}</p> diff --git a/files/zh-cn/web/api/window/controllers/index.html b/files/zh-cn/web/api/window/controllers/index.html new file mode 100644 index 0000000000..972c1fd452 --- /dev/null +++ b/files/zh-cn/web/api/window/controllers/index.html @@ -0,0 +1,45 @@ +--- +title: Window.controllers +slug: Web/API/Window/controllers +tags: + - API + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - XUL + - 参考 + - 属性 + - 窗口 + - 非标准 +translation_of: Web/API/Window/controllers +--- +<div>{{APIRef}}{{non-standard_header}}</div> + +<p>{{domxref("Window")}} 接口的 <code><strong>controllers</strong></code> 属性返回 chorme 窗口的 XUL 控制器。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>controllers</var> = <em>window</em>.controllers +</pre> + +<ul> + <li><code>controllers</code> 是一个类型为 <a href="/en-US/docs/XULControllers"><code>XULControllers</code></a>（<a href="/en-US/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>）的对象。</li> +</ul> + +<h2 id="规范">规范</h2> + +<p>XUL-专有属性，不属于任何规范。</p> + +<div class="note"> +<p>默认情况下，窗口的控制器包含支持全局窗口命令的代码。</p> + +<p>chrome 代码可以添加控制器（与 globalOverlay.js 中的 <code>goDoCommand</code> 和 <code>goUpdateCommand</code> 函数配合使用）。</p> + +<p>然而，浏览器窗口被关闭时，我们必须手动删除这些添加的控制器，因为浏览器并不会自动完成这些操作。</p> + +<p>如果有忘记删除的控制器，则会导致错误：</p> +<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>: + +<pre class="bz_comment_text notranslate" id="comment_text_0">ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre> +</div> diff --git a/files/zh-cn/web/api/window/copy_event/index.html b/files/zh-cn/web/api/window/copy_event/index.html new file mode 100644 index 0000000000..b2797de03e --- /dev/null +++ b/files/zh-cn/web/api/window/copy_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Window: copy event' +slug: Web/API/Window/copy_event +tags: + - API + - Clippboard API + - copy +translation_of: Web/API/Window/copy_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">当用户通过浏览器的用户界面启动复制操作时，将触发 <strong><code>copy</code></strong> 事件。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles（支持冒泡）</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable（可撤销）</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Interface（接口）</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property（事件处理程序属性）</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> +</table> + +<p>此事件的原始目标是 {{domxref("Element")}} 它是复制操作的预期目标。您可以在 {{domxref("Window")}} 界面上监听此事件，以在捕获或冒泡阶段对其进行处理。 有关此事件的完整详细信息，请参见 <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy event</a>.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">window.addEventListener('copy', (event) => { + console.log('copy action initiated') +});</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td> + <td>{{Spec2('Clipboard API')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.copy_event")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>相关联事件：{{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li> + <li>{{domxref("Element")}} 目标上的这个事件： {{domxref("Element/copy_event", "copy")}}</li> + <li>{{domxref("Document")}} 目标上的这个事件： {{domxref("Document/copy_event", "copy")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/crypto/index.html b/files/zh-cn/web/api/window/crypto/index.html new file mode 100644 index 0000000000..d8a732b86e --- /dev/null +++ b/files/zh-cn/web/api/window/crypto/index.html @@ -0,0 +1,117 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +<div>{{APIRef}}</div> + +<p>Window.crypto只读属性返回与全局对象关联的 {{domxref("Crypto")}}对象。 此对象允许网页访问某些加密相关服务。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // for IE 11 +</pre> + +<h2 id="Example" name="Example">范例</h2> + +<h4 id="使用_domxref(Window.crypto)_来访问getRandomValues()_方法.">使用 {{domxref("Window.crypto")}} 来访问<a href="/en-US/docs/Web/API/RandomSource/getRandomValues">getRandomValues()</a> 方法.</h4> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">genRandomNumbers = function getRandomNumbers() { + var array = new Uint32Array(10); + window.crypto.getRandomValues(array); + + var randText = document.getElementById("myRandText"); + randText.innerHTML = "The random numbers are: " + for (var i = 0; i < array.length; i++) { + randText.innerHTML += array[i] + " "; + } +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p id="myRandText">随机数字: </p> +<button type="button" onClick='genRandomNumbers()'>生成10个随机数字</button></pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">批注</th> + </tr> + <tr> + <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>44 {{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11 {{property_prefix("ms")}}</td> + <td>20</td> + <td>19</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Firefox Mobile</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="另见">另见</h2> + +<ul> + <li>The {{domxref("Window")}} global object</li> +</ul> diff --git a/files/zh-cn/web/api/window/customelements/index.html b/files/zh-cn/web/api/window/customelements/index.html new file mode 100644 index 0000000000..c53e5f8b48 --- /dev/null +++ b/files/zh-cn/web/api/window/customelements/index.html @@ -0,0 +1,61 @@ +--- +title: Window.customElements +slug: Web/API/Window/customElements +tags: + - API + - CustomElementRegistry + - Property + - Reference + - Web Components + - Window + - custom elements + - customElements +translation_of: Web/API/Window/customElements +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>customElements</code></strong> 是{{domxref("Window")}}对象上的一个只读属性，接口返回一个{{domxref("CustomElementRegistry")}} 对象的引用，可用于注册新的 <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a>，或者获取之前定义过的自定义元素的信息。</span></p> + +<h2 id="例子">例子</h2> + +<p>这个属性最常用的例子是用来获取使用{{domxref("CustomElementRegistry.define()")}}方法定义和注册的自定义元素，例如：</p> + +<pre class="brush: js">let customElementRegistry = window.customElements; +customElementRegistry.define('my-custom-element', MyCustomElement);</pre> + +<p>However, it is usually shortened to something like the following:</p> + +<pre class="brush: js">customElements.define('element-details', + class extends HTMLElement { + constructor() { + super(); + const template = document + .getElementById('element-details-template') + .content; + const shadowRoot = this.attachShadow({mode: 'open'}) + .appendChild(template.cloneNode(true)); + } +});</pre> + +<p>参阅我们的 <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> 获取更多有用的例子。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Window.customElements")}}</p> diff --git a/files/zh-cn/web/api/window/defaultstatus/index.html b/files/zh-cn/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..97e48af30e --- /dev/null +++ b/files/zh-cn/web/api/window/defaultstatus/index.html @@ -0,0 +1,44 @@ +--- +title: Window.defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - HTML DOM对象 + - 接口 +translation_of: Web/API/Window/defaultStatus +--- +<p>{{ obsolete_header(23) }}</p> + +<p>{{ APIRef() }}</p> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>获取或设置给定窗口的状态栏文本。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>var sMsg</em> = window.defaultStatus; +window.defaultStatus = <em>sMsg;</em> +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>sMsg</code> 是一个保存了状态栏默认显示文本的字符串.</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre><html> + <body onload="window.defaultStatus='hello!';"/> + <button onclick="window.confirm('你确定要退出?');">confirm</button> + </body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>页面HTML加载完成后要设置状态栏内容可以使用 <a href="/en/Gecko_DOM_Reference/window/status" title="en/Gecko_DOM_Reference/window/status">window.status</a>.</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>HTML5</p> diff --git a/files/zh-cn/web/api/window/deviceorientation_event/index.html b/files/zh-cn/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..4b36867f04 --- /dev/null +++ b/files/zh-cn/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,165 @@ +--- +title: deviceorientation +slug: Web/API/Window/deviceorientation_event +translation_of: Web/API/Window/deviceorientation_event +--- +<p><code>deviceorientation</code> 事件在方向传感器输出新数据的时候触发。其数据系传感器与地球坐标系相比较所得，也就是说在设备上可能会采用设备地磁计的数据。详情参考<a href="/en-US/docs/DOM/Orientation_and_motion_data_explained">有关方向与运动信息的说明（Orientation and motion data explained）</a>。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">标准</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/orientation-event/#deviceorientation">Orientation</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">DeviceOrientationEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">默认操作</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>alpha</code> {{readonlyInline}}</td> + <td>double (float)</td> + <td>The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.</td> + </tr> + <tr> + <td><code>beta</code> {{readonlyInline}}</td> + <td>double (float)</td> + <td>The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.</td> + </tr> + <tr> + <td><code>gamma</code> {{readonlyInline}}</td> + <td>double (float)</td> + <td>The current orientation of the device around the Y axis; that is, how far the device is turned left or right.</td> + </tr> + <tr> + <td><code>absolute</code> {{readonlyInline}}</td> + <td>{{jsxref("boolean")}}</td> + <td>This value is <code>true</code> if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is <code>false</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<pre class="pass: js">if (window.DeviceOrientationEvent) { + window.addEventListener("deviceorientation", function(event) { + // alpha: 在Z轴上的角度 + var rotateDegrees = event.alpha; + // gamma: 从左到右 + var leftToRight = event.gamma; + // beta: 从前到后的运动 + var frontToBack = event.beta; + + handleOrientationEvent(frontToBack, leftToRight, rotateDegrees); + }, true); +} + +var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) { + // 弹奏一曲夏威夷吉他 +}; +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本功能支持</td> + <td>7.0</td> + <td>3.6<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本功能支持</td> + <td>3.0</td> + <td>3.6<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>4.2</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox 3.6, 4, 和 5 支持 <a href="/en-US/docs/Web/Events/MozOrientation">mozOrientation</a> 这一类似 <code>DeviceOrientation</code> 的事件。</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="/en-US/docs/Web/Events/devicemotion"><code>devicemotion</code></a></li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("window.ondeviceorientation")}}</li> + <li><a href="/en-US/docs/Web/API/Detecting_device_orientation">检测设备朝向</a></li> + <li><a href="/en-US/docs/DOM/Orientation_and_motion_data_explained">有关方向与运动信息的说明</a></li> + <li>在桌面浏览器中模拟 orientation 事件，基于 <a href="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/devicepixelratio/index.html b/files/zh-cn/web/api/window/devicepixelratio/index.html new file mode 100644 index 0000000000..a5976667d9 --- /dev/null +++ b/files/zh-cn/web/api/window/devicepixelratio/index.html @@ -0,0 +1,179 @@ +--- +title: Window.devicePixelRatio +slug: Web/API/Window/devicePixelRatio +translation_of: Web/API/Window/devicePixelRatio +--- +<p>{{APIRef}}</p> + +<p>{{domxref("Window")}} 接口的<code><strong>devicePixelRatio</strong></code>返回当前显示设备的<em>物理像素</em>分辨率与<em>CSS像素</em>分辨率之比。 此值也可以解释为像素大小的比率：一个CSS像素的大小与一个物理像素的大小。 简单来说，它告诉浏览器应使用多少屏幕实际像素来绘制单个CSS像素。</p> + +<p>当处理标准显示器与HiDPI或Retina显示器之间的差异时，这很有用，后者使用更多的屏幕像素绘制相同的对象，从而获得更清晰的图像。</p> + +<p>您可以使用{{domxref("Window.matchMedia", "window.matchMedia()")}} 检查<code>devicePixelRatio</code>的值是否发生更改（例如，如果用户将窗口拖动到带有 不同的像素密度）。 请参阅{{anch("Monitoring screen resolution or zoom level changes", "下面的例子")}}.。</p> + +<h2 id="Summary" name="Summary">语法</h2> + +<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio; +</pre> + +<h3 id="值Value">值Value</h3> + +<p>一个双精度浮点值，指示显示器的物理像素分辨率与CSS像素分辨率之比。 值1表示经典96 DPI（在某些平台上为76 DPI）显示，而对于HiDPI / Retina显示屏则期望值为2。 在异常低分辨率的显示器中，或更常见的是，当屏幕的像素深度比简单地将96或76 DPI的标准分辨率提高一倍时，可能还会返回其他值。</p> + +<h2 id="例子">例子</h2> + +<h3 id="在_<canvas>_中更正分辨率">在 <code><canvas></code> 中更正分辨率</h3> + +<p>{{htmlelement("canvas")}}可能在视网膜屏幕上显得太模糊。 使用<code>window.devicePixelRatio</code>确定应添加多少额外的像素密度以使图像更清晰。</p> + +<h4 id="HTML">HTML</h4> + +<pre><canvas id="canvas"></canvas></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre>var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +// Set display size (css pixels). +var size = 200; +canvas.style.width = size + "px"; +canvas.style.height = size + "px"; + +// Set actual size in memory (scaled to account for extra pixel density). +var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas. +canvas.width = Math.floor(size * scale); +canvas.height = Math.floor(size * scale); + +// Normalize coordinate system to use css pixels. +ctx.scale(scale, scale); + +ctx.fillStyle = "#bada55"; +ctx.fillRect(10, 10, 300, 300); +ctx.fillStyle = "#ffffff"; +ctx.font = '18px Arial'; +ctx.textAlign = 'center'; +ctx.textBaseline = 'middle'; + +var x = size / 2; +var y = size / 2; + +var textString = "I love MDN"; +ctx.fillText(textString, x, y);</pre> + +<h2 id="sect1"><img alt="This image describe the impact of different value on retina display. " src="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png"></h2> + +<h3 id="监视屏幕分辨率或缩放级别的更改">监视屏幕分辨率或缩放级别的更改</h3> + +<p>在此示例中，我们将设置一个媒体查询并观看它以查看设备分辨率何时更改，以便我们可以检查<code>devicePixelRatio</code>的值来处理所需的任何更新。</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>JavaScript代码创建媒体查询，以监控设备分辨率并在每次更改时检查<code>devicePixelRatio</code>的值。</p> + +<pre>let pixelRatioBox = document.querySelector(".pixel-ratio"); +let mqString = `(resolution: ${window.devicePixelRatio}dppx)`; + +const updatePixelRatio = () => { + let pr = window.devicePixelRatio; + let prString = (pr * 100).toFixed(0); + pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`; +} + +updatePixelRatio(); + +matchMedia(mqString).addListener(updatePixelRatio); +</pre> + +<p>字符串<code>mqString</code>设置为媒体查询本身。 媒体查询以<code>(resolution: 1dppx)</code>（对于标准显示）或<code>(resolution: 2dppx)</code>（对于Retina / HiDPI显示）开始，检查当前显示分辨率是否与每个像素<code>px</code>的实际设备像素点匹配。</p> + +<p><code>updatePixelRatio()</code>函数获取<code>devicePixelRatio</code>的当前值，然后将<code>pixelRatioBox</code>的 {{domxref("HTMLElement.innerText", "innerText")}}设置为一个字符串，该字符串同时显示百分比和原始十进制值比率，最多两位小数。</p> + +<p>然后，调用<code>updatePixelRatio()</code>函数一次以显示起始值，然后使用{{domxref("Window.matchMedia", "matchMedia()")}} 和 {{domxref("EventTarget.addEventListener", "addEventListener()")}}来将<code>updatePixelRatio()</code>设置为<code>change</code>事件的处理程序。</p> + +<h4 id="HTML_2">HTML</h4> + +<p>HTML将创建包含说明的框和将显示当前像素比率信息的<code>pixel-ratio</code> 框。</p> + +<pre><div class="container"> + <div class="inner-container"> + <p>This example demonstrates the effect of zooming the page in + and out (or moving it to a screen with a different scaling + factor) on the value of the property <code>Window.devicePixelRatio</code>. + Try it and watch what happens!</p> + </div> + <div class="pixel-ratio"></div> +</div></pre> + +<details><summary> +<h4 id="CSS">CSS</h4> +</summary> + +<pre>body { + font: 22px arial, sans-serif; +} + +.container { + top: 2em; + width: 22em; + height: 14em; + border: 2px solid #22d; + margin: 0 auto; + padding: 0; + background-color: #a9f; +} + +.inner-container { + padding: 1em 2em; + text-align: justify; + text-justify: auto; +} + +.pixel-ratio { + position: relative; + margin: auto; + height: 1.2em; + text-align: right; + bottom: 0; + right: 1em; + font-weight: bold; +}</pre> +</details> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<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> + +<p>{{Compat("api.Window.devicePixelRatio")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">Media queries</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li> + <li></li> +</ul> diff --git a/files/zh-cn/web/api/window/dialogarguments/index.html b/files/zh-cn/web/api/window/dialogarguments/index.html new file mode 100644 index 0000000000..d26d56a819 --- /dev/null +++ b/files/zh-cn/web/api/window/dialogarguments/index.html @@ -0,0 +1,25 @@ +--- +title: Window.dialogArguments +slug: Web/API/Window/dialogArguments +tags: + - API + - Deprecated + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Property + - Reference + - Window +translation_of: Web/API/Window/dialogArguments +--- +<p>{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}</p> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p><span class="seoSummary"><code>dialogArguments</code> 属性返回{{domxref("window.showModalDialog()")}} 方法传递的参数。</span> 这可以让你确定在创建模态对话框时指定了哪些参数。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>value</var> = window.dialogArguments;</pre> diff --git a/files/zh-cn/web/api/window/directories/index.html b/files/zh-cn/web/api/window/directories/index.html new file mode 100644 index 0000000000..ea480aa14d --- /dev/null +++ b/files/zh-cn/web/api/window/directories/index.html @@ -0,0 +1,34 @@ +--- +title: Window.directories +slug: Web/API/Window/directories +translation_of: Web/API/Window/directories +--- +<p>{{ obsolete_header("2.0") }}</p> + +<p>{{ APIRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>用于返回 window 下的 personalbar toolbar 对象， 已经过时，请使用 {{ domxref("window.personalbar") }} 来代替该属性。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="javascript">var <var>dirBar</var> = window.directories; +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<p><var>dirBar</var> 是 <code>BarProp</code> 类型的对象。</p> + +<h3 id="Example" name="Example">例子</h3> + +<pre><script> + function dirs() { + alert(window.directories); + } +</script> +</pre> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>不属于任何规范。</p> diff --git a/files/zh-cn/web/api/window/document/index.html b/files/zh-cn/web/api/window/document/index.html new file mode 100644 index 0000000000..04258782b7 --- /dev/null +++ b/files/zh-cn/web/api/window/document/index.html @@ -0,0 +1,67 @@ +--- +title: window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +<p>{{ ApiRef() }}</p> + +<p><span class="seoSummary"><strong><code>window.document</code></strong>返回当前窗口内的文档节点（{{domxref("document")}}）</span></p> + +<div class="note"><strong>注:</strong> {{ Fx_minversion_inline(3) }}从Firefox 3和IE7开始,访问其他页面内的文档节点会受到同源策略的影响.</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval notranslate"><em>doc</em> = window.document +</pre> + +<h2 id="Parameters" name="Parameters">参数</h2> + +<ul> + <li><code>doc</code>是一个指向{{domxref("document")}}对象的引用</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> + <title>Hello, World!</title> +</head> +<body> + +<script type="text/javascript"> + var doc = window.document; + alert( doc.title); // 弹出: Hello, World! +</script> + +</body> +</html></pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.document")}}</p> diff --git a/files/zh-cn/web/api/window/dump/index.html b/files/zh-cn/web/api/window/dump/index.html new file mode 100644 index 0000000000..41d0a286bf --- /dev/null +++ b/files/zh-cn/web/api/window/dump/index.html @@ -0,0 +1,54 @@ +--- +title: Window.dump() +slug: Web/API/Window/dump +tags: + - API + - DOM + - DOM_0 + - Method + - Non-standard +translation_of: Web/API/Window/dump +--- +<div>{{ ApiRef() }}</div> + +<div> +<p id="comment_text_2">{{Non-standard_header}}</p> +</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>将信息打印到 (本地) 控制台（console）.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.dump(<em>message</em>); + +dump(<em>message</em>); +</pre> + +<ul> + <li><code>message</code> 是要打印的字符串</li> +</ul> + +<h2 id="Notes" name="Notes">注解</h2> + +<p><code>dump()</code><font><font>的</font><font>常见用途</font><font>是调试JavaScript。</font></font><code>dump</code><font><font>如果使用</font></font><code>console</code><font><font>选项</font><font>启动了Firefox进程，则将</font><font>消息</font><font>发送到系统控制台（本地控制台）</font><font>。</font><font>如果</font></font><code>console</code><font><font>未指定</font><font>该</font><font>选项，则输出到对应终端。</font><font>dump()的输出不会发送到</font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font><font>浏览器控制台</font></font></a><font><font>。</font><font>输出可以</font><font>使用</font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.log"><font>console.log（）</font></a><font>发送到</font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font><font>浏览器控制台</font></font></a><font><font>。</font><font>特殊的代码还能将</font><font>消息记录到</font><a href="https://developer.mozilla.org/en-US/docs/Error_Console" title="Error_Console"><font>错误控制台</font></a><font> / </font><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console"><font>浏览器控制台</font></a><font>。</font></font><code><a href="https://developer.mozilla.org/en-US/docs/Components.utils.reportError" title="Components.utils.reportError">Components.utils.reportError</a></code><code><a href="https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIConsoleService" title="nsIConsoleService">nsIConsoleService</a></code></p> + +<p><code>dump()</code><font><font>也可用于使用JavaScript实现的XPCOM组件，尽管 </font></font>{{domxref("window")}} <font><font>不是组件中的全局对象。</font><font>它也明确地在</font></font><a href="https://developer.mozilla.org/en/docs/Components.utils.Sandbox#Methods_available_on_the_Sandbox_object" title="沙盒对象上可用的方法"><font><font>沙箱中提供</font></font></a><font><font>。</font><font>但是，这种使用</font></font><code>dump</code><font><font>不受下面提到的偏好的影响---它将始终显示出来。</font><font>因此，建议您自己检查此偏好或使用自己的调试偏好，以确保在根本不感兴趣的情况下，不会向用户的控制台发送大量调试内容。</font><font>请注意，</font></font><code>dump</code><font><font>XPCOM组件的输出将转到</font></font><code>stderr</code><font><font>，而</font></font><code>dump </code><font><font>其他地方将输出</font></font><code>stdout</code><font><font>。</font></font></p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Gecko" title="壁虎"><font><font>Gecko</font></font></a> <font><font>在</font><strong><font>默认情况dump()下</font></strong></font><strong><font><font>被禁用</font></font></strong><font><font> - 它不会做任何事情，但也不会引起错误。</font><font>要查看</font></font><code>dump</code><font><font>输出，您必须通过设置首选项</font></font><code>browser.dom.window.dump.enabled</code><font><font>来</font><font>启用它</font></font><font><font>。</font><font>您可以在</font></font><a href="http://kb.mozillazine.org/About:config"><font><font>about：config</font></font></a><font><font>或</font></font><a href="http://kb.mozillazine.org/User.js_file"><font><font>user.js文件中</font></font></a><font><font>设置首选项</font><font>。</font><font>注意：</font></font><code>about:config</code><font><font>默认情况下</font><font>不会列出此首选项</font><font>，您可能需要创建它（右键单击内容区域 - >新建 - >布尔值）。</font></font></p> + +<p><font><font>在Windows上，您需要一个控制台才能看到任何东西。</font><font>如果您还没有，请关闭应用程序并使用命令行参数重新打开</font></font><code>console</code><font><font>应该创建控制台或使用</font></font><code>-attach-console</code><font><font>现有的控制台。</font><font>在其他操作系统上，从终端启动应用程序就足够了。</font></font></p> + +<p><font><font>要将控制台输出重定向到文件，请运行firefox </font></font><em><font><font>而不</font></font></em><font><font>使用-console选项，并使用语法将stderr和stdout重定向到一个文件，即：</font></font></p> + +<pre>firefox > console.txt 2>&1 +</pre> + +<div class="note"> +<p><font><font>如果您希望控制台消息出现在用于启动应用程序的控制台中，则可以使用</font></font><a href="https://github.com/matthewkastor/Redirector"><font><font>Gecko控制台重定向器</font></font></a><font><font>。</font><font>预编译的二进制文件可以在压缩的归档文件 </font></font><a href="https://github.com/matthewkastor/Redirector/archive/master.zip"><font><font>https://github.com/matthewkastor/Redirector/archive/master.zip中找到</font></font></a><font><font>，</font></font><code>Redirector-master\Gecko\Console Redirector\bin\Release</code><font><font>将所有dll和exe复制到任何你想要的地方。</font><font>然后跑</font></font><code>Console Redirector.exe /?</code></p> +</div> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p id="comment_text_2">这不是标准的一部分</p> diff --git a/files/zh-cn/web/api/window/error_event/index.html b/files/zh-cn/web/api/window/error_event/index.html new file mode 100644 index 0000000000..893466b46d --- /dev/null +++ b/files/zh-cn/web/api/window/error_event/index.html @@ -0,0 +1,133 @@ +--- +title: 'Window: error event' +slug: Web/API/Window/error_event +translation_of: Web/API/Window/error_event +--- +<div>{{APIRef}}</div> + +<p>当资源加载失败或无法使用时，会在{{domxref("Window")}}对象触发<code>error</code>事件。例如：script 执行时报错。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles（支持冒泡）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable（可撤销）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface（接口）</th> + <td>{{domxref("Event")}} or {{domxref("UIEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property（事件处理程序属性）</th> + <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code></td> + </tr> + </tbody> +</table> + +<p>如果它是由用户界面元素生成的，或者是由事件实例生成的，那么此事件是{{domxref("UIEvent")}}实例。</p> + +<h2 id="示例">示例</h2> + +<h3 id="在线示例"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/blur_event#%E5%9C%A8%E7%BA%BF%E7%A4%BA%E4%BE%8B">在线示例</a></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="script-error" type="button">Generate script error</button> + <img class="bad-img" /> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +button { + height: 2rem; + margin: .5rem; +} + +img { + width: 0; + height: 0; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); + +window.addEventListener('error', (event) => { + log.textContent = log.textContent + `${event.type}: ${event.message}\n`; + console.log(event) +}); + +const scriptError = document.querySelector('#script-error'); +scriptError.addEventListener('click', () => { + const badCode = 'const s;'; + eval(badCode); +}); +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('UI Events', '#event-type-error')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.error_event")}}</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>This event on <code>Element</code> targets: <code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code> event </li> +</ul> diff --git a/files/zh-cn/web/api/window/event/index.html b/files/zh-cn/web/api/window/event/index.html new file mode 100644 index 0000000000..a46da74b26 --- /dev/null +++ b/files/zh-cn/web/api/window/event/index.html @@ -0,0 +1,84 @@ +--- +title: Window.event +slug: Web/API/Window/event +tags: + - API + - DOM + - Window + - 事件 + - 方法 +translation_of: Web/API/Window/event +--- +<p>{{APIRef}}</p> + +<p>{{ Non-standard_header() }}</p> + +<p><strong><code>window.event</code></strong> 是一个由微软IE引入的属性，只有当DOM事件处理程序被调用的时候会被用到。它的值是当前正在处理的事件对象。</p> + +<h2 id="规范">规范</h2> + +<p>没有任何规范。</p> + +<p>微软<a href="https://msdn.microsoft.com/en-us/library/ms535863(v=vs.85).aspx">在MSDN上有相关介绍</a>。</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }} </p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="更多资料">更多资料</h2> + +<ul> + <li>{{domxref("Event.srcElement")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/external/index.html b/files/zh-cn/web/api/window/external/index.html new file mode 100644 index 0000000000..0453fa1fb0 --- /dev/null +++ b/files/zh-cn/web/api/window/external/index.html @@ -0,0 +1,55 @@ +--- +title: Window.external +slug: Web/API/Window/external +tags: + - API + - Deprecated + - Window + - external +translation_of: Web/API/Window/external +--- +<div>{{APIRef}} {{deprecated_header}}</div> + +<p>{{domxref("Window")}} API 的 <code>external</code> 属性返回一个 <code>External</code> 接口的实例，这个接口本来用于包含一些用来向浏览器添加外部搜索提供者（external search providers）的函数，但是，现在这个属性已被废弃，其中的函数现在都是空函数，无任何功能，仅为了符合规范而存在。</p> + +<h2 id="方法">方法</h2> + +<p><code>External</code> 对象有以下方法：</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>方法</th> + <th>描述</th> + </tr> + <tr> + <td><code>AddSearchProvider(<var>descriptionURL</var>)</code></td> + <td>空函数，无任何作用。参见 <a href="/en-US/docs/Web/OpenSearch#Autodiscovery_of_search_plugins">Autodiscovery of search plugins</a>。</td> + </tr> + <tr> + <td><code>IsSearchProviderInstalled()</code></td> + <td>空函数，无任何作用。</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#external', 'External')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.external")}}</p> diff --git a/files/zh-cn/web/api/window/find/index.html b/files/zh-cn/web/api/window/find/index.html new file mode 100644 index 0000000000..9574fcf20a --- /dev/null +++ b/files/zh-cn/web/api/window/find/index.html @@ -0,0 +1,47 @@ +--- +title: window.find +slug: Web/API/Window/find +translation_of: Web/API/Window/find +--- +<p>{{ ApiRef() }}</p> +<p>{{ note(" <code>window.find()</code>可能会在未来版本的Gecko中被废弃 . 查看 Bug(672395) .") }} </p> +<h3 id="Summary" name="Summary">概述</h3> +<p>在一个页面中搜索指定的字符串.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>, + <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>); +</pre> +<dl> + <dt> + <code>aString</code></dt> + <dd> + 将要搜索的字符串</dd> + <dt> + <code>aCaseSensitive</code></dt> + <dd> + 布尔值,如果为<code>true</code>,表示搜索是区分大小写的.</dd> + <dt> + <code>aBackwards</code></dt> + <dd> + 布尔值.如果为<code>true</code>, 表示搜索方向为向上搜索.</dd> + <dt> + <code>aWrapAround</code></dt> + <dd> + 布尔值.如果为<code>true</code>, 表示为循环搜索.</dd> + <dt> + <code>aWholeWord</code> {{ unimplemented_inline() }}</dt> + <dd> + 布尔值.如果为<code>true</code>,表示采用全字匹配搜索.该参数无效; 查看 {{ bug("481513") }}.</dd> + <dt> + <code>aSearchInFrames</code></dt> + <dd> + 布尔值.如果为<code>true</code>, 表示会搜索框架内的文本.</dd> + <dt> + <code>aShowDialog</code></dt> + <dd> + 布尔值.如果为<code>true</code>, 则会弹出一个搜索对话框.</dd> +</dl> +<h3 id="Returns" name="Returns">返回值</h3> +<p><code>如果搜索到指定的字符串,则返回true,否则</code>返回false.</p> +<h3 id="规范"><span style="font-weight: bold;">规范</span></h3> +<p>{{ DOM0() }}</p> diff --git a/files/zh-cn/web/api/window/focus/index.html b/files/zh-cn/web/api/window/focus/index.html new file mode 100644 index 0000000000..984020d0e5 --- /dev/null +++ b/files/zh-cn/web/api/window/focus/index.html @@ -0,0 +1,41 @@ +--- +title: Window.focus() +slug: Web/API/Window/focus +tags: + - API +translation_of: Web/API/Window/focus +--- +<p>{{APIRef}}</p> + +<h2 id="概述">概述</h2> + +<p>请求将窗口显示在前（靠近屏幕），这可能由于用户设置而失败，并且该窗口在方法返回之前不能保证会显示在最前.</p> + +<h2 id="语法">语法</h2> + +<pre class="eval">window.focus() +</pre> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="eval">if (clicked) { window.focus(); } +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{ languages( { "ja": "ja/DOM/window.focus", "pl": "pl/DOM/window.focus" } ) }}</p> diff --git a/files/zh-cn/web/api/window/focus_event/index.html b/files/zh-cn/web/api/window/focus_event/index.html new file mode 100644 index 0000000000..a5450ca2ec --- /dev/null +++ b/files/zh-cn/web/api/window/focus_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'Window: focus event' +slug: Web/API/Window/focus_event +tags: + - API + - Event + - Focus +translation_of: Web/API/Window/focus_event +--- +<div>{{APIRef}}</div> + +<p>当元素获得焦点时， <strong><code>focus</code></strong> 事件就会触发。</p> + +<p>与 <code>focus</code> 相反的事件是 {{domxref("Window/blur_event", "blur")}}</p> + +<table class="properties"> + <tbody> + <tr> + </tr> + <tr> + <th>Bubbles（支持冒泡）</th> + <td>No</td> + </tr> + <tr> + <th>Cancelable（可撤销）</th> + <td>No</td> + </tr> + <tr> + <th>Interface（接口）</th> + <td>{{DOMxRef("FocusEvent")}}</td> + </tr> + <tr> + <th>Event handler property（事件处理程序属性）</th> + <td>{{domxref("GlobalEventHandlers/onfocus", "onfocus")}}</td> + </tr> + <tr> + <th>Sync / Async（同步/异步）</th> + <td>Sync</td> + </tr> + <tr> + <th>Composed（可组成）</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="在线示例">在线示例</h3> + +<p>本示例在失去焦点时更改文档的外观。它使用 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} 监听 <code>focus</code> 和 {{domxref("Window/blur_event", "blur")}} 事件。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p id="log">Click on this document to give it focus.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.paused { + background: #ddd; + color: #555; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function pause() { + document.body.classList.add('paused'); + log.textContent = 'FOCUS LOST!'; +} + +function play() { + document.body.classList.remove('paused'); + log.textContent = 'This document has focus. Click outside the document to lose focus.'; +} + +const log = document.getElementById('log'); + +window.addEventListener('blur', pause); +window.addEventListener('focus', play);</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample("Live_example")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("UI Events", "#event-type-focus")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>添加了组成此事件的信息。</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-focus")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表格是根据结构化数据生成的。如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个拉取请求。</div> + +<p>{{Compat("api.Window.focus_event")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>相关联事件： {{domxref("Window/blur_event", "blur")}}</li> + <li><code>Element</code> 目标上的这个事件: {{domxref("Element/focus_event", "focus")}} 事件</li> +</ul> diff --git a/files/zh-cn/web/api/window/frameelement/index.html b/files/zh-cn/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..12c587d725 --- /dev/null +++ b/files/zh-cn/web/api/window/frameelement/index.html @@ -0,0 +1,73 @@ +--- +title: window.frameElement +slug: Web/API/Window/frameElement +translation_of: Web/API/Window/frameElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回嵌入当前<code>window</code>对象的元素(比如 <code><iframe></code> 或者 <code><object></code>),如果当前<code>window</code>对象已经是顶层窗口,则返回<code>null</code>.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">var <em>frameEl</em> = window.frameElement; +</pre> +<h3 id="Example" name="Example">例子</h3> +<pre class="eval">var frameEl = window.frameElement; +// 如果当前窗口被包含在一个框架里面,则将该框架的地址跳到'<span class="nowiki">http://mozilla.org/</span>' +if (frameEl) + frameEl.src = '<span class="nowiki">http://mozilla.org/</span>'; +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p>虽然该属性名为<code>frameElement</code>,但该属性也会返回其他类型比如 <code><object></code> 或者其他可嵌入窗口的元素.</p> +<h3 id="See_also" name="See_also">相关链接</h3> +<ul> + <li><code><a href="/zh-cn/DOM/window.frames" title="zh-cn/DOM/window.frames">window.frames</a></code> 返回一个类数组对象,返回当前窗口的所有子框架元素.</li> + <li><code><a href="/zh-cn/DOM/window.parent" title="zh-cn/DOM/window.parent">window.parent</a></code> 返回当前窗口的父窗口,也就是说,包含当前窗口所在的<code>frameElement</code>元素的窗口.</li> +</ul> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dom-frameelement" title="http://www.whatwg.org/specs/web-apps/current-work/#dom-frameelement">WHATWG</a></p> +<h3 id="浏览器兼容性">浏览器兼容性</h3> +<p>{{ CompatibilityTable() }}</p> +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>18</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>5.5?</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<p>{{ languages( { "ja": "ja/DOM/window.frameElement", "pl": "pl/DOM/window.frameElement", "en": "en/DOM/window.frameElement" } ) }}</p> diff --git a/files/zh-cn/web/api/window/frames/index.html b/files/zh-cn/web/api/window/frames/index.html new file mode 100644 index 0000000000..2d3331b096 --- /dev/null +++ b/files/zh-cn/web/api/window/frames/index.html @@ -0,0 +1,56 @@ +--- +title: Window.frames +slug: Web/API/Window/frames +translation_of: Web/API/Window/frames +--- +<p>{{ApiRef("Window")}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>frameList</em> = window.frames; +</pre> + +<ul> + <li>frameList是一个frame对象的集合，它类似一个数组，有length属性且可以使用索引（[i]）来访问。</li> + <li><code>frameList === window</code> 计算结果为true。</li> + <li>在window.frames类数组中的每一项都代表了窗口对应给定对象的<frame>或<iframe>的内容，而不是(i)frame DOM元素（即window.frames[ 0 ]与document.getElementsByTagName( "iframe" )[ 0 ].contentWindow是相同的）。</li> + <li>有关返回值的更多详细信息，请参考 <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1">thread on mozilla.dev.platform</a> 。</li> +</ul> + +<h2 id="Example" name="Example">实例</h2> + +<pre class="brush: js">var frames = window.frames; // 或 // var frames = window.parent.frames; +for (var i = 0; i < frames.length; i++) { + // 在这对frames的一个frame做点什么 + frames[i].document.body.style.background = "red"; + +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>{{ DOM0() }}</p> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-frames', 'Window.frames')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/window/fullscreen/index.html b/files/zh-cn/web/api/window/fullscreen/index.html new file mode 100644 index 0000000000..3460bad775 --- /dev/null +++ b/files/zh-cn/web/api/window/fullscreen/index.html @@ -0,0 +1,48 @@ +--- +title: Window.fullScreen +slug: Web/API/Window/fullScreen +translation_of: Web/API/Window/fullScreen +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>这个属性表明了窗口是否处于全屏模式下。仅在Gecko 1.9（Firefox 3）以及之后的版本中有意义，详情参见后附备注。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>isInFullScreen</var> = <var>windowRef</var>.fullScreen; +</pre> + +<p>在取得chrome privileges的情况下，这个属性是可读写的，否则将是只读属性。如果你试图在未取得chrome privileges的情况下设置这个属性，虽然实际上修改会失败，却并不会抛出错误。这是为了阻止在IE浏览器中意图通过修改这个属性而进行恶意攻击的脚本。</p> + +<h2 id="Return_Value" name="Return_Value">返回值</h2> + +<dl> + <dt><code>isInFullScreen</code></dt> + <dd>一个布尔值. 可能的值如下:</dd> +</dl> + +<ul> + <li><code>true</code>: 窗口处于全屏模式下。</li> + <li><code>false</code>: 窗口未处于全屏模式下。</li> +</ul> + +<h2 id="Examples" name="Examples">示例</h2> + +<pre class="syntaxbox"><code>if (window.fullScreen) { + // it's fullscreen! +} else { + // not fullscreen! +}</code></pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>DOM 0 级。 window.fullScreen 并不属于任何 W3C 规范或技术推荐中。</p> + +<h2 id="Notes" name="Notes">备注</h2> + +<ul> + <li>这个属性仅在 Mozilla 1.9（Firefox 3）及之后才有意义。Mozilla 1.8 及早期版本确实有这个属性，但它总是返回false，即使在窗口确实处于全屏模式的情况下({{Bug("127013")}})。</li> + <li>在常规窗口与全屏窗口之间切换会在相应的窗口中触发“resize”事件。</li> +</ul> diff --git a/files/zh-cn/web/api/window/gamepadconnected_event/index.html b/files/zh-cn/web/api/window/gamepadconnected_event/index.html new file mode 100644 index 0000000000..e1198abe75 --- /dev/null +++ b/files/zh-cn/web/api/window/gamepadconnected_event/index.html @@ -0,0 +1,90 @@ +--- +title: gamepadconnected +slug: Web/API/Window/gamepadconnected_event +tags: + - Gamepad + - gamepadconnected +translation_of: Web/API/Window/gamepadconnected_event +--- +<p><code>gamepadconnected</code> 事件会在浏览器检测到游戏控制器第一次连接或者第一次按下游戏键/摇杆的时候触发。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">文档</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd> + <dt style="float: left; text-align: right; width: 120px;">类型</dt> + <dd style="margin: 0 0 0 120px;">事件</dd> + <dt style="float: left; text-align: right; width: 120px;">冒泡</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">默认操着</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> 只读</td> + <td>{{domxref("DOMString")}}</td> + <td>事件目标（DOM树中的顶层，即document.documentElement）。</td> + </tr> + <tr> + <td><code>type</code> 只读</td> + <td> + <p>{{domxref("EventTarget")}}</p> + </td> + <td>事件的类型。</td> + </tr> + <tr> + <td><code>bubbles</code> 只读</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否正常冒泡。</td> + </tr> + <tr> + <td><code>cancelable</code> 只读</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可以取消。</td> + </tr> + <tr> + <td><code>gamepad</code> 只读</td> + <td>{{domxref("Gamepad")}}</td> + <td>单个游戏手柄属性，可用于访问关联游戏手柄的数据。</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush:js;">// 请注意，在实现该API的浏览器中，该API仍为供应商前缀 +window.addEventListener("gamepadconnected", function( event ) { + + // 所有按钮和轴值均可通过以下方式访问 + event.gamepad; + +}); +</pre> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> +</ul> + +<h2 id="还可以参考">还可以参考</h2> + +<ul> + <li><a href="/en-US/docs/API/Gamepad/Using_Gamepad_API">Using Gamepad API</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/getattention/index.html b/files/zh-cn/web/api/window/getattention/index.html new file mode 100644 index 0000000000..f17531eb18 --- /dev/null +++ b/files/zh-cn/web/api/window/getattention/index.html @@ -0,0 +1,33 @@ +--- +title: Window.getAttention() +slug: Web/API/Window/getAttention +translation_of: Web/API/Window/getAttention +--- +<div>{{ ApiRef() }}</div> + +<p>The <code><strong>Window.getAttention()</strong></code> method attempts to get the user's attention. The mechanism for this happening depends on the specific operating system and window manager.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.getAttention(); +</pre> + +<h2 id="Notes">Notes</h2> + +<p>On Windows, the taskbar button for the window flashes, if this hasn't been disabled by the user.</p> + +<p>On Linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others focus the window immediately. This may be configurable as well.</p> + +<p>On Macintosh, the icon in the upper right corner of the desktop flashes.</p> + +<p>The function is disabled for web content. Neither Gecko nor Internet Explorer supports this feature now for web content. <code>getAttention</code> will still work when used from <a href="en/Chrome">chrome</a> in a Gecko application.</p> + +<h2 id="Specification">Specification</h2> + +<p>DOM Level 0. Not part of specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.getAttention")}}</p> diff --git a/files/zh-cn/web/api/window/getcomputedstyle/index.html b/files/zh-cn/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..34d2cb20eb --- /dev/null +++ b/files/zh-cn/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,151 @@ +--- +title: Window.getComputedStyle() +slug: Web/API/Window/getComputedStyle +tags: + - API + - CSSOM View + - setProperty +translation_of: Web/API/Window/getComputedStyle +--- +<div>{{APIRef}}</div> + +<h2 id="摘要">摘要</h2> + +<p><code>Window.getComputedStyle()</code>方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">let <em>style</em> = window.getComputedStyle(<em>element,</em> [<em>pseudoElt</em>]); +</pre> + +<dl> + <dt>element</dt> + <dd> 用于获取计算样式的{{domxref("Element")}}。</dd> + <dt>pseudoElt {{optional_inline}}</dt> + <dd>指定一个要匹配的伪元素的字符串。必须对普通元素省略（或<code>null</code>）。</dd> +</dl> + +<div class="note">注意：在Gecko2.0<span style="line-height: 1.5;"> {{geckoRelease("2.0")}}之前版本，参数pseudoElt是必要的。</span>如果为null，则不指定其他主要浏览器必须指定此参数。<span style="line-height: 1.5;">Gecko</span>已经更改为匹配其他浏览器的行为。<span style="line-height: 1.5;">。</span></div> + +<p>返回的<code>style</code>是一个实时的 {{domxref("CSSStyleDeclaration")}} 对象，当元素的样式更改时，它会自动更新本身。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">let elem1 = document.getElementById("elemId"); +let style = window.getComputedStyle(elem1, null); + +// 它等价于 +// let style = document.defaultView.getComputedStyle(elem1, null); +</pre> + +<pre class="brush: js"><style> + #elem-container{ + position: absolute; + left: 100px; + top: 200px; + height: 100px; + } +</style> + +<div id="elem-container">dummy</div> +<div id="output"></div> + +<script> + function getTheStyle(){ + let elem = document.getElementById("elem-container"); + let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height"); + document.getElementById("output").innerHTML = theCSSprop; + } + getTheStyle(); +</script> +</pre> + +<pre class="brush: js">function dumpComputedStyles(elem,prop) { + + let cs = window.getComputedStyle(elem,null); + if (prop) { + dump(" "+prop+" : "+cs.getPropertyValue(prop)+"\n"); + return; + } + let len = cs.length; + for (var i=0;i<len;i++) { + + let style = cs[i]; + dump(" "+style+" : "+cs.getPropertyValue(style)+"\n"); + } + +} + +</pre> + +<h2 id="描述">描述</h2> + +<p>返回的对象与从元素的 {{domxref("HTMLElement.style", "style")}} 属性返回的对象具有相同的类型;然而，两个对象具有不同的目的。从<code>getComputedStyle</code>返回的对象是只读的，可以用于检查元素的样式（包括由一个<code><style></code>元素或一个外部样式表设置的那些样式）。<code>elt.style</code>对象应用于在特定元素上设置样式。</p> + +<p>第一个参数必须是Element对象(传递一个非节点元素，如 一个#text 节点， 将会抛出一个错误). 从Gecko 1.9.2 {{geckoRelease("1.9.2")}} 开始, 现在返回的一个在URL周围有引号的URL值，像这样： <code>url("http://foo.com/bar.jpg")</code>.</p> + +<h2 id="defaultView"><code>defaultView</code></h2> + +<p>在许多在线的演示代码中，<code>getComputedStyle</code>是通过 <code>document.defaultView</code> 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过<code>window</code>对象调用。但有一种情况，你必需要使用 <code>defaultView</code>, 那是在firefox3.6上访问子框架内的样式 。</p> + +<h2 id="与伪元素一起使用">与伪元素一起使用</h2> + +<p>getComputedStyle 可以从<strong>伪元素</strong>拉取样式信息 (比如, <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code>—查看 <a class="external" href="http://dev.w3.org/csswg/css3-content/#pseudo-elements">详情</a> 这里).</p> + +<pre class="brush: html"><style> + h3::after { + content: "rocks!"; + } +</style> + +<h3>generated content</h3> + +<script> + let h3 = document.querySelector('h3'), + result = getComputedStyle(h3, '::after').content; + alert(`the generated content is: ${result}`); + console.log(`the generated content is: ${result}`); + // the generated content is: "rocks!" +</script> + +</pre> + +<h2 id="注意">注意</h2> + +<p> </p> + +<p>返回的{{domxref("CSSStyleDeclaration")}}对象将包含所有受支持的CSS属性长名称的活动值。示例名称是<code>border-bottom-width</code>，<code>border-width</code>和<code>border</code>是示例速记属性名称。仅使用像<code>font-size</code>这样的名字来查询值是最安全的。 查询诸如<code>font</code>等简写名称不适用于大多数浏览器。</p> + +<p>CSS规范也允许使用驼峰命名，比如<code>fontSize</code>或<code>paddingTop</code>。</p> + +<p>CSS属性值可以使用<code>getPropertyValue(propName)</code>API或直接索引到对象，如<code>cs ['z-index']</code>或<code>cs.zIndex</code>。</p> + +<p> </p> + +<p><code>getComputedStyle</code>的返回值是 {{cssxref("resolved_value", "resolved values")}}, 通常跟CSS2.1中的{{cssxref("computed_value","computed values")}}是相同的值。 但对于一些旧的属性，比如<code>width</code>, <code>height</code>, <code>padding </code>它们的值又为 {{cssxref("used_value","used values")}}。 最初, CSS2.0定义的计算值Computed values 就是属性的最终值。 但是CSS2.1 重新定义了 computed values 为布局前的值， used values布局后的值。 布局前与布局后的区别是， width 或者 height的 百分比可以代表元素的宽度，在布局后会被像素值替换.</p> + +<p>在某些情况下，通过浏览器会特意返回不准确的值。 特别是在避免CSS 浏览历史泄露的安全问题， 比如，浏览者看过某个网站， 它的链接通常会变成蓝色带下划线的链接，通过判断链接的颜色（getComputedSytle(node, null).color) 是否为蓝色，就会泄露用户的浏览历史， 所以浏览器会特意返回不准确的值，保护用户隐私。可以了解更多关于css安全的链接<a class="external" href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> 和 <a class="external" href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a></p> + +<p>在CSS过渡期间，<code>getComputedStyle</code>返回Firefox中的原始属性值，但返回WebKit中的最终属性值。</p> + +<p>在Firefox中，属性值为<code>auto</code>的会直接返回使用值，而不是<code>auto</code>。比如，你在设定了一个元素的css为<code>height:30px; top: auto; bottom:0;</code>它的父元素<code>height:100px;</code>，在请求<code>top</code>的计算样式时，Firefox会返回<code>'70px' = 100px - 30px;</code>。</p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.Window.getComputedStyle")}}</p> + +<h2 id="规范">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li> + <li><a href="http://dev.w3.org/csswg/cssom/#resolved-values" title="http://dev.w3.org/csswg/cssom/#resolved-values">CSS Object Model specification</a></li> +</ul> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>{{domxref("window.getDefaultComputedStyle")}}</li> + <li>{{cssxref("resolved_value", "Resolved Value")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html b/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html new file mode 100644 index 0000000000..2ec99a1b9a --- /dev/null +++ b/files/zh-cn/web/api/window/getdefaultcomputedstyle/index.html @@ -0,0 +1,144 @@ +--- +title: Window.getDefaultComputedStyle() +slug: Web/API/Window/getDefaultComputedStyle +translation_of: Web/API/window/getDefaultComputedStyle +--- +<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div> + +<p><code>getDefaultComputedStyle()</code> 给出元素的所有CSS属性的默认计算值(<a href="/en-US/docs/Web/CSS/computed_value">computed values</a> )，忽略作者样式。也就是说，只考虑用户代理和用户风格。</p> + +<h2 id="语法及参数说明">语法及参数说明</h2> + +<pre class="syntaxbox">let <em>style</em> = window.getDefaultComputedStyle(<em>element</em>[, <em>pseudoElt</em>]); +</pre> + +<dl> + <dt>element</dt> + <dd>获取计算样式的元素</dd> + <dt>pseudoElt {{optional_inline}}</dt> + <dd>指定匹配的伪类. 通常情况下可以为空.</dd> +</dl> + +<p>返回的样式是一个 <a href="/en-US/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var elem1 = document.getElementById("elemId"); +var style = window.getDefaultComputedStyle(elem1); +</pre> + +<pre class="brush: js"><style> +#elem-container { + position: absolute; + left: 100px; + top: 200px; + height: 100px; + } +</style> + +<div id="elem-container">dummy</div> +<div id="output"></div> + +<script> + var elem = document.getElementById("elem-container"); + var theCSSprop = window.getDefaultComputedStyle(elem).position; + document.getElementById("output").innerHTML = theCSSprop; // 将会输出 "static" +</script> </pre> + +<h2 id="Description">Description</h2> + +<p>The returned object is of the same type as the object returned by <code><a href="/en-US/docs/Web/API/Window/getComputedStyle">getComputedStyle</a></code>, but only takes into account user-agent and user rules.</p> + +<h2 id="使用伪元素">使用伪元素</h2> + +<p><code>getDefaultComputedStyle</code> 同样可以从伪元素中获取属性 (比如, <code>::after</code>, <code>::before</code>).</p> + +<pre class="brush: html"><style> + h3:after { + content: ' rocks!'; + } +</style> + +<h3>generated content</h3> + +<script> + var h3 = document.querySelector('h3'), + result = getDefaultComputedStyle(h3, ':after').content; + + console.log('the generated content is: ', result); // 返回 'none' +</script> +</pre> + +<h2 id="备注">备注</h2> + +<p>The returned value is, in certain known cases, expressly incorrect by deliberate intent. In particular, to avoid the so called CSS History Leak security issue, browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the <code>:visited</code> pseudo-selector. See <a href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> and <a href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/</a> for details of the examples of how this is implemented.</p> + +<h2 id="Specifications">Specifications</h2> + +<p>Proposed to the CSS working group.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>pseudo-element support</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>7.5</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>pseudo-element support</td> + <td>{{CompatNo}}</td> + <td>19</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/window/getselection/index.html b/files/zh-cn/web/api/window/getselection/index.html new file mode 100644 index 0000000000..6c2bebc684 --- /dev/null +++ b/files/zh-cn/web/api/window/getselection/index.html @@ -0,0 +1,82 @@ +--- +title: Window.getSelection +slug: Web/API/Window/getSelection +translation_of: Web/API/Window/getSelection +--- +<div>{{ ApiRef() }}</div> + +<div></div> + +<p><span style="line-height: 1.5;">返回一个 </span>{{domxref("Selection")}}<span style="line-height: 1.5;"> 对象，</span>表示用户选择的文本范围或光标的当前位置。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate"><em>const selection</em> = <em>window</em>.getSelection() ;</pre> + +<ul> + <li><code>selection</code> 是一个 {{domxref("Selection")}} 对象。 如果想要将 <code>selection</code> 转换为字符串，可通过连接一个空字符串（""）或使用 {{jsxref("String.toString()")}} 方法。</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js notranslate">function foo() { + let selObj = window.getSelection(); + console.log(selObj); + let selRange = selObj.getRangeAt(0); + // 其他代码 +}</pre> + +<h2 id="备注">备注</h2> + +<p>在 JavaScript中，当一个对象被传递给期望字符串作为参数的函数中时（如 {{ Domxref("window.alert") }} 或 {{ Domxref("document.write") }}），对象的{{jsxref("Object.toString","toString()")}}方法会被调用，然后将返回值传给该函数。</p> + +<p>在上例中，<code>selObj.toString()</code> 会在传递到 {{domxref("window.alert()")}}时自动调用。然而，当你试图在 {{domxref("Selection")}} 对象上使用一个 JavaScript 的{{jsxref("Global_Objects/String", "String")}} 对象上的属性或者方法时（如 {{jsxref("String.prototype.length")}} 或者 {{jsxref("String.prototype.substr()")}}），会导致错误（如果没有相应的属性或方法时）或返回不是期望的结果（如果存在相应的属性或方法）。如果想要将 <code>Selection</code> 对象作为一个字符串使用，请直接调用 <code>toString()</code> <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">方法：</span></p> + +<pre class="brush:js;gutter:false; notranslate">var selectedText = selObj.toString();</pre> + +<ul> + <li><code>selObj</code> 是一个<code>Selection</code> 对象，</li> + <li><code>selectedText</code> 是一个字符串（被选中的文本）。</li> +</ul> + +<h3 id="相关对象">相关对象</h3> + +<ul> +</ul> + +<p>你还可以使用 {{domxref("Document.getSelection()")}}，两个方法等价。</p> + +<p>值得注意的是，目前在Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中，<code>getSelection()</code> 对 {{htmlelement("textarea")}} 及 {{htmlelement("input")}} 元素不起作用。 {{domxref("HTMLInputElement.setSelectionRange()")}} 或 <code>selectionStart</code> 及 <code>selectionEnd</code> 属性可用于解决此问题。</p> + +<p>还要注意选择不同于焦点（详见 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Selection#Selection_%E5%8F%8A%E8%BE%93%E5%85%A5%E7%84%A6%E7%82%B9">Selection 及输入焦点</a>）。可使用{{domxref("Document.activeElement")}} 来返回当前的焦点元素.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据，请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<p>{{Compat("api.Window.getSelection")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#selections" style="line-height: 1.5;">HTML Editing API</a></li> + <li>{{domxref("Selection")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Document.getSelection()")}}</li> +</ul> + +<div id="gtx-anchor" style="position: absolute; left: 108px; top: 24px; width: 144.625px; height: 17px;"></div> + +<div class="jfk-bubble gtx-bubble" style="left: 58px; top: 27px; opacity: 1;"> +<div class="jfk-bubble-content-id" id="bubble-3"> +<div id="gtx-host" style="max-width: 400px;"></div> +</div> + +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 52.5px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> diff --git a/files/zh-cn/web/api/window/hashchange_event/index.html b/files/zh-cn/web/api/window/hashchange_event/index.html new file mode 100644 index 0000000000..de51f52ff8 --- /dev/null +++ b/files/zh-cn/web/api/window/hashchange_event/index.html @@ -0,0 +1,88 @@ +--- +title: 'Window: hashchange event' +slug: Web/API/Window/hashchange_event +tags: + - API + - DOM + - Event + - HashChange + - Window + - onhashchange + - 事件 + - 参考 +translation_of: Web/API/Window/hashchange_event +--- +<p>{{APIRef}}</p> + +<p>当URL的片段标识符更改时，将触发<strong>hashchange</strong>事件 (跟在＃符号后面的URL部分，包括＃符号)</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("HashChangeEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler</th> + <td>{{domxref("WindowEventHandlers/onhashchange", "onhashchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>你可以在 {{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 <code>hashchange</code> 事件：</p> + +<pre class="brush:js">window.addEventListener('hashchange', function() { + console.log('The hash has changed!') +}, false);</pre> + +<p>或使用 <code>onhashchange</code> 事件处理程序属性：</p> + +<pre class="brush: js">function locationHashChanged() { + if (location.hash === '#cool-feature') { + console.log("You're visiting a cool feature!"); + } +} + +window.onhashchange = locationHashChanged;</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.hashchange_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Window/popstate_event", "popstate")}}</li> + <li>{{domxref("WindowEventHandlers.onhashchange")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/history/index.html b/files/zh-cn/web/api/window/history/index.html new file mode 100644 index 0000000000..118bfe284c --- /dev/null +++ b/files/zh-cn/web/api/window/history/index.html @@ -0,0 +1,34 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +<p>{{ ApiRef("Window") }}</p> + +<p><strong><code>Window.history</code></strong>是一个只读属性，用来获取{{domxref("History")}} 对象的引用，{{domxref("History")}} 对象提供了操作浏览器<em>会话历史</em>（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。</p> + +<p><code>History</code>对象有如下方法：参见<span style="line-height: 1.5;"> </span><a href="/zh-CN/docs/Web/API/History_API" style="line-height: 1.5;" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a><span style="line-height: 1.5;"> 中的示例和详情。尤其指出的是文章里解释了在使用<code>pushState()</code>和<code>replaceState()方法前，你需要了解的安全问题。</code></span></p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history;</pre> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">history.back(); // 等同于点击浏览器的回退按钮 +history.go(-1); //等同于history.back(); +</pre> + +<h2 id="Notes" name="Notes">附注</h2> + +<p>在顶层页面中，浏览器的回退和前进按钮旁的下拉菜单显示了可以通过<code>History</code>对象访问到的页面会话历史（session history）列表。</p> + +<p>出于安全考虑，History对象不允许未授权代码访问会话历史（session History）中其它页面的URLs，但可以导航到其它会话历史（session History）指向的页面。</p> + +<p>未授权代码无法清除会话历史（session History），也不能禁用回退/前进功能。最快捷的可用方式是使用<a href="/en/DOM/window.location#replace" style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="en/DOM/window.location#replace">location.replace()</a>方法，提供指定的URL来替换当前的会话历史（session history）。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://whatwg.org/html#the-history-interface">HTML5 History interface</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/index.html b/files/zh-cn/web/api/window/index.html new file mode 100644 index 0000000000..8024186e44 --- /dev/null +++ b/files/zh-cn/web/api/window/index.html @@ -0,0 +1,727 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - JavaScript + - Window + - global + - 作用域 + - 全局 + - 参考 + - 接口 + - 标签页 + - 浏览器 +translation_of: Web/API/Window +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>window</code> 对象表示一个包含DOM文档的窗口，<font>其</font> <code>document</code> 属性指向窗口中载入的 <a href="/zh-CN/docs/Web/API/Document">DOM文档</a> 。使用 {{ Domxref("document.defaultView") }} 属性可以获取指定文档所在窗口。</p> + +<p><code>window</code>作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。</p> + +<p>本节为 DOM <code>Window</code> 对象中可用的所有方法、属性和事件提供简要参考。<code>window</code> 对象实现了 <code>Window</code> 接口，此接口继承自 <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> 接口。一些额外的全局函数、命名空间、对象、接口和构造函数与 window 没有典型的关联，但却是有效的，它们在 <a href="/en-US/docs/JavaScript/Reference">JavaScript参考</a> 和 <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM参考</a> 中列出。</p> + +<p>在有标签页功能的浏览器中，每个标签都拥有自己的 <code>window</code> 对象；也就是说，同一个窗口的标签页之间不会共享一个 <code>window</code> 对象。有一些方法，如 {{ Domxref("window.resizeTo") }} 和 {{ Domxref("window.resizeBy") }} 之类的方法会作用于整个窗口而不是 <code>window</code> 对象所属的那个标签。一般而言，如果一样东西无法恰当地作用于标签，那么它就会作用于窗口。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="属性">属性</h2> + +<p><em>这个接口从 {{domxref("EventTarget")}} 接口继承属性，也从 </em> <em>{{domxref("WindowOrWorkerGlobalScope")}} 和 {{domxref("WindowEventHandlers")}} 这两个 mixin 中继承属性。</em></p> + +<p>注意，对象类型的属性（例如：覆盖内建元素的原型）被列于下面单独的小节之中。</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> + <dd>这个属性指示当前窗口是否关闭。</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>返回 console 对象的引用，该对象提供了对浏览器调试控制台的访问。</dd> + <dt>{{domxref("Window.content")}} 和 <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> + <dd>返回当前 window 的 content 元素的引用。通过带下划线的过时变种方法不再可以获得 Web content。</dd> + <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>返回当前 chrome window 的 XUL 控制器对象。</dd> + <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> + <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>返回浏览器 crypto 对象。</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>获取或设置指定窗口的状态栏文本。</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>返回当前显示器的物理像素和设备独立像素的比例。</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>获取在调用 {{domxref("window.showModalDialog()")}} 时传递给窗口的参数（如果它是一个对话框）。这是一个 {{Interface("nsIArray")}}。</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>{{domxref("window.personalbar")}} 的另一种形式。</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>返回对当前窗口所包含文档的引用。</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> + <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> + <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>返回嵌入窗口的元素，如果未嵌入窗口，则返回null。</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>返回当前窗口中所有子窗体的数组。</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>此属性表示窗口是否以全屏显示。</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Gecko 13 (Firefox 13) 开始废弃。使用 {{domxref("Window.localStorage")}} 替代它。<br> + 原本是：用于存储跨页面数据的多重存储对象。</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>返回一个对 history 对象的引用。</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>获得浏览器窗口的内容区域的高度，包含水平滚动条(如果有的话)。</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>获得浏览器窗口的内容区域的宽度，包含垂直滚动条(如果有的话)。</dd> + <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>指出上下文环境是否能够使用安全上下文环境的特征。</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>返回窗口中的 frames 数量。参见 {{domxref("window.frames")}}。</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>获取、设置 window 对象的 location, 或者当前的 URL.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>返回 locationbar 对象，其可视性可以在窗口中切换。</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>返回用来存储只能在创建它的源下访问的数据的本地存储对象的引用</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>返回菜单条对象，它的可视性可以在窗口中切换</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>返回窗口的 <a href="/en-US/docs/The_message_manager">message manager</a> 对象。</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> + <dd>返回当前动画循环开始经过的毫秒数</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>获取/设置窗口的名称。</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>返回对 navigator 对象的引用。</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>返回对打开当前窗口的那个窗口的引用。</dd> + <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>返回浏览器窗口的外部高度。</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>返回浏览器窗口的外部宽度。</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>{{domxref("window.scrollX")}}的别名。</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> + <dd>{{domxref("window.scrollY")}}的别名。</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>返回当前窗口或子窗口的父窗口的引用。</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>返回 personalbar 对象，它的可视性可以在窗口中切换。</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + <dt>{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt> + <dd>Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt> + <dd>Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>, <code>window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>打开一个新窗口。</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>打开一个新的对话框窗口。</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>为一个窗口向另一个窗口发送数据字符串提供了一种安全方法，该窗口不必与第一个窗口处于相同的域中。</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>打开打印对话框以打印当前文档。</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>返回用户在提示对话框中输入的文本。</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>释放捕获特定类型事件的窗口。</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>告诉浏览器一个动画正在进行中，请求浏览器为下一个动画帧重新绘制窗口。</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>启用在浏览器空闲期间对任务进行调度。</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>将当前窗口调整到一定的大小。</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>动态调整窗口。</dd> + <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>滚动窗口到文档中的特定位置。</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>按给定的数量在窗口中滚动文档。</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>按给定行数滚动文档。</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>按指定页数滚动当前文档。</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>滚动到文档中的特定坐标集。</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> + <dd>更改当前窗口的光标。</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>在浏览器完成其他繁重任务后执行一个函数。</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>切换用户调整窗口大小的能力。</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>根据内容设置窗口大小。</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>这个方法停止窗口加载。</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>更新当前chrome窗口(UI)命令的状态。</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/error_event">error</a></code></dt> + <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br> + Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/languagechange_event">languagechange</a></code></dt> + <dd>Fired at the global scope object when the user's preferred language changes.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/orientationchange_event">orientationchange</a></code></dt> + <dd>Fired when the orientation of the device has changed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onorientationchange">onorientationchange</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/devicemotion_event">devicemotion</a></code></dt> + <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/deviceorientation_event">deviceorientation</a></code></dt> + <dd>Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.</dd> + <dt><code>{{domxref("Document/defaultView/resize_event", "resize")}}</code></dt> + <dd>Fired when the window has been resized.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> 属性。</dd> + <dt><code>{{domxref("Document/defaultView/storage_event", "storage")}}</code></dt> + <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> 属性。</dd> +</dl> + +<h3 id="Animation_events">Animation events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/animationcancel_event">animationcancel</a></code></dt> + <dd>Fired when an animation unexpectedly aborts.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/animationend_event">animationend</a></code></dt> + <dd>Fired when an animation has completed normally.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/animationiteration_event">animationiteration</a></code></dt> + <dd>Fired when an animation iteration has completed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/animationstart_event">animationstart</a></code></dt> + <dd>Fired when an animation starts.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> 属性。</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/clipboardchange_event">clipboardchange</a></code></dt> + <dd>Fired when the system clipboard content changes.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/copy_event">copy</a></code></dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/cut_event">cut</a></code></dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/paste_event">paste</a></code></dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a> 属性。</dd> +</dl> + +<h3 id="Connection_events">Connection events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/offline_event">offline</a></code></dt> + <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br> + Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/online_event">online </a></code></dt> + <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br> + Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} 属性。</dd> +</dl> + +<h3 id="Focus_events">Focus events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/blur_event">blur</a></code></dt> + <dd>Fired when an element has lost focus.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/focus_event">focus</a></code></dt> + <dd>Fired when an element has gained focus.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a> property</dd> +</dl> + +<h3 id="Gamepad_events">Gamepad events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/gamepadconnected_event">gamepadconnected</a></code></dt> + <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepadconnected">ongamepadconnected</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/gamepaddisconnected_event">gamepaddisconnected</a></code></dt> + <dd>Fired when the browser detects that a gamepad has been disconnected.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepaddisconnected">ongamepaddisconnected</a></code> property</dd> +</dl> + +<h3 id="History_events">History events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/hashchange_event">hashchange</a></code></dt> + <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">onhashchange</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/pagehide_event">pagehide</a></code></dt> + <dd>Sent when the browser hides the current document while in the process of switching to displaying in its palce a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.<br> + Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/pageshow_event">pageshow</a></code></dt> + <dd>Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.<br> + Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler 属性。</dd> + <dt><code>{{domxref("Document/defaultView/popstate_event", "popstate")}}</code></dt> + <dd>Fired when the active history entry changes.<br> + Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a></code> event handler 属性。</dd> +</dl> + +<h3 id="Load_unload_events">Load & unload events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code></dt> + <dd>Fired when the window, the document and its resources are about to be unloaded.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload">onbeforeunload</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></dt> + <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code></dt> + <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></dt> + <dd>Fired when the document or a child resource is being unloaded.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunload">onunload</a></code> 属性。</dd> +</dl> + +<h3 id="Manifest_events">Manifest events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/appinstalled_event">appinstalled</a></code></dt> + <dd>Fired when the browser has successfully installed a page as an application.<br> + Also available via the <a href="/en-US/docs/Web/API/Window/onappinstalled">onappinstalled</a> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/beforeinstallprompt_event">beforeinstallprompt</a></code></dt> + <dd>Fired when a user is about to be prompted to install a web application.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onbeforeinstallprompt">onbeforeinstallprompt</a></code> 属性。</dd> +</dl> + +<h3 id="Messaging_events">Messaging events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/message_event">message</a></code></dt> + <dd>Fired when the window receives a message, for example from a call to <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> from another browsing context.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/messageerror_event">messageerror</a></code></dt> + <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br> + Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessageerror">onmessageerror</a></code> 属性。</dd> +</dl> + +<h3 id="Print_events">Print events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/afterprint_event">afterprint</a></code></dt> + <dd>Fired after the associated document has started printing or the print preview has been closed.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint"><code>onafterprint</code></a> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/beforeprint_event">beforeprint</a></code></dt> + <dd>Fired when the associated document is about to be printed or previewed for printing.<br> + Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint"><code>onbeforeprint</code></a> 属性。</dd> +</dl> + +<h3 id="Promise_rejection_events">Promise rejection events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt> + <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br> + Also available through the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> event handler 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt> + <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br> + Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> event handler 属性。</dd> +</dl> + +<h3 id="Transition_events">Transition events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/transitionrun_event">transitionrun</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionrun</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/transitionstart_event">transitionstart</a></code></dt> + <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br> + Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart">ontransitionstart</a></code> 属性。</dd> +</dl> + +<h3 id="WebVR_events">WebVR events</h3> + +<dl> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayactivate_event">vrdisplayactivate</a></code></dt> + <dd>Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayactivate">onvrdisplayactivate</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayblur_event">vrdisplayblur</a></code></dt> + <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayblur">onvrdisplayblur</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayconnect_event">vrdisplayconnect</a></code></dt> + <dd>Fired when a compatible VR display is connected to the computer.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaydeactivate_event">vrdisplaydeactivate</a></code></dt> + <dd>Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydeactivate">onvrdisplaydeactivate</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaydisconnect_event">vrdisplaydisconnect</a></code></dt> + <dd>Fired when a compatible VR display is disconnected from the computer.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayfocus_event">vrdisplayfocus</a></code></dt> + <dd>Fired when presentation to a VR display has resumed after being blurred.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypresentchange_event">vrdisplaypresentchange</a></code></dt> + <dd>fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypointerrestricted_event">vrdisplaypointerrestricted</a></code></dt> + <dd>Fired when the VR display's pointer input is restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypointerrestricted">onvrdisplaypointerrestricted</a></code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypointerunrestricted_event">vrdisplaypointerunrestricted</a></code></dt> + <dd>Fired when the VR display's pointer input is no longer restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> + Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypointerunrestricted">onvrdisplaypointerunrestricted</a></code> 属性。</dd> +</dl> + +<h2 id="接口">接口</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/innerheight/index.html b/files/zh-cn/web/api/window/innerheight/index.html new file mode 100644 index 0000000000..d177fd0cd7 --- /dev/null +++ b/files/zh-cn/web/api/window/innerheight/index.html @@ -0,0 +1,122 @@ +--- +title: Window.innerHeight +slug: Web/API/Window/innerHeight +translation_of: Web/API/Window/innerHeight +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。</p> + +<div class="note"><strong>Note:</strong> If you use {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}} to set the virtual window size for page layout purposes, the value returned by this property corresponds to the viewport height set using that method.</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <var>intViewportHeight</var> = window.innerHeight;</pre> + +<h3 id="Value" name="Value">值</h3> + +<p><code>intViewportHeight</code> 为浏览器窗口的视口的高度。</p> + +<p><code>window.innerHeight</code> 属性为只读，且没有默认值。</p> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>任何窗口对象，如<font face="Courier New, Andale Mono, monospace"> </font>{{domxref("window")}}、frame、frameset 或 secondary window 都支持 <code>innerHeight</code> 属性。</p> + +<p>有一个<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7" title="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">算法</a>用来获取不包括水平滚动条的视口高度。</p> + +<h2 id="Example" name="Example">例子</h2> + +<h3 id="假设有一个_frameset">假设有一个 frameset</h3> + +<pre class="brush:js">var intFrameHeight = window.innerHeight; // or + +var intFrameHeight = self.innerHeight; +// 返回frameset里面的frame视口的高度 + +var intFramesetHeight = parent.innerHeight; +// 返回上一级frameset的视口的高度 + +var intOuterFramesetHeight = top.innerHeight; +// 返回最外部frameset的视口的高度 +</pre> + +<p>{{todo("link to an interactive demo here")}}</p> + +<p>改变一个窗口的大小，可以查看 {{domxref("window.resizeBy()")}} 和 {{domxref("window.resizeTo()")}}。</p> + +<p>想获取窗口的外层高度（outer height），即整个浏览器窗口的高度，请查看 {{domxref("window.outerHeight")}}。</p> + +<h3 id="Graphical_example" name="Graphical_example">图像示例</h3> + +<p>下面的示意图展示了 <code>outerHeight</code> 和 <code>innerHeight</code> 两者的区别。</p> + +<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></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</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>9</td> + <td>9</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>9</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_note" name="Gecko_note">Gecko 备注</h3> + +<p>从 Firefox 4 到 Firefox 24，该属性有 bug，而且某种情况下，会在页面加载前给出一个错误的值，查看 {{bug(641188)}}。</p> + +<h2 id="Standards_information" name="Standards_information">标准相关信息</h2> + +<p>DOM Level 0。不属于任何 W3C 技术规范或推荐。</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.outerHeight")}}</li> + <li>{{domxref("window.outerWidth")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/innerwidth/index.html b/files/zh-cn/web/api/window/innerwidth/index.html new file mode 100644 index 0000000000..fad1ee4c70 --- /dev/null +++ b/files/zh-cn/web/api/window/innerwidth/index.html @@ -0,0 +1,78 @@ +--- +title: Window.innerWidth +slug: Web/API/Window/innerWidth +tags: + - API + - CSSOM View + - HTML DOM + - innerWidth +translation_of: Web/API/Window/innerWidth +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">只读的 {{domxref("Window")}} 属性 <code><strong>innerWidth</strong></code> 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。</span></p> + +<p>更确切地说，<code>innerWidth</code> 返回窗口的 {{Glossary("layout viewport")}} 的宽度。 窗口的内部高度——布局视口的高度——可以从 {{domxref("Window.innerHeight", "innerHeight")}} 属性中获取到。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">let <var>intViewportWidth</var> = window.innerWidth;</pre> + +<h3 id="值">值</h3> + +<p>一个整数型的值表示窗口的布局视口宽度是以像素为单位的。这个属性是只读的，并且没有默认值。</p> + +<p>若要更改窗口的宽度，请使用 {{domxref("Window")}} 的方法来调整窗口的大小，例如{{domxref("Window.resizeBy", "resizeBy()")}} 或者 {{domxref("Window.resizeTo", "resizeTo()")}}。</p> + +<h2 id="使用说明">使用说明</h2> + +<p>如果你需要获取除去滚动条和边框的窗口宽度，请使用根元素 {{HTMLElement("html")}} 的{{domxref("Element.clientWidth", "clientWidth")}} 属性。</p> + +<p><code>innerWidth</code> 属性在任何表现类似于窗口的任何窗口或对象（例如框架或选项卡）上都是可用的。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">// 返回视口的宽度 +var intFrameWidth = window.innerWidth; + +// 返回一个框架集内的框架的视口宽度 +var intFrameWidth = self.innerWidth; + +// 返回最近的父级框架集的视口宽度 +var intFramesetWidth = parent.innerWidth; + +// 返回最外层框架集的视口宽度 +var intOuterFramesetWidth = top.innerWidth;</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>初识定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表格是根据结构化数据生成的。如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个拉取请求。</div> + +<p>{{Compat("api.Window.innerWidth")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("window.outerWidth")}}</li> + <li>{{domxref("window.innerHeight")}}</li> + <li>{{domxref("window.outerHeight")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/issecurecontext/index.html b/files/zh-cn/web/api/window/issecurecontext/index.html new file mode 100644 index 0000000000..63f29098c9 --- /dev/null +++ b/files/zh-cn/web/api/window/issecurecontext/index.html @@ -0,0 +1,120 @@ +--- +title: Window.isSecureContext +slug: Web/API/Window/isSecureContext +translation_of: Web/API/Window/isSecureContext +--- +<p>{{APIRef}}{{SeeCompatTable}}</p> + +<p><code><strong>window.isSecureContext</strong>是一个判断上下文是否能够使用<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts">安全上下文</a>的特征的只读属性<strong>。</strong></code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>isSecure</em> = window.isSecureContext</pre> + +<h2 id="示例">示例</h2> + +<h3 id="特征检测">特征检测</h3> + +<p>你可以使用特征检测来判断上下文是否处于安全的上下文之中通过使用在全局作用域下公共的<strong>isSecureContext</strong>返回的布尔值。</p> + +<pre class="brush: js">if (window.isSecureContext) { + // 页面是是个安全的上下文，服务可以正常使用。 + navigator.serviceWorker.register("/offline-worker.js").then(function () { + ... + }); +}</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Secure Contexts')}}</td> + <td>{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Considers <a href="/en-US/docs/Web/API/Window/opener">window.opener</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Considers <a href="/en-US/docs/Web/API/Window/opener">window.opener</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/languagechange_event/index.html b/files/zh-cn/web/api/window/languagechange_event/index.html new file mode 100644 index 0000000000..953a16707d --- /dev/null +++ b/files/zh-cn/web/api/window/languagechange_event/index.html @@ -0,0 +1,123 @@ +--- +title: languagechange +slug: Web/API/Window/languagechange_event +translation_of: Web/API/Window/languagechange_event +--- +<p>{{SeeCompatTable}}</p> + +<p>当用户首选语言更改时，将在全局范围对象上触发languagechange事件。</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><span>{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange') }}</span></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">The default window scope, being {{domxref("Window")}} on Web pages and {{domxref("WorkerGlobalScope")}} in <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a>.</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<p><em>Being of type {{domxref("Event")}}, this event implements the properties of this interface.</em></p> + +<dl> + <dt>{{domxref("Event.target")}} {{ReadonlyInline}}</dt> + <dd>Returns an {{domxref("EventTarget")}} that is the topmost target in the DOM tree of the event.</dd> + <dt>{{domxref("Event.type")}} {{ReadonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the type of event, here <code>"languagechange"</code>.</dd> + <dt>{{domxref("Event.bubbles")}}{{ReadonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if the event normally bubbles or not.</dd> + <dt>{{domxref("Event.cancelable")}}{{ReadonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating if it is possible to cancel the event.</dd> +</dl> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> + <td>{{ Spec2('HTML5.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{ CompatGeckoDesktop("32") }} [1]</td> + <td>{{ CompatNo() }}</td> + <td>24</td> + <td>{{ CompatNo() }}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("32") }}[1]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]In Firefox, the <code>navigator.languages</code> property's value is taken from the <code>intl.accept_languages</code> preference.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li> + <li>{{domxref("NavigatorLanguage.languages","navigator.languages")}}</li> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("Window.onlanguagechange")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/length/index.html b/files/zh-cn/web/api/window/length/index.html new file mode 100644 index 0000000000..b5e37e034a --- /dev/null +++ b/files/zh-cn/web/api/window/length/index.html @@ -0,0 +1,21 @@ +--- +title: window.length +slug: Web/API/Window/length +translation_of: Web/API/Window/length +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回当前窗口中包含的框架数量(框架包括<code>frame</code>和<code>iframe</code>两种元素).</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><i>framesCount</i> = window.length; +</pre> +<ul> + <li><code>framesCount</code>就是该窗口中框架的数量.</li> +</ul> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js">if (window.length) { + // 该窗口包含至少一个子框架 +}</pre> +<h2 id="Specification" name="Specification">规范</h2> +<p>{{DOM0}}</p> diff --git a/files/zh-cn/web/api/window/localstorage/index.html b/files/zh-cn/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..0145b13bc7 --- /dev/null +++ b/files/zh-cn/web/api/window/localstorage/index.html @@ -0,0 +1,93 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Storage + - Window + - localStorage + - 只读属性 +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p>只读的<span class="seoSummary"><code>localStorage</code> 属性允许你访问一个{{domxref("Document")}} 源（origin）的对象 {{domxref("Storage")}}；</span>存储的数据将保存在浏览器会话中<span class="seoSummary">。</span><code>localStorage</code> 类似 {{DOMxRef("Window.sessionStorage", "sessionStorage")}}，但其区别在于：存储在 <code>localStorage</code> 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 <code>sessionStorage</code> 的数据会被清除 。</p> + +<p>应注意，无论数据存储在 <code>localStorage</code> 还是 <code>sessionStorage</code> ，<strong>它们都特定于页面的协议。</strong></p> + +<p>另外，<code>localStorage</code> 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">myStorage = localStorage;</pre> + +<h3 id="值">值</h3> + +<p>一个可被用于访问当前源（ origin ）的本地存储空间的 {{domxref("Storage")}} 对象。</p> + +<h3 id="异常">异常</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>请求违反了一个策略声明，或者源（ origin ）不是 <a href="/en-US/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">一个有效的 scheme/host/port tuple</a> （例如如果origin使用 <code>file:</code> 或者 <code>data:</code> 形式将可能发生）。比如，用户可以有禁用允许对指定的origin存留数据的浏览器配置。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>下面的代码片段访问了当前域名下的本地 {{domxref("Storage")}} 对象，并通过 {{domxref("Storage.setItem()")}} 增加了一个数据项目。</p> + +<pre class="brush: js">localStorage.setItem('myCat', 'Tom'); +</pre> + +<p>该语法用于读取 <code>localStorage</code> 项，如下:</p> + +<pre class="brush: js">let cat = localStorage.getItem('myCat'); +</pre> + +<p>该语法用于移除 <code>localStorage</code> 项，如下:</p> + +<pre class="brush: js">localStorage.removeItem('myCat'); +</pre> + +<p>该语法用于移除所有的 <code>localStorage</code> 项，如下:</p> + +<pre class="brush: js">// 移除所有 +localStorage.clear(); +</pre> + +<div class="note"> +<p><strong>注意</strong>: 请参考 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> 的完整示例文章。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.localStorage")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a></li> + <li><a href="/zh-CN/docs/Web/API/Web_Storage_API/Local_storage">Local storage（Window.localStorage）</a></li> + <li>{{domxref("LocalStorage")}}</li> + <li>{{domxref("SessionStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/location/index.html b/files/zh-cn/web/api/window/location/index.html new file mode 100644 index 0000000000..b199786ac8 --- /dev/null +++ b/files/zh-cn/web/api/window/location/index.html @@ -0,0 +1,305 @@ +--- +title: window.location +slug: Web/API/Window/location +tags: + - API + - HTML + - Property + - Reference + - Window + - 'window.location : 所有字母必须小写！' +translation_of: Web/API/Window/location +--- +<p>{{ APIRef() }}</p> + +<p><strong>window.location</strong> 只读属性，返回一个 {{domxref("Location")}} 对象，其中包含有关文档当前位置的信息。</p> + +<div class="note"> +<p>window.location : 所有字母必须小写！</p> +</div> + +<p>尽管 window.location 是一个<em>只读</em> Location 对象，你仍然可以赋给它一个 {{domxref("DOMString")}}。这意味着您可以在大多数情况下处理 <strong>location</strong>，就像它是一个字符串一样：window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com'的同义词 。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">let oldLocation = location; +location = newLocation; +</pre> + +<h2 id="Example" name="Example" style="margin-bottom: 20px; line-height: 30px;">示例</h2> + +<h3 id="简单例子" style="line-height: 24px;">简单例子</h3> + +<pre class="brush: js">alert(location); +// 弹出 "https://developer.mozilla.org/en-US/docs/Web/API/window.location"</pre> + +<h3 id="例子1：导航到一个新页面" style="line-height: 24px;">例子#1：导航到一个新页面</h3> + +<p>只要赋给 location 对象一个新值，文档就会使用新的 URL 加载，就好像使用修改后的 URL 调用了 <code>window.location.assign()</code> 一样。需要注意的是，安全设置，如 CORS（跨域资源共享），可能会限制实际加载新页面。</p> + +<pre class="brush: js language-js">window.location.assign("http://www.mozilla.org"); // or +window.location = "http://www.mozilla.org"; +</pre> + +<h3 id="例子2：强制从服务器重新加载当前页面" style="line-height: 24px;">例子#2：强制从服务器重新加载当前页面</h3> + +<pre class="brush: js language-js">window.location.reload(true); +</pre> + +<h3 id="例子3" style="line-height: 24px;">例子#3</h3> + +<p>考虑下面的例子，该例使用 <code>replace()</code> 方法重新加载页面，并将 <code>window.location.pathname</code> 的值插入到 hash：</p> + +<pre class="brush: js language-js">function reloadPageWithHash() { + var initialPage = window.location.pathname; + window.location.replace('http://example.com/#' + initialPage); +} +</pre> + +<div class="note"><strong>Note:</strong> The example above works in situations where <code>window.location.hash</code> does not need to be retained. However, in Gecko-based browsers, setting <code>window.location.pathname</code> in this manner will erase any information in <code>window.location.hash</code>, whereas in WebKit (and possibly other browsers), setting the pathname will not alter the the hash. If you need to change pathname but keep the hash as is, use the <code>replace()</code> method instead, which should work consistently across browsers.</div> + +<h3 id="例子4：弹出警告框，显示当前_URL_的属性：" style="line-height: 24px;">例子#4：弹出警告框，显示当前 URL 的属性：</h3> + +<pre class="brush: js language-js">function showLoc() { + var oLocation = window.location, aLog = ["Property (Typeof): Value", "window.location (" + (typeof oLocation) + "): " + oLocation ]; + for (var sProp in oLocation){ + aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a")); + } + alert(aLog.join("\n")); +} + +// in html: <button onclick="showLoc();">Show location properties</button> +</pre> + +<h3 id="例子5：通过修改_search_属性向服务器发送字符串数据：" style="line-height: 24px;">例子#5：通过修改 <code>search</code> 属性向服务器发送字符串数据：</h3> + +<pre class="brush: js language-js">function sendData (sData) { + window.location.search = sData; +} + +// in html: <button onclick="sendData('Some data');">Send data</button> +</pre> + +<p>当前 URL 带上 "?Some%20data"，被发送到服务端（如果服务端不处理，则使用修改后的查询字符串 [search string] 重新加载当前文档）。</p> + +<h3 id="例子6：获取一个_window.location.search_键值（key_value）：" style="line-height: 24px;">例子#6：获取一个 <code>window.location.search</code> 键值（key value）：</h3> + +<pre class="brush: js language-js">function loadPageVar (sVar) { + return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); +} + +alert(loadPageVar("name")); +</pre> + +<h3 id="例子7：通过_window.location.search_字符串获取查询参数，存入对象_oGetVars_中：">例子#7：通过 <code>window.location.search</code> 字符串获取查询参数，存入对象 <code>oGetVars</code> 中：</h3> + +<pre class="brush: js language-js">var oGetVars = {}; + +if (window.location.search.length > 1) { + for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { + aItKey = aCouples[nKeyId].split("="); + oGetVars[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : ""; + } +} + +// alert(oGetVars.yourVar); +</pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div> + +<p>同样可以通过一个匿名构造函数来获取，这样只声明了一个全局变量。</p> + +<pre class="brush: js language-js">var oGetVars = new (function (sSearch) { + if (sSearch.length > 1) { + for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { + aItKey = aCouples[nKeyId].split("="); + this[decodeURIComponent(aItKey[0])] = aItKey.length > 1 ? decodeURIComponent(aItKey[1]) : ""; + } + } +})(window.location.search); + +// alert(oGetVars.yourVar); +</pre> + +<h3 id="例子8：通过_window.location.search_字符串获取查询参数，存入对象_oGetVars_中，并尝试识别参数类型（typeof）：">例子#8：<span style="font-size: 1.714285714285714rem;">通过 <code>window.location.search</code> </span><span style="font-size: 1.714285714285714rem;">字符串获取查询参数，存入对象 <code>oGetVars</code> </span><span style="font-size: 1.714285714285714rem;">中，并尝试识别参数类型</span><span style="font-size: 1.714285714285714rem;">（<font face="Courier New, Andale Mono, monospace">typeof</font></span><span style="font-size: 1.714285714285714rem;">）：</span></h3> + +<pre class="brush: js language-js">var oGetVars = {}; + +function buildValue(sValue) { + if (/^\s*$/.test(sValue)) { return null; } + if (/^(true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } // this conditional is unreliable in non-SpiderMonkey browsers + return sValue; +} + +if (window.location.search.length > 1) { + for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { + aItKey = aCouples[nKeyId].split("="); + oGetVars[unescape(aItKey[0])] = aItKey.length > 1 ? buildValue(unescape(aItKey[1])) : null; + } +} + +// alert(oGetVars.yourVar); +</pre> + +<p>同样可以通过一个匿名构造函数来获取，这样只声明了一个全局变量。</p> + +<pre class="brush: js language-js">var oGetVars = new (function (sSearch) { + var rNull = /^\s*$/, rBool = /^(true|false)$/i; + function buildValue(sValue) { + if (rNull.test(sValue)) { return null; } + if (rBool.test(sValue)) { return sValue.toLowerCase() === "true"; } + if (isFinite(sValue)) { return parseFloat(sValue); } + if (isFinite(Date.parse(sValue))) { return new Date(sValue); } + return sValue; + } + if (sSearch.length > 1) { + for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { + aItKey = aCouples[nKeyId].split("="); + this[unescape(aItKey[0])] = aItKey.length > 1 ? buildValue(unescape(aItKey[1])) : null; + } + } +})(window.location.search); + +// alert(oGetVars.yourVar); +</pre> + +<h3 id="例子9：不改变_window.location.hash_属性情况下使用书签">例子#9：不改变 <code>window.location.hash</code> 属性情况下使用书签</h3> + +<pre class="brush: html language-html"><!doctype html> +<html> +<head> +<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> +<title>MDN Example</title> +<script type="text/javascript"> +function showNode (oNode) { + var nLeft = 0, nTop = 0; + for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent); window.scrollTo(nLeft, nTop); } + +function showBookmark (sBookmark, bUseHash) { + if (arguments.length === 1 || bUseHash) { window.location.hash = sBookmark; return; } + var oBookmark = document.querySelector(sBookmark); + if (oBookmark) { showNode(oBookmark); } +} +</script> +<style type="text/css"> +span.intLink { + cursor: pointer; + color: #0000ff; + text-decoration: underline; +} +</style> +</head> + +<body> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> +<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p> +<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p> +<p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p> +<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> +<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> +<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p> +<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p> +<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p> +<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p> +<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p> +<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p> +<p id="myBookmark3"><em>Here is the bookmark #3</em></p> +<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p> +<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p> +<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p> +<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p> +<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p> +<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p> +<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p> +<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p> +<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p> +<p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p> +</body> +</html> +</pre> + +<div class="note"><strong>Note:</strong> The function <code>showNode</code> is also an example of the use of the <code><a href="https://developer.mozilla.org/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></code> cycle without a <code>statement</code>section. In this case <strong>a semicolon is always put immediately after the declaration of the cycle</strong>.</div> + +<p>下面代码做同样的事，但是页面滚动带有动画效果：</p> + +<pre class="brush: js language-js">var showBookmark = (function () { + var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, + /* + * nDuration: the duration in milliseconds of each frame + * nFrames: number of frames for each scroll + */ + nDuration = 200, nFrames = 10; + + function _next () { + if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; } + _isBot = true; + document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames); + document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames); + if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; } + _itFrame++; + } + + function _chkOwner () { + if (_isBot) { _isBot = false; return; } + if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; } + } + + if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); } + else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); } + + return function (sBookmark, bUseHash) { + _scrollY = document.documentElement.scrollTop; + _scrollX = document.documentElement.scrollLeft; + _bookMark = sBookmark; + _useHash = arguments.length === 1 || bUseHash; + for ( + var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark); + oNode; + nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent + ); + _nodeX = nLeft, _nodeY = nTop, _itFrame = 1; + if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); } + }; +})(); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.location")}}</p> + +<div id="compat-desktop"> </div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>The interface of the returned value, {{domxref("Location")}}.</li> + <li>A similar information, but attached to the browsing context, {{domxref("Document.location")}}</li> + <li><a href="https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/locationbar/index.html b/files/zh-cn/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..a1b3af3db5 --- /dev/null +++ b/files/zh-cn/web/api/window/locationbar/index.html @@ -0,0 +1,63 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +<div>{{APIRef}}</div> + +<h2 id="概要">概要</h2> + +<p>返回一个可以检查visibility属性的 <code>locationbar</code> 对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>objRef</var> = window.locationbar </pre> + +<h2 id="示例">示例</h2> + +<p>以下完整的HTML示例显示了使用locationbar对象的visible属性的方式.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="UTF-8" /> +<title>Various DOM Tests</title> + +<script> +var visible = window.locationbar.visible; +</script> + +</head> +<body> + <p>Various DOM Tests</p> +</body> +</html> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/matchmedia/index.html b/files/zh-cn/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..48abe41c6a --- /dev/null +++ b/files/zh-cn/web/api/window/matchmedia/index.html @@ -0,0 +1,102 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +<p>{{APIRef}}</p> + +<p>{{domxref("Window")}} 的<code><strong>matchMedia()</strong></code> 方法返回一个新的{{domxref("MediaQueryList")}} 对象，表示指定的<a href="/zh-CN/docs/CSS/Media_queries" title="CSS/Media queries">媒体查询</a>字符串解析后的结果。返回的<code>MediaQueryList</code> 可被用于判定{{domxref("Document")}}是否匹配媒体查询，或者监控一个<code>document</code> 来判定它匹配了或者停止匹配了此媒体查询。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre><em>mqList </em>= window.matchMedia(<em>mediaQueryString</em>) +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>mediaQueryString</code></dt> + <dd>一个被用于媒体查询解析的字符串。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个用来媒体查询的新的{{domxref("MediaQueryList")}}对象</p> + +<h2 id="使用说明">使用说明</h2> + +<p>您可以使用返回的媒体查询来执行即时检查和事件驱动检查，以查看文档是否与媒体查询匹配。</p> + +<p>要执行一次瞬时检查以查看文档是否与媒体查询匹配，请查看{{domxref("MediaQueryList.matches", "matches")}}属性的值，当document满足媒体查询条件的时候将会返回<code>true</code>。</p> + +<p>如果您需要始终了解document是否与媒体查询匹配，则可以查看将要传递给对象的{{domxref("MediaQueryList.change_event", "change")}} 事件 。{{domxref("Window.devicePixelRatio")}}上的文章中有一个很好的例子。</p> + +<h2 id="Example" name="Example">举例</h2> + +<p>此示例运行媒体查询<code>(max-width: 600px)</code>并在{{HTMLElement("span")}};中显示<code>MediaQueryList</code>的<code>matches</code>属性值。如果视口的宽度小于或等于600像素，则输出将为true，而如果窗口的宽度大于此宽度，则将输出false。</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre>let mql = window.matchMedia('(max-width: 600px)'); + +document.querySelector(".mq-value").innerText = mql.matches; +</pre> + +<p>JavaScript代码只需将要匹配的媒体查询字符串传递到{{domxref("Window.matchMedia", "matchMedia()")}}进行编译，然后设置<code><span></code>的{{domxref("HTMLElement.innerText", "innerText")}}为{{domxref("MediaQueryList.media", "matches")}}属性结果的值，以便它表明此document在此刻页面加载完成时是否与媒体查询所匹配。</p> + +<h3 id="HTML">HTML</h3> + +<pre><span class="mq-value"></span></pre> + +<p>一个简单的 <code><span></code> 来接收输出。</p> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre>.mq-value { + font: 18px arial, sans-serif; + font-weight: bold; + color: #88f; + padding: 0.4em; + border: 1px solid #dde; +} +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples", "100%", "60")}}</p> + +<p>参考更多的例子来 <a href="/zh-CN/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">通过代码使用媒体查询</a> 。</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器通用性</h2> + +<p>{{Compat("api.Window.matchMedia")}}</p> + +<h2 id="See_also" name="See_also"><span class="op_dict_text2">请参阅</span></h2> + +<ul> + <li><a href="/zh-CN/docs/CSS/Media_queries" title="CSS/Media queries">媒体查询</a></li> + <li><a href="/zh-CN/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">通过代码使用媒体查询</a></li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{domxref("MediaQueryListListener")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/menubar/index.html b/files/zh-cn/web/api/window/menubar/index.html new file mode 100644 index 0000000000..bfd99a1da9 --- /dev/null +++ b/files/zh-cn/web/api/window/menubar/index.html @@ -0,0 +1,57 @@ +--- +title: Window.menubar +slug: Web/API/Window/menubar +translation_of: Web/API/Window/menubar +--- +<p>{{ APIRef() }}</p> + +<h2 id="概要">概要</h2> + +<p>返回一个可以检测visibility属性的 <code>menubar</code> 对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="eval"><var>objRef</var> = window.menubar +</pre> + +<h2 id="示例">示例</h2> + +<p>以下完整的HTML示例显示了使用locationbar对象的visible属性的方式。</p> + +<pre class="brush:html"><html> +<head> + <title>Various DOM Tests</title> + <script> + var visible = window.menubar.visible; + </script> +</head> +<body> + <p>Various DOM Tests</p> +</body> +</html></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="相关链接">相关链接:</h2> + +<p><a href="/en/DOM/window.locationbar">window.locationbar</a>, <a href="/en/DOM/window.personalbar">window.personalbar</a>, <a href="/en/DOM/window.scrollbars">window.scrollbars</a>, <a href="/en/DOM/window.statusbar">window.statusbar</a>, <a href="/en/DOM/window.toolbar">window.toolbar</a></p> diff --git a/files/zh-cn/web/api/window/minimize/index.html b/files/zh-cn/web/api/window/minimize/index.html new file mode 100644 index 0000000000..64c28da15c --- /dev/null +++ b/files/zh-cn/web/api/window/minimize/index.html @@ -0,0 +1,6 @@ +--- +title: window.minimize +slug: Web/API/Window/minimize +translation_of: Web/API/Window/minimize +--- +<p>{{APIRef}}让当前浏览器窗口最小化(可以通过调用{{ domxref("window.moveTo()") }}方法让窗口恢复正常显示).</p> diff --git a/files/zh-cn/web/api/window/moveby/index.html b/files/zh-cn/web/api/window/moveby/index.html new file mode 100644 index 0000000000..3e1ad67e96 --- /dev/null +++ b/files/zh-cn/web/api/window/moveby/index.html @@ -0,0 +1,34 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +<div> + {{APIRef}}</div> +<h2 id="概述">概述</h2> +<p>根据指定的值，移动当前窗口。</p> +<h2 id="语法">语法</h2> +<pre class="syntaxbox">window.moveBy(<em>deltaX</em>, <em>deltaY</em>) +</pre> +<h3 id="参数">参数</h3> +<ul> + <li><code>deltaX</code> 表示窗口在水平方向移动的像素值。</li> + <li><code>deltaY</code> 表示窗口在垂直方向移动的像素值。</li> +</ul> +<h2 id="示例">示例</h2> +<pre class="brush:js">function budge() { + moveBy(10, -10); +}</pre> +<h2 id="备注">备注</h2> +<p>可以使用负值作为该函数的参数。该函数产生相对移动，而 {{domxref("window.moveTo")}} 产生一个绝对移动。</p> +<p>从 Firefox 7 开始，<span style="line-height: 1.5;">依据</span><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24" style="line-height: 1.5;">下面的规则</a><span style="line-height: 1.5;">，</span><span style="line-height: 1.5;">不能再移动一个浏览器里的窗口。</span></p> +<ol> + <li>不能移动非 window.open 创建的窗口或 Tab。</li> + <li>当一个窗口里有多于一个 Tab 时，不能移动该窗口。</li> +</ol> +<h2 id="规范">规范</h2> +<p>{{dom0}}</p> +<h2 id="相关链接">相关链接</h2> +<ul> + <li>{{domxref("window.moveTo")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/moveto/index.html b/files/zh-cn/web/api/window/moveto/index.html new file mode 100644 index 0000000000..b817540bc9 --- /dev/null +++ b/files/zh-cn/web/api/window/moveto/index.html @@ -0,0 +1,44 @@ +--- +title: window.moveTo +slug: Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +--- +<div>{{ApiRef}}</div> + +<h2 id="概述">概述</h2> + +<p>将当前窗口移动到指定的坐标位置。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">window.moveTo(<var>x</var>, <var>y</var>) +</pre> + +<h3 id="参数">参数</h3> + +<ul> + <li><code>x</code> 是要移动到的位置横坐标</li> + <li><code>y </code>是要移动到的位置纵坐标</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js notranslate">function origin() { + // 把窗口移动到左上角 + window.moveTo(0, 0); +}</pre> + +<h2 id="附注">附注</h2> + +<p>本函数按照指定的绝对位置移动当前窗口，而{{domxref("window.moveBy")}}函数按照与当前位置相对的距离移动当前窗口。</p> + +<p>从Firefox 7开始,如果符合<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">下列情况</a>,则普通网页中的JavaScript无法通过调用该函数来移动浏览器窗口</p> + +<ol> + <li>当前窗口或标签页不是由{{domxref("window.open")}}方法创建的</li> + <li>当前标签页所在的窗口包含有多个标签页</li> +</ol> + +<h2 id="规范">规范</h2> + +<p>{{dom0}}</p> diff --git a/files/zh-cn/web/api/window/mozanimationstarttime/index.html b/files/zh-cn/web/api/window/mozanimationstarttime/index.html new file mode 100644 index 0000000000..41666637e4 --- /dev/null +++ b/files/zh-cn/web/api/window/mozanimationstarttime/index.html @@ -0,0 +1,21 @@ +--- +title: window.mozAnimationStartTime +slug: Web/API/Window/mozAnimationStartTIme +translation_of: Web/API/Window/mozAnimationStartTime +--- +<p>{{ ApiRef() }}</p> +<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>Returns the time, in milliseconds since the epoch, at which animations started now should be considered to have started. This value should be used instead of, for example, <code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Date/now" title="zh-cn/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, because this value will be the same for all animations started in this window during this refresh interval, allowing them to remain in sync with one another.</p> +<p>This also allows JavaScript-based animations to remain synchronized with CSS transitions and SMIL animations triggered during the same refresh interval.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>time</em> = window.mozAnimationStartTime; +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p>不属于任何规范.</p> +<h3 id="相关链接">相关链接</h3> +<ul> + <li>{{ domxref("window.requestAnimationFrame()") }}</li> + <li>{{ domxref("window.onmozbeforepaint") }}</li> +</ul> +<p>{{ languages( { "en":"en/DOM/window.mozAnimationStartTime" } ) }}</p> diff --git a/files/zh-cn/web/api/window/mozinnerscreenx/index.html b/files/zh-cn/web/api/window/mozinnerscreenx/index.html new file mode 100644 index 0000000000..4f02d0da11 --- /dev/null +++ b/files/zh-cn/web/api/window/mozinnerscreenx/index.html @@ -0,0 +1,44 @@ +--- +title: Window.mozInnerScreenX +slug: Web/API/Window/mozInnerScreenX +tags: + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Window + - 参考 + - 属性 + - 接口 +translation_of: Web/API/Window/mozInnerScreenX +--- +<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div> + +<h2 id="概要">概要</h2> + +<p>在屏幕坐标中获取窗口视口左上角的X坐标</p> + +<div class="note"><strong>备注:</strong> 该坐标以CSS像素报告显示，而不是硬件像素。 这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量，需要使用<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a> 属性.</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>screenX</var> = window.mozInnerScreenX;</pre> + +<h2 id="值">值</h2> + +<ul> + <li><var>screenX</var> 存储的是<code>window.mozInnerScreenX的属性值。</code></li> + <li><code>window.mozInnerScreenX</code> 属性的值是一个浮点数, 只读; 它没有默认值。</li> +</ul> + +<h2 id="规范">规范</h2> + +<p>不属于任何W3C规范或标准.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("window.mozInnerScreenY")}}</li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/window/mozinnerscreeny/index.html b/files/zh-cn/web/api/window/mozinnerscreeny/index.html new file mode 100644 index 0000000000..f5b5aedb89 --- /dev/null +++ b/files/zh-cn/web/api/window/mozinnerscreeny/index.html @@ -0,0 +1,44 @@ +--- +title: Window.mozInnerScreenY +slug: Web/API/Window/mozInnerScreenY +tags: + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Window + - 参考 + - 属性 + - 接口 +translation_of: Web/API/Window/mozInnerScreenY +--- +<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div> + +<h2 id="概要">概要</h2> + +<p>在屏幕坐标下获取窗口视口左上角的Y坐标</p> + +<div class="note"><strong>备注:</strong>该坐标是以CSS像素报告显示的，而不是以硬件像素。 这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量，需要使用<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a> 属性</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>screenY</var> = window.mozInnerScreenY;</pre> + +<h2 id="值">值</h2> + +<ul> + <li><var>screenY</var> 存储的是 <code>window.mozInnerScreenY</code> 的属性值.</li> + <li> <code>window.mozInnerScreenY</code>的属性值是一个浮点数，只读;它没有默认值.</li> +</ul> + +<h2 id="规范">规范</h2> + +<p>不属于任何W3C规范或标准</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("window.mozInnerScreenX")}}</li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/window/mozpaintcount/index.html b/files/zh-cn/web/api/window/mozpaintcount/index.html new file mode 100644 index 0000000000..da91c15ba4 --- /dev/null +++ b/files/zh-cn/web/api/window/mozpaintcount/index.html @@ -0,0 +1,21 @@ +--- +title: Window.mozPaintCount +slug: Web/API/Window/mozPaintCount +translation_of: Web/API/Window/mozPaintCount +--- +<div>{{APIRef}} {{gecko_minversion_header("2.0")}}</div> + +<p>返回当前文档渲染到屏幕上所需的时间。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre> + +<ul> + <li><code><em>paintCount</em></code> 保存 <code>window.mozPaintCount</code> 属性值。</li> + <li><code>window.mozPaintCount</code> 的值是长整数, 文档是新建的时候从0开始, 每渲染一次增加1。</li> +</ul> + +<h2 id="Specification" name="Specification">说明</h2> + +<p>不是任何W3C技术规范或建议的一部分。</p> diff --git a/files/zh-cn/web/api/window/name/index.html b/files/zh-cn/web/api/window/name/index.html new file mode 100644 index 0000000000..820c916235 --- /dev/null +++ b/files/zh-cn/web/api/window/name/index.html @@ -0,0 +1,66 @@ +--- +title: Window.name +slug: Web/API/Window/name +tags: + - API + - NeedsUpdate + - 参考 + - 属性 +translation_of: Web/API/Window/name +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">获取/设置窗口的名称。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>string</var> = window.name; +window.name = <var>string</var>;</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">window.name = "lab_view";</pre> + +<h2 id="备注">备注</h2> + +<p>窗口的名字主要用于为超链接和表单设置目标（targets）。窗口不需要有名称。</p> + +<p>在某些框架里（如，<a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> 和 Dojo's <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> ，该属性也被用于作为 JSONP 的一个更安全的备选，来提供跨域通信（cross-domain messaging）。现代 web 应用应使用 <a href="/en-US/docs/Web/API/Window/postMessage">postMessage API</a> 进行敏感的跨域通信。</p> + +<p><code>window.name</code> 会调用 <code>toString</code> 将赋给它的值转换成对应的字符串表示。</p> + +<p>（译注：此处似有不妥，私以为调用的应是 <code>ToString</code> 抽象方法。事实上，如果将一个Symbol类型的值赋给 <code>window.name</code>，会报 <code>TypeError</code>，而非调用 <code>Symbol.toString()</code> 转换成字符串后进行赋值。例如：</p> + +<pre class="brush: js">window.name = Symbol.for('foo'); // TypeError +window.name = Symbol.for('foo').toString(); // "Symbol(foo)" +</pre> + +<p>具体可参见EMCA语言规范中Type Conversion一节。）</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>规范</td> + <td>状态</td> + <td>说明</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.name")}}</p> diff --git a/files/zh-cn/web/api/window/navigator/index.html b/files/zh-cn/web/api/window/navigator/index.html new file mode 100644 index 0000000000..0eaf8c6e51 --- /dev/null +++ b/files/zh-cn/web/api/window/navigator/index.html @@ -0,0 +1,94 @@ +--- +title: window.navigator +slug: Web/API/Window/navigator +tags: + - API + - Window + - 只读属性 + - 属性 +translation_of: Web/API/Window/navigator +--- +<div>{{ApiRef}}</div> + +<p>只读属性 <strong><code>Window.navigator</code></strong> 会返回一个 {{domxref("Navigator")}} 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>navigatorObject</em> = window.navigator</pre> + +<h2 id="例子">例子</h2> + +<h3 id="例子_1：检测浏览器并返回浏览器名称字符串">例子 #1：检测浏览器并返回浏览器名称字符串</h3> + +<pre class="brush: js">var sBrowser, sUsrAg = navigator.userAgent; + +// The order matters here, and this may report false positives for unlisted browsers. + +if (sUsrAg.indexOf("Firefox") > -1) { + sBrowser = "Mozilla Firefox"; + // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0" +} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) { + sBrowser = "Opera"; + //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106" +} else if (sUsrAg.indexOf("Trident") > -1) { + sBrowser = "Microsoft Internet Explorer"; + // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko" +} else if (sUsrAg.indexOf("Edge") > -1) { + sBrowser = "Microsoft Edge"; + // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299" +} else if (sUsrAg.indexOf("Chrome") > -1) { + sBrowser = "Google Chrome or Chromium"; + // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36" +} else if (sUsrAg.indexOf("Safari") > -1) { + sBrowser = "Apple Safari"; + // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306" +} else { + sBrowser = "unknown"; +} + +alert("当前浏览器为: " + sBrowser); +</pre> + +<h3 id="例子_2：检测浏览器并返回代表当前浏览器的索引数字">例子 #2：检测浏览器并返回代表当前浏览器的索引数字</h3> + +<pre class="brush: js">function getBrowserId () { + var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"], + sUsrAg = navigator.userAgent, + nIdx = aKeys.length - 1; + + for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--); + + return nIdx; +} + +console.log(getBrowserId());</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.navigator")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li></li></ul> diff --git a/files/zh-cn/web/api/window/offline_event/index.html b/files/zh-cn/web/api/window/offline_event/index.html new file mode 100644 index 0000000000..7b1886ceaa --- /dev/null +++ b/files/zh-cn/web/api/window/offline_event/index.html @@ -0,0 +1,63 @@ +--- +title: offline +slug: Web/API/Window/offline_event +translation_of: Web/API/Window/offline_event +--- +<p>当浏览器失去网络连接时，<code>offline</code>事件被触发。并且<code>navigator.onLine</code>的值变为 <code>false</code>。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt>规范</dt> + <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline" rel="noopener">HTML5 Offline</a></dd> + <dt>接口</dt> + <dd>Event</dd> + <dt>是否冒泡</dt> + <dd>否</dd> + <dt>可取消默认行为</dt> + <dd>否</dd> + <dt>目标对象</dt> + <dd>当前网页(<code><window></code>)</dd> + <dt>默认行为</dt> + <dd>无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否冒泡.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否可取消默认行为.</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/online"><code>online</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/window/onappinstalled/index.html b/files/zh-cn/web/api/window/onappinstalled/index.html new file mode 100644 index 0000000000..bbf2065738 --- /dev/null +++ b/files/zh-cn/web/api/window/onappinstalled/index.html @@ -0,0 +1,100 @@ +--- +title: Window.onappinstalled +slug: Web/API/Window/onappinstalled +translation_of: Web/API/Window/onappinstalled +--- +<div>{{APIRef}}</div> + +<p>{{domxref("Window")}} 对象的 <code><strong>onappinstalled</strong></code> 属性用于处理 {{Event("appinstalled")}} 事件，该事件是一个实现了 {{domxref("Event")}}接口的简单事件，会在网页应用成功安装为<a href="https://developer.mozilla.org/en-US/Apps/Progressive">渐进式网页应用</a>时立即触发。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.onappinstalled = function(event) { ... }; +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">window.onappinstalled = function(ev) { + console.log('The application was installed.'); +};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td> + <td>{{Spec2('Manifest')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<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>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(49)}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature is behind a feature preference setting. In about:config, set <code>dom.manifest.onappinstall</code> to <code>true</code>.</p> + +<h2 id="See_also" name="See_also">相关文章</h2> + +<ul> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html b/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html new file mode 100644 index 0000000000..e2243375f7 --- /dev/null +++ b/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html @@ -0,0 +1,118 @@ +--- +title: Window.onbeforeinstallprompt +slug: Web/API/Window/onbeforeinstallprompt +tags: + - Window.onbeforeinstallprompt + - beforeinstallprompt +translation_of: Web/API/Window/onbeforeinstallprompt +--- +<p>{{ ApiRef() }}</p> + +<p><code><strong>Window.onbeforeinstallprompt</strong></code> 属性是一个事件处理程序, 用于处理一个{{event("beforeinstallprompt")}}, 当一个Web清单存在时，它将在移动设备上发送，但是在提示用户将网站保存到主屏幕之前。</p> + +<h2 id="句法">句法</h2> + +<pre class="syntaxbox">window.addEventListener("beforeinstallprompt", function(event) { ... }); + +window.onbeforeinstallprompt = function(event) { ...};</pre> + +<h2 id="范例">范例</h2> + +<p>The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.</p> + +<pre class="brush: js">let isTooSoon = true; +window.addEventListener("beforeinstallprompt", function(e) { + if (isTooSoon) { + e.preventDefault(); // Prevents prompt display + // Prompt later instead: + setTimeout(function() { + isTooSoon = false; + e.prompt(); // Shows prompt + }, 10000); + } + + // The event was re-dispatched in response to our request + // ... +});</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45.0)}} [1]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(45.0)}} [1]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatChrome(45.0)}} [1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Behind the flagchrome://flags/#bypass-app-banner-engagement-checks</p> + +<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('Manifest', '#onbeforeinstallprompt-attribute', 'Window.onbeforeinstallprompt')}}</td> + <td>{{Spec2('Manifest')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li>{{domxref("BeforeInstallPromptEvent.prompt")}}</li> + <li>{{domxref("BeforeInstallPromptEvent")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/onbeforeunload/index.html b/files/zh-cn/web/api/window/onbeforeunload/index.html new file mode 100644 index 0000000000..78bed99eb9 --- /dev/null +++ b/files/zh-cn/web/api/window/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/window/ondevicelight/index.html b/files/zh-cn/web/api/window/ondevicelight/index.html new file mode 100644 index 0000000000..4997722c37 --- /dev/null +++ b/files/zh-cn/web/api/window/ondevicelight/index.html @@ -0,0 +1,105 @@ +--- +title: Window.ondevicelight +slug: Web/API/Window/ondevicelight +tags: + - 实验中 + - 属性 + - 引用 + - 接口 + - 环境光事件 +translation_of: Web/API/Window/ondevicelight +--- +<div>{{APIRef}}</div> + +<div>声明一个事件监听用以接收{{event("devicelight")}}事件。事件在设备的光传感器检测到周围环境光的强度发生变化时触发。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.ondevicelight = <var>funcRef</var></pre> + +<p>当{{event("devicelight")}}事件触发时，调用<code><em>funcRef</em></code>函数。这些事件皆为 {{domxref("DeviceLightEvent")}}事件类型。</p> + +<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('AmbientLight', '#event-handlers', 'Ambient Light Events')}}</td> + <td>{{Spec2('AmbientLight')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 事件{{event("devicelight")}} 的使用最先被实现应用在Android (15.0) 的移动端火狐浏览器和火狐操作系统(B2G)。从 Gecko 22.0 {{geckoRelease("22.0")}}开始，面向Mac OS X 的桌面应用也已实现。目前对Windows 7的支持还在进行中(详见 {{bug(754199)}})。</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{event("devicelight")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/ondevicemotion/index.html b/files/zh-cn/web/api/window/ondevicemotion/index.html new file mode 100644 index 0000000000..41cda848df --- /dev/null +++ b/files/zh-cn/web/api/window/ondevicemotion/index.html @@ -0,0 +1,57 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/ondevicemotion +tags: + - API + - Device Orientation + - Firefox OS + - Mobile + - Motion + - 移动端设备 +translation_of: Web/API/Window/ondevicemotion +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p>一个发送到窗口的{{ event("devicemotion")}}事件处理程序。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>window.ondevicemotion = funcRef; +</pre> + +<p>Where <code>funcRef</code> is a reference to a function. This function receives a {{ domxref("DeviceMotionEvent") }} object describing the motion that occurred.</p> + +<p>这里的<code>funcRef</code>是一个函数的引用。这个函数接收一个{{ domxref("DeviceMotionEvent") }} 对象类型的参数描述发生的动作。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Device Orientation')}}</td> + <td>{{Spec2('Device Orientation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{ event("devicemotion") }}</li> + <li>{{ domxref("DeviceMotionEvent") }}</li> + <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/ondeviceorientation/index.html b/files/zh-cn/web/api/window/ondeviceorientation/index.html new file mode 100644 index 0000000000..672cc0aaa3 --- /dev/null +++ b/files/zh-cn/web/api/window/ondeviceorientation/index.html @@ -0,0 +1,47 @@ +--- +title: Window.ondeviceorientation +slug: Web/API/Window/ondeviceorientation +translation_of: Web/API/Window/ondeviceorientation +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">简介</h2> + +<p>{{ event("deviceorientation") }}事件的事件处理程序，该事件包含了设备的相对旋转方向改变信息。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.ondeviceorientation = function(event) { ... }; +window.addEventListener('deviceorientation', function(event) { ... }); +</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('Device Orientation')}}</td> + <td>{{Spec2('Device Orientation')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p> + +<h2 id="更多资料">更多资料</h2> + +<ul> + <li>{{ event("deviceorientation") }}</li> + <li>{{ domxref("DeviceOrientationEvent") }}</li> + <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html b/files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html new file mode 100644 index 0000000000..b595d9852c --- /dev/null +++ b/files/zh-cn/web/api/window/ondeviceorientationabsolute/index.html @@ -0,0 +1,35 @@ +--- +title: Window.ondeviceorientationabsolute +slug: Web/API/Window/ondeviceorientationabsolute +translation_of: Web/API/Window/ondeviceorientationabsolute +--- +<p>{{ ApiRef() }}{{Non-standard_header}}</p> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p>An event handler for the {{ event("deviceorientationabsolute") }} event containing information about an absolute device orientation change.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.ondeviceorientationabsolute = function(event) { ... }; +window.addEventListener('deviceorientationabsolute', function(event) { ... }); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>This event handler is not currently part of any specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.ondeviceorientationabsolute")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ event("deviceorientation") }}</li> + <li>{{ domxref("DeviceOrientationEvent") }}</li> + <li>{{domxref("Window.ondeviceorientation","ondeviceorientation")}}</li> + <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/ondeviceproximity/index.html b/files/zh-cn/web/api/window/ondeviceproximity/index.html new file mode 100644 index 0000000000..df0a897b1c --- /dev/null +++ b/files/zh-cn/web/api/window/ondeviceproximity/index.html @@ -0,0 +1,93 @@ +--- +title: Window.ondeviceproximity +slug: Web/API/Window/ondeviceproximity +translation_of: Web/API/Window/ondeviceproximity +--- +<p>{{ ApiRef() }}</p> + +<p>指定一个事件监听器来接受 {{event("deviceproximity")}} 事件，当设备传感器检测到一个对象越来越接近或远离设备时这些事件就会出现。</p> + +<h2 id="语法">语法</h2> + +<pre>window.onuserproximity = <em>funcRef</em></pre> + +<p>其中funcRef是在发生 {{event("deviceproximity")}} 事件时要调用的函数。这些事件的类型为{{domxref("DeviceProximityEvent")}}。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Proximity Events', '#device-proximity', 'Proximity Events') }}</td> + <td>{{ Spec2('Proximity Events') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("deviceproximity")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity API</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/ondragdrop/index.html b/files/zh-cn/web/api/window/ondragdrop/index.html new file mode 100644 index 0000000000..4a99f9da30 --- /dev/null +++ b/files/zh-cn/web/api/window/ondragdrop/index.html @@ -0,0 +1,55 @@ +--- +title: Window.ondragdrop +slug: Web/API/Window/ondragdrop +translation_of: Web/API/Window/ondragdrop +--- +<div class="warning"> +<p>在Firefox 50中已删除，并且从未在任何其他浏览器中实行。 请改用现代标准的<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML5拖放</a>功能。</p> +</div> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p>一个事件处理程序，用于将拖放事件发送到窗口。</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>语法</strong></span></font></p> + +<pre class="eval notranslate"><s>window.ondragdrop = funcRef;</s> +window.addEventListener("dragdrop", funcRef, useCapturing); +</pre> + +<dl> + <dt>funcRef </dt> + <dd>要注册的事件处理函数。</dd> +</dl> + +<p><a href="/zh-CN/docs/Web/API/Window/en/Gecko">Gecko</a>({{ Bug(112288) }})中未实现<code>window.ondragdrop</code>属性和<code>ondragdrop</code>属性，您必须使用<code>addEventListener</code>。 有关详细信息，请参见<a href="/zh-CN/docs/Web/API/Window/en/DOM/element.addEventListener">addEventListener</a>。</p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>示例</strong></span></font></p> + +<h3 id="Fire_an_alert_on_dragdrop" name="Fire_an_alert_on_dragdrop">在拖放时触发alert</h3> + +<p>在此示例中，事件侦听器被添加到窗口（事件目标）。 如果从外部源将选项卡，链接，标记的文本或文件拖放到此窗口上，则会触发警报。 注意<code>event.stopPropagation()</code>; 阻止浏览器加载放置的标签，链接或文件。</p> + +<pre class="notranslate"><html> +<head><title>dragdroptest</title> + +<script type="text/javascript"> + +window.addEventListener("dragdrop", testfunc, false); + +function testfunc(event) { + alert("dragdrop!"); + event.stopPropagation(); +} +</script> + +</head> +<body> +I am bodytext +</body> +</html> +</pre> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 37.33327865600586px;"><strong>规范</strong></span></font></p> + +<p>不属于规范部分。<span class="external"> </span></p> diff --git a/files/zh-cn/web/api/window/ongamepadconnected/index.html b/files/zh-cn/web/api/window/ongamepadconnected/index.html new file mode 100644 index 0000000000..809fd1f1c7 --- /dev/null +++ b/files/zh-cn/web/api/window/ongamepadconnected/index.html @@ -0,0 +1,64 @@ +--- +title: Window.ongamepadconnected +slug: Web/API/Window/ongamepadconnected +tags: + - API + - Event Handler + - Experimental + - Gamepad API + - Property + - Reference + - Window + - gamepadconnected + - ongamepadconnected + - 手柄 + - 游戏 +translation_of: Web/API/Window/ongamepadconnected +--- +<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Window")}} 接口的 <strong><code>ongamepadconnected</code></strong> 属性是一个事件处理程序，它将在游戏手柄连接时运行 (即当 {{event('gamepadconnected')}} 事件触发时)。</p> + +<p>此方法响应的对象类型是 {{domxref("GamepadEvent")}}.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.ongamepadconnected = function() { ... }; +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// 手柄上所有的可用按键和手柄控制元件上各轴向数值都能在此获取</span> + event<span class="punctuation token">.</span>gamepad<span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Gamepad ', '#event-gamepadconnected', 'gamepadconnected event')}}</td> + <td>{{Spec2('Gamepad')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.ongamepadconnected")}}</p> + +<h2 id="相关知识">相关知识</h2> + +<ul> + <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li> + <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li> +</ul> diff --git a/files/zh-cn/web/api/window/ongamepaddisconnected/index.html b/files/zh-cn/web/api/window/ongamepaddisconnected/index.html new file mode 100644 index 0000000000..7712dd6066 --- /dev/null +++ b/files/zh-cn/web/api/window/ongamepaddisconnected/index.html @@ -0,0 +1,51 @@ +--- +title: Window.ongamepaddisconnected +slug: Web/API/Window/ongamepaddisconnected +translation_of: Web/API/Window/ongamepaddisconnected +--- +<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div> + +<p>The <strong><code>ongamepaddisconnected</code></strong> property of the {{domxref("Window")}} interface represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</p> + +<p>The event object is of type {{domxref("GamepadEvent")}}.</p> + +<h2 id="解析">解析</h2> + +<pre class="syntaxbox">window.ongamepaddisconnected = function() { ... }; +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// A gamepad has been disconnected</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Gamepad ', '#event-gamepaddisconnected', 'gamepaddisconnected event')}}</td> + <td>{{Spec2('Gamepad')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.ongamepaddisconnected")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li> + <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li> +</ul> diff --git a/files/zh-cn/web/api/window/onhashchange/index.html b/files/zh-cn/web/api/window/onhashchange/index.html new file mode 100644 index 0000000000..0c7f3ebefa --- /dev/null +++ b/files/zh-cn/web/api/window/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"><body onhashchange="funcRef();"></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/window/online_event/index.html b/files/zh-cn/web/api/window/online_event/index.html new file mode 100644 index 0000000000..ecaccec4f7 --- /dev/null +++ b/files/zh-cn/web/api/window/online_event/index.html @@ -0,0 +1,65 @@ +--- +title: online +slug: Web/API/Window/online_event +translation_of: Web/API/Window/online_event +--- +<p>当浏览器能够访问网络, 并且<code>navigator.online</code>的值被设为<code>true</code>时, <code>online</code>事件被触发.</p> + +<div class="note"><strong>注意:</strong> 该事件不能用来决定某个网站可否访问.网站自身问题或防火墙或GFW都依然有可能阻止该网站的访问.</div> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 Offline</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> + <dd style="margin: 0 0 0 120px;">当前网页(<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> +<tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否冒泡.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否可取消默认行为.</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/offline"><code>offline</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/window/onmouseup/index.html b/files/zh-cn/web/api/window/onmouseup/index.html new file mode 100644 index 0000000000..80ec093560 --- /dev/null +++ b/files/zh-cn/web/api/window/onmouseup/index.html @@ -0,0 +1,42 @@ +--- +title: window.onmouseup +slug: Web/API/Window/onmouseup +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>当前窗口的mouseup事件的事件句柄.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">window.onmouseup = <em>funcRef</em>; +</pre> +<h3 id="Parameters" name="Parameters">参数</h3> +<ul> + <li><code>funcRef</code> 是个函数引用</li> +</ul> +<h3 id="Example" name="Example">例子</h3> +<pre>window.onmouseup = doFunc; +</pre> +<pre><html> +<head> + +<title>onmouseup测试</title> + +<script type="text/javascript"> + +window.onmouseup = mouseup; + +function mouseup() +{ + alert("检测到mouseup事件!"); +} +</script> +</head> + +<body> +<p>在页面上按下鼠标中某个键,保持几秒后松开.mouseup事件会在你松开鼠标时触发</p> +</body> +</html> +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p>没有任何公开的标准</p> +<p>{{ languages( { "ja": "ja/DOM/window.onmouseup" ,"en": "en/DOM/window.onmouseup" } ) }}</p> diff --git a/files/zh-cn/web/api/window/onmozbeforepaint/index.html b/files/zh-cn/web/api/window/onmozbeforepaint/index.html new file mode 100644 index 0000000000..c5206502d7 --- /dev/null +++ b/files/zh-cn/web/api/window/onmozbeforepaint/index.html @@ -0,0 +1,38 @@ +--- +title: Window.onmozbeforepaint +slug: Web/API/Window/onmozbeforepaint +tags: + - API + - Property +translation_of: Web/API/Window/onmozbeforepaint +--- +<p>{{ ApiRef() }}</p> + +<p>{{ obsolete_header("11") }}{{ non-standard_header() }}</p> + +<div class="warning"><strong>警告:</strong> 这个非标准时间处理器在某些已发布版本中无法使用，而且已经在Gecko 11.0 中被移除{{ geckoRelease("11.0") }}。</div> + +<h3 id="Summary" name="Summary">摘要</h3> + +<p><code>MozBeforePaints</code> 事件的事件处理器. 这样做是为了保持和 {{ domxref("window.mozRequestAnimationFrame()") }}方法一致以期在JavaScript代码中提供流畅，同步的动画。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.onmozbeforepaint = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> 是处理器函数。</li> +</ul> + +<h3 id="Example" name="Example">例子</h3> + +<p>请查看{{ domxref("window.mozRequestAnimationFrame()") }}。</p> + +<h3 id="Notes" name="Notes">注意</h3> + +<p>这个事件会在浏览器重绘前立即触发，如果事件被一个或多个代码调用响应{{domxref("window.mozRequestAnimationFrame()") }}。事件处理器会接收到一个事件作为输入参数，其 <code>timeStamp</code> 属性为UTC起始到现在的毫秒数字，这是当前动画帧的“当前时间”。这个时间对于所有在相同浏览器窗口运行的，包括哪些用了 {{ domxref("window.mozRequestAnimationFrame()") }} 方法，<a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>, 和 SMIL animations的都是一样的。</p> + +<h3 id="Specification" name="Specification">说明</h3> + +<p>没有特别的说明。</p> diff --git a/files/zh-cn/web/api/window/onpaint/index.html b/files/zh-cn/web/api/window/onpaint/index.html new file mode 100644 index 0000000000..3422b02f71 --- /dev/null +++ b/files/zh-cn/web/api/window/onpaint/index.html @@ -0,0 +1,31 @@ +--- +title: Window.onpaint +slug: Web/API/Window/onpaint +translation_of: Web/API/Window/onpaint +--- +<p>{{ ApiRef() }}</p> + +<p id="comment_text_2">{{Non-standard_header}}</p> + +<h2 id="Summary" name="Summary">总结</h2> + +<p>window中的paint事件处理，目前在Gecko-based（火狐）应用中不被支持，参见【注意事项】部分的说明。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">window.onpaint =<em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> 是处理函数.</li> +</ul> + +<h2 id="Notes" name="Notes">注意事项</h2> + +<p><code>onpaint</code> 现在没有生效，并且这个事件是否会生效也是一个问题，参见{{Bug(239074)}}.</p> + +<p>window渲染时paint事件会触发。此事件在window的load事件之后触发，并且每次window需要重绘时都会再次触发，当另一个window出现使原先的window不处于激活状态时，原window的onpaint事件则被清理。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p id="comment_text_2">不是任何规范的一部分.</p> diff --git a/files/zh-cn/web/api/window/onpopstate/index.html b/files/zh-cn/web/api/window/onpopstate/index.html new file mode 100644 index 0000000000..6efc1ec835 --- /dev/null +++ b/files/zh-cn/web/api/window/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/window/onscroll/index.html b/files/zh-cn/web/api/window/onscroll/index.html new file mode 100644 index 0000000000..3d6a7bfdb6 --- /dev/null +++ b/files/zh-cn/web/api/window/onscroll/index.html @@ -0,0 +1,53 @@ +--- +title: window.onscroll +slug: Web/API/Window/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>为当前页面的页面滚动事件添加事件处理函数.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">window.onscroll = <em>funcRef</em>; +</pre> +<ul> + <li><code>funcRef</code> 是个函数类型的对象引用或者匿名函数.</li> +</ul> +<h3 id="Example" name="Example">例子</h3> +<pre class="brush: js">window.onscroll = function (e) { + // 当页面的滚动条滚动时,会执行这里的代码 +} +</pre> +<pre class="brush: html"><html> +<head> + +<title>onscroll test</title> + +<script type="text/javascript"> + +window.onscroll = scroll; + +function scroll() +{ + alert("检测到页面滚动事件:"+window.pageXOffset+" "+window.pageYOffset); + // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高. +} +</script> +</head> + +<body> +<p>Resize the window</p> +<p>to a very small size,</p> +<p>and use the scrollbars</p> +<p>to move around the page content</p> +<p>in the window.</p> +</body> +</html> +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p>{{ Bug("189308") }}, 在旧版本的Gecko中(Gecko 1.8/Firefox 1.5之前), scroll 事件只会在用户拖动滚动条时发生,使用方向键和鼠标滚轮滚动页面则不会触发该事件.</p> +<p>当 window.scrollX/scrollY 不为 0时,意味着用户或者网页脚本已经执行了窗口的滚动行为.</p> +<h3 id="Specification" name="Specification">规范</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/window.onscroll"} ) }}</p> diff --git a/files/zh-cn/web/api/window/onunload/index.html b/files/zh-cn/web/api/window/onunload/index.html new file mode 100644 index 0000000000..5e766c1d67 --- /dev/null +++ b/files/zh-cn/web/api/window/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"><html> +<head> + +<title>onunload test</title> + +<script type="text/javascript"> + +window.onunload = unloadPage; + +function unloadPage() +{ + alert("unload event detected!"); +} +</script> +</head> + +<body> +<p>Reload a new page into the browser<br /> + to fire the unload event for this page.</p> +<p>You can also use the back or forward buttons<br /> + to load a new page and fire this event.</p> +</body> +</html> + +</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> diff --git a/files/zh-cn/web/api/window/onuserproximity/index.html b/files/zh-cn/web/api/window/onuserproximity/index.html new file mode 100644 index 0000000000..9a4c3a0c7c --- /dev/null +++ b/files/zh-cn/web/api/window/onuserproximity/index.html @@ -0,0 +1,45 @@ +--- +title: Window.onuserproximity +slug: Web/API/Window/onuserproximity +translation_of: Web/API/Window/onuserproximity +--- +<p>{{ ApiRef() }}</p> + +<p><strong><code>Window.onuserproxymity</code></strong> 属性代表一个 {{domxref("EventHandler")}}, 当触发 {{event("userproximity")}} 事件时会调用这个函数。这些事件是 {{domxref("UserProximityEvent")}} 类型的，在设备传感器检测到对象变得靠近时触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>window</em>.onuserproximity = <em>eventHandler</em></pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}</td> + <td>{{ Spec2('Proximity Events') }}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">这个页面上的兼容性表格是根据结构化数据生成的，如果你想要贡献数据，请前往 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 给我们提交pull request.</div> + +<p>{{Compat("api.Window.onuserproximity")}}</p> + +<h2 id="其他">其他</h2> + +<ul> + <li>{{event("userproximity")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li><a href="/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity Events</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/open/index.html b/files/zh-cn/web/api/window/open/index.html new file mode 100644 index 0000000000..3080abb470 --- /dev/null +++ b/files/zh-cn/web/api/window/open/index.html @@ -0,0 +1,686 @@ +--- +title: Window.open() +slug: Web/API/Window/open +tags: + - API + - DOM + - NeedsUpdate + - Window + - 参考 + - 方法 +translation_of: Web/API/Window/open +--- +<div>{{APIRef}}</div> + +<p><code>Window</code> 接口的 <strong><code>open()</code></strong> 方法，是用指定的名称将指定的资源加载到浏览器上下文（窗口 <code>window</code> ，内嵌框架 <code>iframe</code> 或者标签 <code>tab</code> ）。如果没有指定名称，则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox" style="font-size: 14px; white-space: normal;"><code> +</code>let <var>windowObjectReference</var> = window.open(<var>strUrl</var>, <var>strWindowName</var>, [<var>strWindowFeatures</var>]);</pre> + +<div class="note"> +<p class="syntaxbox" style="font-size: 14px; white-space: normal;"><var>strUrl === </var>要在新打开的窗口中加载的URL。</p> + +<p class="syntaxbox" style="font-size: 14px; white-space: normal;"><var>strWindowName === </var>新窗口的名称。</p> + +<p class="syntaxbox" style="font-size: 14px; white-space: normal;"><var>strWindowFeatures === </var>一个可选参数，列出新窗口的特征(大小，位置，滚动条等)作为一个{{domxref("DOMString")}}。</p> +</div> + +<p class="syntaxbox" style="font-size: 14px; white-space: normal;"></p> + +<h2 id=".E5.8F.82.E6.95.B0.E4.B8.8E.E8.BF.94.E5.9B.9E.E5.80.BC" name=".E5.8F.82.E6.95.B0.E4.B8.8E.E8.BF.94.E5.9B.9E.E5.80.BC">参数与返回值</h2> + +<dl> + <dt><code>WindowObjectReference</code></dt> + <dd>打开的新窗口对象的引用。如果调用失败，返回值会是 <code>null 。如果</code>父子窗口满足“<a class="internal" href="/cn/JavaScript%E7%9A%84%E5%90%8C%E6%BA%90%E7%AD%96%E7%95%A5" title="cn/JavaScript的同源策略">同源策略</a>”，你可以通过这个引用访问新窗口的属性或方法。</dd> +</dl> + +<dl> + <dt><code>strUrl</code></dt> + <dd>新窗口需要载入的url地址。<var>strUrl</var>可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。</dd> +</dl> + +<dl> + <dt><code>strWindowName</code></dt> + <dd>新窗口的名称。该字符串可以用来作为超链接 {{HTMLElement("a")}} 或表单 {{HTMLElement("form")}} 元素的目标属性值。字符串中不能含有空白字符。注意：<var>strWindowName</var> 并不是新窗口的标题。</dd> +</dl> + +<dl> + <dt><code>strWindowFeatures</code></dt> + <dd>可选参数。是一个字符串值，这个值列出了将要打开的窗口的一些特性(窗口功能和工具栏) 。 字符串中不能包含任何空白字符，特性之间用逗号分隔开。参考下文的<a href="#Position and size features">位置和尺寸特征</a>。</dd> +</dl> + +<h2 id=".E8.AF.B4.E6.98.8E" name=".E8.AF.B4.E6.98.8E">说明</h2> + +<p><code>open()</code> 方法，创建一个新的浏览器窗口对象，如同使用文件菜单中的新窗口命令一样。<var>strUrl</var> 参数指定了该窗口将会打开的地址。如果<var>strUrl</var> 是一个空值，那么打开的窗口将会是带有默认工具栏的空白窗口（加载<code>about:blank</code>）。</p> + +<p>注意：调用<code>window.open()</code>方法以后，远程 URL 不会被立即载入，载入过程是异步的。（实际加载这个URL的时间推迟到当前脚本块执行结束之后。窗口的创建和相关资源的加载异步地进行。）</p> + +<h2 id=".E4.BE.8B.E5.AD.90" name=".E4.BE.8B.E5.AD.90">例子</h2> + +<pre><code>let windowObjectReference; +let strWindowFeatures = ` + menubar=yes, + location=yes, + resizable=yes, + scrollbars=yes, + status=yes +`; + +function openRequestedPopup() { + windowObjectReference = + window.open( + "http://www.cnn.com/", + "CNN_WindowName", + strWindowFeatures + ); +}</code></pre> + +<pre>let WindowObjectReference; + +const openRequestedPopup = () => { + windowObjectReference = window.open( + "https://www.domainname.ext/path/ImageFile.png", + "DescriptiveWindowName", + "resizable,scrollbars,status" + ); +} +</pre> + +<p>如果已经存在以 <var>strWindowName</var> 为名称的窗口，则不再打开一个新窗口，而是把 <var>strUrl</var> 加载到这个窗口中。在这种情况下，方法的返回值是这个已经打开的窗口，并忽略参数 <var>strWindowFeatures</var> 。<em>strUrl</em>设为空字符串时，可以在不改变窗口地址的情况下获得一个已经打开的同名窗口的引用。如果要在每次调用 <code>window.open()</code>时都打开一个新窗口，则要把参数 <var>strWindowName</var> 设置为 <code>_blank</code>。</p> + +<p><var>strWindowFeatures</var> 是一个可选的字符串，包含了新窗口的一组用逗号分割的特性，在窗口打开之后，就不能用JavaScript改变窗口的功能和工具栏的设置。如果名称是 <var>strWindowName</var> 的窗口不存在并且又没有提供 <var>strWindowFeatures</var> 参数（或者 <var>strWindowFeatures</var> 参数为空字符串），则子窗口以父窗口默认的工具栏渲染。</p> + +<p>如果 <var>strWindowFeatures</var> 参数中没有定义窗口大小，则新窗口的尺寸跟最近渲染的窗口尺寸一样。</p> + +<p>如果 <var>strWindowFeatures</var> 参数中没有定义窗口位置，则新窗口显示在最近渲染的窗口的坐标偏移22个像素的位置。这种新窗口偏移量的做法被浏览器开发商广泛地实现（MSIE 6 SP2在默认主题下的偏移量是29个像素），目的是提醒用户注意有新的窗口打开。如果最近使用的窗口是最大化的，则没有这22像素的偏移，新（子）窗口也会被最大化。</p> + +<p><strong>如果你定义了 <var>strWindowFeatures</var> 参数，那么没有在这个字符串中列出的特性会被禁用或移除</strong> （除了 <var>titlebar</var> 和 <var>close</var> 默认设置为yes）</p> + +<div class="note"> +<p><strong>提示</strong>: 如果你使用了 <var>strWindowFeatures</var> 参数，那么只需要列出新窗口中启用的特性，其它的特性（除了<em>titlebar</em>和<em>close</em>）将被禁用或移除。</p> +</div> + +<p><img alt="Firefox Chrome Toolbars Illustration" src="https://developer.mozilla.org/@api/deki/files/210/=FirefoxChromeToolbarsDescription7a.gif" style="border: 1px dotted green;"></p> + +<h2 id="Position_and_size_features" name="Position_and_size_features"><a id="Position and size features" name="Position and size features">位置尺寸特征</a></h2> + +<h3 id="Position_and_size_features" name="Position_and_size_features"></h3> + +<div>{{gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. That means the next time the window is opened, it will still open in the saved location.")}}</div> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></p> + +<div class="bug">{{bug(176320)}}</div> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_precedence">Note on precedence</a></p> + +<dl> + <dt id="left">left</dt> + <dd>Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="https://developer.mozilla.org/@api/deki/files/288/=Opera6.gif"></dd> + <dt id="top">top</dt> + <dd>Specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="https://developer.mozilla.org/@api/deki/files/288/=Opera6.gif"></dd> + <dt id="height">height</dt> + <dd>Specifies the height of the content area, viewing area of the new secondary window in pixels. The height value includes the height of the horizontal scrollbar if present. The minimum required value is 100.</dd> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="https://developer.mozilla.org/@api/deki/files/288/=Opera6.gif"></dd> + <dt id="width">width</dt> + <dd>Specifies the width of the content area, viewing area of the new secondary window in pixels. The width value includes the width of the vertical scrollbar if present. The width value does not include the sidebar if it is expanded. The minimum required value is 100.</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="https://developer.mozilla.org/@api/deki/files/288/=Opera6.gif"></dd> + <dt>screenX</dt> + <dd>Deprecated. Same as <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#left">left</a> but only supported by Netscape and Mozilla-based browsers.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>screenY</dt> + <dd>Deprecated. Same as <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#topS">top</a> but only supported by Netscape and Mozilla-based browsers.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>centerscreen</dt> + <dd>Centers the window in relation to its parent's size and position. Requires chrome=yes.</dd> + <dt>outerHeight</dt> + <dd>Specifies the height of the whole browser window in pixels. This outerHeight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. Minimal required value is 100.</dd> + <dd><strong>Note</strong>: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.</dd> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>outerWidth</dt> + <dd>Specifies the width of the whole browser window in pixels. This outerWidth value includes the window vertical scrollbar (if present) and left and right window resizing borders.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>innerHeight</dt> + <dd>Same as <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#height">height</a> but only supported by Netscape and Mozilla-based browsers. Specifies the height of the content area, viewing area of the new secondary window in pixels. The <var>innerHeight</var> value includes the height of the horizontal scrollbar if present. Minimal required value is 100.</dd> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>innerWidth</dt> + <dd>Same as <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#width">width</a> but only supported by Netscape and Mozilla-based browsers. Specifies the width of the content area, viewing area of the new secondary window in pixels. The innerWidth value includes the width of the vertical scrollbar if present. The innerWidth value does not include the sidebar if it is expanded. Minimal required value is 100.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> +</dl> + +<h3 id="Toolbar_and_chrome_features" name="Toolbar_and_chrome_features">Toolbar and chrome features</h3> + +<dl> + <dt>NOTE: All features can be set to yes, 1 or just be present to be "on", set to <em>no</em> or<em> 0 </em>or in most cases just not present to be "off"</dt> + <dd>example "status=yes", "status=1" and "status" have identical results</dd> + <dt></dt> + <dt>menubar</dt> + <dd>If this feature is on, then the new secondary window renders the menubar.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the menubar by setting <code>dom.disable_window_open_feature.menubar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>toolbar</dt> + <dd>If this feature is on, then the new secondary window renders the Navigation Toolbar (Back, Forward, Reload, Stop buttons). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window. (If this feature is set to <var>no</var> all toolbars in the window will be invisible, for example extension toolbars).</dd> + <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting <code>dom.disable_window_open_feature.toolbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>location</dt> + <dd>If this feature is on, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting <code>dom.disable_window_open_feature.location</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. {{Fx_minversion_note(3, "In Firefox 3, <code>dom.disable_window_open_feature.location</code> now defaults to <var>true</var>, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="https://developer.mozilla.org/@api/deki/files/288/=Opera6.gif"></dd> + <dt>personalbar</dt> + <dd>If this feature is on, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting <code>dom.disable_window_open_feature.personalbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>directories {{obsolete_inline("2")}}</dt> + <dd>Obsolete synonym of personalbar. In IE, it rendered the Links bar. Supported in Gecko up to 1.9.2 and in IE up to 6.</dd> + <dt>status</dt> + <dd>If this feature is on, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.</dd> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_status_bar">Note on status bar</a></dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> +</dl> + +<h3 id="Window_functionality_features" name="Window_functionality_features">Window functionality features</h3> + +<dl> + <dt></dt> + <dt>attention {{NonStandardBadge}}</dt> + <dd>If this feature is specified, the window is able to open even if another application is already in the foreground. This feature is for Firefox OS applications only, and is currently restricted to certified applications. See {{SectionOnPage("/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions", "Internal (Certified) app permissions")}} for more information.</dd> + <dd>Supported in: <img alt="" src="https://mdn.mozillademos.org/files/8003/firefox_os_logo_wordmark-75px.png" style="height: 25px; width: 83px;"></dd> + <dt>dependent</dt> + <dd>If on, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.</dd> + <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd> + <dd>The dependent feature is currently under revision to be removed ({{Bug(214867)}})</dd> + <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>dialog</dt> + <dd><span class="float-right"><a href="https://developer.mozilla.org/@api/deki/files/268/=MenuSystemCommands.png" title="MenuSystemCommands.png"><img alt="MenuSystemCommands.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/268/=MenuSystemCommands.png?size=webview" style="float: left; height: 170px; width: 170px;"></a></span>The <code>dialog</code> feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>minimizable</dt> + <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and <code>minimizable=no</code> will be ignored.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>fullscreen</dt> + <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd> + <dd>This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.</dd> + <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_fullscreen">Note on fullscreen</a></dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png"></dd> + <dd><code>fullscreen</code> does not really work in MSIE 6 SP2.</dd> + <dt>resizable</dt> + <dd>If this feature is on, the new secondary window will be resizable.</dd> + <dd><strong>Note</strong>: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar. + <p>Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})</p> + + <div class="note"> + <p><strong>Tip</strong>: For accessibility reasons, it is strongly recommended to set this feature always on</p> + </div> + </dd> + <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting<br> + <code>dom.disable_window_open_feature.resizable</code><br> + to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>scrollbars</dt> + <dd>If this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport. + <div class="note"> + <p><strong>Tip</strong>: For accessibility reasons, it is strongly encouraged to set this feature always on.</p> + </div> + </dd> + <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting<br> + <code>dom.disable_window_open_feature.scrollbars</code><br> + to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Note_on_scrollbars">Note on scrollbars</a></dd> + <dd>Supported in: <img alt="Internet Explorer 5+" src="https://developer.mozilla.org/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> +</dl> + +<h3 id="Features_requiring_privileges" name="Features_requiring_privileges">Features requiring privileges</h3> + +<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.</p> + +<dl> + <dt>chrome</dt> + <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(244965)}}). Without this privilege, it is ignored.</dd> + <dd>If on, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>modal</dt> + <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(180048)}}). Without this privilege, it is ignored.</dd> + <dd>If on, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert() function</a>.</dd> + <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version. + <div class="note"> + <p><strong>Note:</strong> As of {{Gecko("1.9")}}, the Internet Explorer equivalent to this feature is the {{domxref("window.showModalDialog()")}} method. For compatibility reasons, it's now supported in Firefox. Note also that starting in {{Gecko("2.0")}}, you can use {{domxref("window.showModalDialog()")}} without UniversalBrowserWrite privileges.</p> + </div> + </dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>titlebar</dt> + <dd>By default, all new secondary windows have a titlebar. If set to <var>no or 0</var>, this feature removes the titlebar from the new secondary window.</dd> + <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br> + <code>dom.disable_window_open_feature.titlebar</code><br> + to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>alwaysRaised</dt> + <dd>If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>alwaysLowered</dt> + <dd>If on, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> + <dt>z-lock</dt> + <dd>Same as <code>alwaysLowered</code>.</dd> + <dt>close</dt> + <dd>When set to <var>no or 0</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd> + <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br> + <code>dom.disable_window_open_feature.close</code><br> + to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> + <dd>Supported in: <img alt="Netscape 6.x" src="https://developer.mozilla.org/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="https://developer.mozilla.org/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="https://developer.mozilla.org/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="https://developer.mozilla.org/@api/deki/files/200/=FF1x.png"></dd> +</dl> + +<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the <var>features</var> string. If you supply the <var>features</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p> + +<p>Example:</p> + +<pre class="brush:js language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span><span class="comment token"> // global variable +</span> +<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span> + <span class="string token">"http://www.domainname.ext/path/ImgFile.png"</span><span class="punctuation token">,</span> + <span class="string token">"DescriptiveWindowName"</span><span class="punctuation token">,</span> + <span class="string token">"width=420,height=230,resizable,scrollbars=yes,status=1"</span> + <span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="line-number" style="top: 0px;"></div> + +<p>In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.</p> + +<h2 id="Best_practices" name="Best_practices">Best practices</h2> + +<pre class="brush:js language-js"><code class="language-js"><span class="operator token"><</span>script type<span class="operator token">=</span><span class="string token">"text/javascript"</span><span class="operator token">></span> +<span class="keyword token">var</span> windowObjectReference <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span><span class="comment token"> // global variable +</span> +<span class="keyword token">function</span> <span class="function token">openFFPromotionPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>windowObjectReference <span class="operator token">==</span> <span class="keyword token">null</span> <span class="operator token">||</span> windowObjectReference<span class="punctuation token">.</span>closed<span class="punctuation token">)</span> + <span class="comment token">/* if the pointer to the window object in memory does not exist + or if such pointer exists but the window was closed */</span> + + <span class="punctuation token">{</span> + windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"http://www.spreadfirefox.com/"</span><span class="punctuation token">,</span> + <span class="string token">"PromoteFirefoxWindowName"</span><span class="punctuation token">,</span> <span class="string token">"resizable,scrollbars,status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">/* then create it. The new window will be created and + will be brought on top of any other window. */</span> + <span class="punctuation token">}</span> + <span class="keyword token">else</span> + <span class="punctuation token">{</span> + windowObjectReference<span class="punctuation token">.</span><span class="function token">focus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">/* else the window reference must exist and the window + is not closed; therefore, we can bring it back on top of any other + window with the focus() method. There would be no need to re-create + the window or to reload the referenced resource. */</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span> + +<span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">)</span> + +<span class="operator token"><</span>p<span class="operator token">></span><span class="operator token"><</span>a + href<span class="operator token">=</span><span class="string token">"http://www.spreadfirefox.com/"</span> + target<span class="operator token">=</span><span class="string token">"PromoteFirefoxWindowName"</span> + onclick<span class="operator token">=</span><span class="string token">"openFFPromotionPopup(); return false;"</span> + title<span class="operator token">=</span><span class="string token">"This link will create a new window or will re-use an already opened one"</span> +<span class="operator token">></span>Promote Firefox adoption<span class="operator token"><</span><span class="operator token">/</span>a<span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>p<span class="operator token">></span></code></pre> + +<div class="line-number" style="top: 0px;"></div> + +<div class="line-number" style="top: 608px;"></div> + +<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".</p> + +<p>More reading on the use of the target attribute:</p> + +<p><a href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p> + +<p><a href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p> + +<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p> + +<pre class="brush:js language-js"><code class="language-js"><span class="operator token"><</span>script type<span class="operator token">=</span><span class="string token">"text/javascript"</span><span class="operator token">></span> +<span class="keyword token">var</span> windowObjectReference <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span><span class="comment token"> // global variable +</span> +<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span>strUrl<span class="punctuation token">,</span> strWindowName<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>windowObjectReference <span class="operator token">==</span> <span class="keyword token">null</span> <span class="operator token">||</span> windowObjectReference<span class="punctuation token">.</span>closed<span class="punctuation token">)</span> <span class="punctuation token">{</span> + windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>strUrl<span class="punctuation token">,</span> strWindowName<span class="punctuation token">,</span> + <span class="string token">"resizable,scrollbars,status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + windowObjectReference<span class="punctuation token">.</span><span class="function token">focus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span> + +<span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">)</span> + +<span class="operator token"><</span>p<span class="operator token">></span><span class="operator token"><</span>a + href<span class="operator token">=</span><span class="string token">"http://www.spreadfirefox.com/"</span> + target<span class="operator token">=</span><span class="string token">"PromoteFirefoxWindow"</span> + onclick<span class="operator token">=</span><span class="string token">"openRequestedPopup(this.href, this.target); return false;"</span> + title<span class="operator token">=</span><span class="string token">"This link will create a new window or will re-use an already opened one"</span> +<span class="operator token">></span>Promote Firefox adoption<span class="operator token"><</span><span class="operator token">/</span>a<span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>p<span class="operator token">></span></code> +</pre> + +<div class="line-number" style="top: 380px;"></div> + +<p>You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:</p> + +<pre class="brush:js language-js"><code class="language-js"><span class="operator token"><</span>script type<span class="operator token">=</span><span class="string token">"text/javascript"</span><span class="operator token">></span> +<span class="keyword token">var</span> windowObjectReference <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span><span class="comment token"> // global variable +</span><span class="keyword token">var</span> PreviousUrl<span class="punctuation token">;</span> <span class="comment token">/* global variable which will store the + url currently in the secondary window */</span> + +<span class="keyword token">function</span> <span class="function token">openRequestedSinglePopup<span class="punctuation token">(</span></span>strUrl<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>windowObjectReference <span class="operator token">==</span> <span class="keyword token">null</span> <span class="operator token">||</span> windowObjectReference<span class="punctuation token">.</span>closed<span class="punctuation token">)</span> <span class="punctuation token">{</span> + windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>strUrl<span class="punctuation token">,</span> <span class="string token">"SingleSecondaryWindowName"</span><span class="punctuation token">,</span> + <span class="string token">"resizable,scrollbars,status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span><span class="punctuation token">(</span>PreviousUrl <span class="operator token">!</span><span class="operator token">=</span> strUrl<span class="punctuation token">)</span> <span class="punctuation token">{</span> + windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>strUrl<span class="punctuation token">,</span> <span class="string token">"SingleSecondaryWindowName"</span><span class="punctuation token">,</span> + <span class="string token">"resizable=yes,scrollbars=yes,status=yes"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="comment token">/* if the resource to load is different, + then we load it in the already opened secondary window and then + we bring such window back on top/in front of its parent window. */</span> + windowObjectReference<span class="punctuation token">.</span><span class="function token">focus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + windowObjectReference<span class="punctuation token">.</span><span class="function token">focus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + PreviousUrl <span class="operator token">=</span> strUrl<span class="punctuation token">;</span> + <span class="comment token">/* explanation: we store the current url in order to compare url + in the event of another call of this function. */</span> +<span class="punctuation token">}</span> +<span class="operator token"><</span><span class="operator token">/</span>script<span class="operator token">></span> + +<span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">)</span> + +<span class="operator token"><</span>p<span class="operator token">></span><span class="operator token"><</span>a + href<span class="operator token">=</span><span class="string token">"http://www.spreadfirefox.com/"</span> + target<span class="operator token">=</span><span class="string token">"SingleSecondaryWindowName"</span> + onclick<span class="operator token">=</span><span class="string token">"openRequestedSinglePopup(this.href); return false;"</span> + title<span class="operator token">=</span><span class="string token">"This link will create a new window or will re-use an already opened one"</span> +<span class="operator token">></span>Promote Firefox adoption<span class="operator token"><</span><span class="operator token">/</span>a<span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>p<span class="operator token">></span> + +<span class="operator token"><</span>p<span class="operator token">></span><span class="operator token"><</span>a + href<span class="operator token">=</span><span class="string token">"http://www.mozilla.org/support/firefox/faq"</span> + target<span class="operator token">=</span><span class="string token">"SingleSecondaryWindowName"</span> + onclick<span class="operator token">=</span><span class="string token">"openRequestedSinglePopup(this.href); return false;"</span> + title<span class="operator token">=</span><span class="string token">"This link will create a new window or will re-use an already opened one"</span> +<span class="operator token">></span>Firefox FAQ<span class="operator token"><</span><span class="operator token">/</span>a<span class="operator token">></span><span class="operator token"><</span><span class="operator token">/</span>p<span class="operator token">></span></code> +</pre> + +<h2 id="FAQ" name="FAQ">FAQ</h2> + +<dl> + <dt>How can I prevent the confirmation message asking the user whether he wants to close the window?</dt> + <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd> + <dd><a href="https://developer.mozilla.org/en-US/docs/DOM/window.close" title="DOM/window.close">More on the window.close()</a> method</dd> + <dt>How can I bring back the window if it is minimized or behind another window?</dt> + <dd>First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.focus" title="DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open$edit#Best_practices">example explaining how to use the focus() method</a>.</dd> + <dt>How do I force a maximized window?</dt> + <dd>You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.</dd> + <dt>How do I turn off window resizability or remove toolbars?</dt> + <dd>You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in <code>about:config</code>. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.</dd> + <dt>How do I resize a window to fit its content?</dt> + <dd>You can not reliably because the users can prevent the window from being resized by unchecking the <code>Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows</code> checkbox in Mozilla or <code>Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code> checkbox in Firefox or by setting <code>dom.disable_window_move_resize</code> to <var>true</var> in <code>about:config</code> or by editing accordingly their <a href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> + <dd>In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.</dd> + <dd>The window method <a href="https://developer.mozilla.org/en-US/docs/DOM/window.sizeToContent" title="DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.</dd> + <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt> + <dd>To open a resource in a new tab see <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">Tabbed browser</a>. Some <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&redirectslug=Code_snippets%2FTabbed_browser">Code snippets</a> are available. If you are using the SDK, tabs are <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">handled a bit differently</a></dd> + <dd><a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Only the user can set his advanced preferences to do that. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.</dd> + <dd>In a few years, the <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.</dd> + <dt>How do I know whether a window I opened is still open?</dt> + <dd>You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that <em>w</em><var>indowObjectReference</var>.closed return value is <var>false</var>.</dd> + <dt>How can I tell when my window was blocked by a popup blocker?</dt> + <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd> + <dt>What is the JavaScript relationship between the main window and the secondary window?</dt> + <dd>The <code>window.open()</code> method gives a main window a reference to a secondary window; the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.opener" title="DOM/window.opener">opener</a> property gives a secondary window a reference to its main window.</dd> + <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property <property_name or method_name>. Why is that?</dt> + <dd>It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) <strong>cannot get nor set</strong> properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.</dd> + <dd>More reading on the cross-domain script security restriction: <a href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd> +</dl> + +<h2 id="Usability_issues" name="Usability_issues">Usability issues</h2> + +<h3 id="Avoid_resorting_to_window.open.28.29" name="Avoid_resorting_to_window.open.28.29">Avoid resorting to <code>window.open()</code></h3> + +<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p> + +<ul> + <li>All Mozilla-based browsers offer <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">tab-browsing</a> and this is the preferred mode of <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&redirectslug=Code_snippets%2FTabbed_browser">opening referenced resources</a> (<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">SDK</a>)... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 3 years; this trend will not revert back. MSIE 7, released in October 2006, has full support for tab browsing.</li> + <li>There are now <a href="https://addons.mozilla.org/seamonkey/browse/type:1/cat:48/sort:updated">several Mozilla extensions</a> (like Multizilla) and <a href="https://addons.update.mozilla.org/firefox/browse/type:1/cat:14/sort:updated">Firefox extensions</a> (like <a href="https://addons.mozilla.org/firefox/addon/158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li> + <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li> + <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li> +</ul> + +<h3 id="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines" name="Offer_to_open_a_link_in_a_new_window.2C_using_these_guidelines">Offer to open a link in a new window, using these guidelines</h3> + +<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p> + +<h4 id="Never_use_this_form_of_code_for_links.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E" name="Never_use_this_form_of_code_for_links:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E"><em>Never</em> use this form of code for links: <code><a href="javascript:window.open(...)" ...></code></h4> + +<p>"javascript:" links break accessibility and usability of webpages in every browser.</p> + +<ul> + <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled.</li> + <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li> + <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li> + <li>"javascript:" links interfere with assistive technologies (e.g. voice browsers) and several web-aware applications (e.g. <abbr title="Personal Digital Assistant">PDAs</abbr> and mobile browsers).</li> + <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li> + <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li> +</ul> + +<p><strong>Further reading:</strong></p> + +<ul> + <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li> + <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li> + <li><a href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li> +</ul> + +<h4 id="Never_use_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="Never_use_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">Never use <code><a href="#" onclick="window.open(...);"></code></h4> + +<p>Such pseudo-link also breaks accessibility of links. <strong>Always use a real URL for the href attribute value</strong> so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like MS-Web TV, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. This form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, Ctrl+Enter on links, "mouse gestures" features.</p> + +<h4 id="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window" name="Always_identify_links_which_will_create_.28or_will_re-use.29_a_new.2C_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h4> + +<p>Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.</p> + +<p>The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).</p> + +<blockquote> +<p>"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out <em>Back</em> button."<br> + quote from <a href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p> +</blockquote> + +<p>When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).</p> + +<p><strong>References</strong></p> + +<ul> + <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> + <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li> + <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header" colspan="4">Example "New Window" Icons & Cursors</td> + </tr> + <tr> + <td style="width: 25%;"><img alt="New window icon from yahoo.com" src="https://developer.mozilla.org/@api/deki/files/782/=NewwindowYahoo.png"></td> + <td style="width: 25%;"><img alt="New window icon from microsoft.com" src="https://developer.mozilla.org/@api/deki/files/780/=NewwinMSIE.gif"></td> + <td style="width: 25%;"><img alt="New window icon from webaim.org" src="https://developer.mozilla.org/@api/deki/files/296/=Popup_requested_new_window.gif"></td> + <td style="width: 25%;"><img alt="New window icon from sun.com" src="https://developer.mozilla.org/@api/deki/files/811/=PopupImageSun.gif"></td> + </tr> + <tr> + <td><img alt="New window icon from bbc.co.uk" src="https://developer.mozilla.org/@api/deki/files/795/=Opennews_rb.gif"></td> + <td><img alt="New window icon from Accessible Internet Solutions" src="https://developer.mozilla.org/@api/deki/files/15/=AIS_NewWindowIcon.png"></td> + <td><img alt="New window icon from accessify.com" src="https://developer.mozilla.org/@api/deki/files/809/=Pop-up-launcher.gif"></td> + <td><img alt="New window icon from webstyleguide.com" src="https://developer.mozilla.org/@api/deki/files/417/=Webstyleguide_com_newwind.gif"></td> + </tr> + <tr> + <td><img alt="New window icon from an unknown source" src="https://developer.mozilla.org/@api/deki/files/810/=Popicon_1.gif"></td> + <td><img alt="New window icon from an unknown source" src="https://developer.mozilla.org/@api/deki/files/779/=New.gif"></td> + <td><img alt="New window icon from an unknown source" src="https://developer.mozilla.org/@api/deki/files/419/=WillCreateOrRecycleNewWindow.gif"></td> + <td><img alt="New window icon from gtalbot.org" src="https://developer.mozilla.org/@api/deki/files/287/=OpenRequestedPopup.png"></td> + </tr> + <tr> + <td colspan="2"><img alt="New window cursor from draig.de" src="https://developer.mozilla.org/@api/deki/files/169/=Cursor_LinkNewWindowTargetBlank.png"></td> + <td colspan="2"><img alt="New window cursor from mithgol.ru" src="https://developer.mozilla.org/@api/deki/files/170/=Cursor_newwindowSergeySokoloff.png"></td> + </tr> + </tbody> +</table> + +<h4 id="Always_use_the_target_attribute" name="Always_use_the_target_attribute">Always use the target attribute</h4> + +<p>If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - <strong>not impose</strong> - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.</p> + +<h4 id="Do_not_use_target.3D.22_blank.22" name="Do_not_use_target.3D.22_blank.22">Do not use <code>target="_blank"</code></h4> + +<p>Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it should not interfere with the user's final choice but rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).</p> + +<h2 id="Glossary" name="Glossary">Glossary</h2> + +<dl> + <dt>Opener window, parent window, main window, first window</dt> + <dd>Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.</dd> + <dt>Sub-window, child window, secondary window, second window</dt> + <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd> + <dt>Unrequested popup windows</dt> + <dd>Script-initiated windows opening automatically without the user's consent.</dd> +</dl> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>HTML5. See http://www.w3.org/TR/html5/browsers.html#dom-open for details.</p> + +<h2 id="Notes" name="Notes">注意</h2> + +<h3 id="Note_on_precedence" name="Note_on_precedence">优先注意事项</h3> + +<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>features</var> list, then <code>left</code> (and/or <code>top</code>) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.</p> + +<pre class="brush:js language-js"><code class="language-js">windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span> + <span class="string token">"http://news.bbc.co.uk/"</span><span class="punctuation token">,</span> + <span class="string token">"BBCWorldNewsWindowName"</span><span class="punctuation token">,</span> + <span class="string token">"left=100,screenX=200,resizable,scrollbars,status"</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="line-number" style="top: 0px;"></div> + +<p>If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.</p> + +<p>outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.</p> + +<pre class="brush:js language-js"><code class="language-js">windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span> + <span class="string token">"http://www.wwf.org/"</span><span class="punctuation token">,</span> + <span class="string token">"WWildlifeOrgWindowName"</span><span class="punctuation token">,</span> + <span class="string token">"outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"</span> +<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="line-number" style="top: 0px;"></div> + +<h3 id="Note_on_position_and_dimension_error_correction" name="Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</h3> + +<p>Requested position and requested dimension values in the <var>features</var> list will not be honored and <strong>will be corrected</strong> if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p> + +<p><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p> + +<h3 id="Note_on_scrollbars" name="Note_on_scrollbars">Note on scrollbars</h3> + +<p>When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:</p> + +<ul> + <li>user resizes the window</li> + <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li> + <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li> + <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li> + <li>user uses an user stylesheet (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li> + <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li> + <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li> + <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li> + <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li> + <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li> +</ul> + +<h3 id="Note_on_status_bar" name="Note_on_status_bar">Note on status bar</h3> + +<p>You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with <abbr title="Secure Socket Layer">SSL</abbr> connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p> + +<h3 id="Note_on_security_issues_of_the_status_bar_presence" name="Note_on_security_issues_of_the_status_bar_presence">Note on security issues of the status bar presence</h3> + +<p>In MSIE 6 for XP SP2: For windows opened using <code>window.open()</code>:</p> + +<blockquote> +<p>"For windows opened using window.open():<br> + Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br> + quote from <a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> +</blockquote> + +<blockquote> +<p>"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.<br> + Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)<br> + <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br> + Script management of Internet Explorer status bar<br> + Detailed description<br> + <strong>Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows.</strong> (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.<br> + The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"<br> + quote from <a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> +</blockquote> + +<h3 id="Note_on_fullscreen" name="Note_on_fullscreen">Note on fullscreen</h3> + +<p>In MSIE 6 for XP SP2:</p> + +<ul> + <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li> + <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li> +</ul> + +<p><em>References:</em></p> + +<ul> + <li><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> + <li><a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> +</ul> + +<h3 id="Note_on_outerHeight_versus_height" name="Note_on_outerHeight_versus_height">Note on outerHeight versus height</h3> + +<p><img alt="innerHeight vs outerHeight illustration" src="https://developer.mozilla.org/@api/deki/files/212/=FirefoxInnerVsOuterHeight.png"></p> + +<h3 id="Note_on_refreshing_vs._opening_a_new_windowtab">Note on refreshing vs. opening a new window/tab</h3> + +<p>If the <code>strWindowName</code> parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.</p> + +<pre class="script-jem;brush:js language-js"><code class="language-js"><span class="comment token">//Always opens a new window/tab +</span>window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"map.php"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token"> +//Refreshes an existing window/tab that was opened with the same name, if one exists +</span>window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"map.php"</span><span class="punctuation token">,</span> <span class="string token">"BiggerMap"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code> +</pre> + +<div class="line-number" style="top: 76px;"></div> + +<h2 id="Tutorials" name="Tutorials">教程</h2> + +<ul> + <li><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</li> + <li><a href="http://accessify.com/features/tutorials/the-perfect-popup/" title="http://accessify.com/features/tutorials/the-perfect-popup/">The perfect pop-up (tutorial)</a> by Ian Lloyd</li> + <li><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</li> +</ul> + +<h2 id="References" name="References">参考文献</h2> + +<ul> + <li><a href="http://www.cs.tut.fi/%7Ejkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</li> + <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</li> + <li><a href="https://codepen.io/gildata/pen/VrzXOb">demo</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/opendialog/index.html b/files/zh-cn/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..80705cd7aa --- /dev/null +++ b/files/zh-cn/web/api/window/opendialog/index.html @@ -0,0 +1,71 @@ +--- +title: window.openDialog +slug: Web/API/Window/openDialog +tags: + - Gecko DOM Reference +translation_of: Web/API/Window/openDialog +--- +<p>{{ ApiRef() }}</p> +<h3 id=".E7.AE.80.E4.BB.8B" name=".E7.AE.80.E4.BB.8B">简介</h3> +<p><code>window.openDialog</code> 是对<a href="cn/DOM/window.open">window.open</a>的扩展。和它一样，可以传递<code>windowFeatures</code>参数, 但是 <code>windowFeatures</code> 的方式有变化。</p> +<p>The optional parameters, if present, will be bundled up in a JavaScript Array object and added to the newly created window as a property named <a href="cn/DOM/window.arguments">window.arguments</a>. They may be referenced in the JavaScript of the window at any time, including during the execution of a <code>load</code> handler. These parameters may be used, then, to pass arguments to and from the dialog window.</p> +<p>Note that the call to <code>openDialog()</code> returns immediately. If you want the call to block until the user has closed the dialog, supply <code>modal</code> as a <code>windowFeatures</code> parameter. Note that this also means the user won't be able to interact with the opener window until he closes the modal dialog.</p> +<h3 id=".E8.AF.AD.E6.B3.95" name=".E8.AF.AD.E6.B3.95">语法</h3> +<pre class="eval"><i>newWindow</i> = openDialog(<i>url</i>,<i>name</i>,<i>features</i>,<i>arg1</i>,<i>arg2</i>, ...) +</pre> +<dl> + <dt> + newWindow </dt> + <dd> + 打开的窗口对象。</dd> + <dt> + url </dt> + <dd> + 要在新窗口里打开的地址。</dd> + <dt> + name </dt> + <dd> + The window name (optional). See <a href="cn/DOM/window.open">window.open</a> description for detailed information.</dd> + <dt> + features </dt> + <dd> + See <a href="cn/DOM/window.open">window.open</a> description for description.</dd> + <dt> + arg1, arg2, ... </dt> + <dd> + The arguments to be passed to the new window (optional).</dd> +</dl> +<h3 id=".E4.BE.8B.E5.AD.90" name=".E4.BE.8B.E5.AD.90">例子</h3> +<pre class="eval">var win = openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> +<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3> +<h4 id="New_Features" name="New_Features">New Features</h4> +<p><code>all</code> - Initially activates (or deactivates <code>("all=no")</code>) all chrome (except the behaviour flags <code>chrome</code>, <code>dialog</code> and <code>modal</code>). These can be overridden (so <code>"menubar=no,all"</code> turns on all chrome except the menubar.) This feature is explicitly ignored by <a href="cn/Window.open">window.open</a>. <code>window.openDialog</code> finds it useful because of its different default assumptions.</p> +<h4 id="Default_behaviour" name="Default_behaviour">Default behaviour</h4> +<p>The <code>chrome</code> and <code>dialog</code> features are always assumed on, unless explicitly turned off ("<code>chrome=no</code>"). <code>openDialog</code> treats the absence of the features parameter as does <a href="cn/Window.open">window.open</a>, (that is, an empty string sets all features to off) except <code>chrome</code> and <code>dialog</code>, which default to on. If the <code>features</code> parameter is a zero-length string, or contains only one or more of the behaviour features (<code>chrome</code>, <code>dependent</code>, <code>dialog</code> and <code>modal</code>) the chrome features are assumed "OS' choice." That is, window creation code is not given specific instructions, but is instead allowed to select the chrome that best fits a dialog on that operating system.</p> +<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passing extra parameters to the dialog</h4> +<p>To pass extra parameters into the dialog, you can simply supply them after the <tt>windowFeatures</tt> parameter:</p> +<pre class="eval">openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "", "pizza", 6.98); +</pre> +<p>The extra parameters will then get packed into a property named <tt>arguments</tt> of type <a href="cn/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, and this property gets added to the newly opened dialog window.</p> +<p>To access these extra parameters from within dialog code, use the following scheme:</p> +<pre class="eval">var food = window.arguments[0]; +var price = window.arguments[1]; +</pre> +<p>Note that you can access this property from within anywhere in the dialog code. (<a href="cn/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a>).</p> +<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Returning values from the dialog</h4> +<p>Since <tt>window.close()</tt> erases all properties associated with the dialog window (i.e. the variables specified in the JavaScript code which gets loaded from the dialog), it is not possible to pass return values back past the close operation using globals (or any other constructs).</p> +<p>To be able to pass values back to the caller, you have to supply some object via the extra parameters. You can then access this object from within the dialog code and set properties on it, containing the values you want to return or preserve past the <tt>window.close()</tt> operation.</p> +<pre class="eval">var retVals = { address: null, delivery: null }; +openDialog("<span class="nowiki">http://example.tld/zzz.xul</span>", "dlg", "modal", "pizza", 6.98, retVals); +</pre> +<p>If you set the properties of the <tt>retVals</tt> object in the dialog code as described below, you can now access them via the <tt>retVals</tt> array after the <tt>openDialog()</tt> call returns.</p> +<p>Inside the dialog code, you can set the properties as follows:</p> +<pre class="eval">var retVals = window.arguments[2]; +retVals.address = enteredAddress; +retVals.delivery = "immediate"; +</pre> +<p>See also <a class="external" href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">. (</a><a href="cn/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a>).</p> +<h3 id="Specification" name="Specification">Specification</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "pl": "pl/DOM/window.openDialog" } ) }}</p> diff --git a/files/zh-cn/web/api/window/opener/index.html b/files/zh-cn/web/api/window/opener/index.html new file mode 100644 index 0000000000..52317273f7 --- /dev/null +++ b/files/zh-cn/web/api/window/opener/index.html @@ -0,0 +1,38 @@ +--- +title: window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>返回打开当前窗口的那个窗口的引用，例如：在window A中打开了window B，B.opener 返回 A.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>var objRef</em> = window.opener; +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="brush: js"> if (window.opener != indexWin) { + referToTop(window.opener); + } +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>如果当前窗口是由另一个窗口打开的, <strong>window.opener</strong>保留了那个窗口的引用. 如果当前窗口不是由其他窗口打开的, 则该属性返回 null.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>{{ DOM0() }}</p> + +<p>{{ languages( { "fr": "fr/DOM/window.opener", "ja": "ja/DOM/window.opener", "pl": "pl/DOM/window.opener", "en": "en/DOM/window.opener" } ) }}</p> + +<h3 id="浏览器兼容性">浏览器兼容性</h3> + +<p>{{Compat("api.Window.opener")}}</p> + +<p>注意：在Chrome78最近的几个版本，如果A、B页面跨域，A页面中打开B页面，在B页面使用console.log在控制台打印<strong>window.opener</strong>会报跨域的错误。</p> diff --git a/files/zh-cn/web/api/window/orientationchange_event/index.html b/files/zh-cn/web/api/window/orientationchange_event/index.html new file mode 100644 index 0000000000..0578edbe08 --- /dev/null +++ b/files/zh-cn/web/api/window/orientationchange_event/index.html @@ -0,0 +1,73 @@ +--- +title: orientationchange +slug: Web/API/Window/orientationchange_event +tags: + - API + - Event + - Window + - onorientationchange + - orientationchange + - 参考 + - 方向 +translation_of: Web/API/Window/orientationchange_event +--- +<p><code>orientationchange</code>事件在<font><font>设备的纵横方向改变时触发。</font></font></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler</th> + <td>{{domxref("Window/onorientationchange", "onorientationchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>你可以在{{domxref("EventTarget/addEventListener", "addEventListener")}} 方法中使用 <code>orientationchange</code> 事件：</p> + +<pre class="brush:js;">window.addEventListener("orientationchange", function() { + console.log("the orientation of the device is now " + screen.orientation.angle); +}); +</pre> + +<p>或者使用 {{domxref("Window/onorientationchange", "onorientationchange")}} 事件处理程序属性：</p> + +<pre class="brush: js">window.onorientationchange = function() { + console.log("the orientation of the device is now " + screen.orientation.angle); +};</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#event-orientationchange', 'orientationchange')}}</td> + <td>{{Spec2('Compat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.orientationchange_event")}}</p> diff --git a/files/zh-cn/web/api/window/outerheight/index.html b/files/zh-cn/web/api/window/outerheight/index.html new file mode 100644 index 0000000000..9bc6b127af --- /dev/null +++ b/files/zh-cn/web/api/window/outerheight/index.html @@ -0,0 +1,77 @@ +--- +title: Window.outerHeight +slug: Web/API/Window/outerHeight +translation_of: Web/API/Window/outerHeight +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>Window.outerHeight</code> 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边（window chrome）和窗口调正边框（window resizing borders/handles）。</p> +<p>该属性为只读，没有默认值。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>outWindowHeight</var> = window.outerHeight; +</pre> +<p><code>outWindowHeight</code> 为窗口的外层的高度。</p> +<h2 id="Notes" name="Notes">备注</h2> +<p>要改变窗口的大小，请查看 {{domxref("window.resizeBy()")}} 和 {{domxref("window.resizeTo()")}}。</p> +<p>要获取窗口的内层高度，即页面被显示区域的高度，可查看 {{domxref("window.innerHeight")}}。</p> +<h3 id="Graphical_example" name="Graphical_example">图像示例</h3> +<p>下面的示意图展示了 <code>outerHeight</code> 和 <code>innerHeight</code> 两者的不同。</p> +<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png" style=""></p> +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>9</td> + <td>9</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>9</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">规范</h2> +<p>DOM Level 0。不属于任何 W3C 技术规范或推荐。</p> +<h2 id="相关链接">相关链接</h2> +<ul> + <li>{{domxref("window.innerHeight")}}</li> + <li>{{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.outerWidth")}}</li> + <li>{{domxref("window.resizeBy()")}}</li> + <li>{{domxref("window.resizeTo()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/outerwidth/index.html b/files/zh-cn/web/api/window/outerwidth/index.html new file mode 100644 index 0000000000..fc7a7ca3db --- /dev/null +++ b/files/zh-cn/web/api/window/outerwidth/index.html @@ -0,0 +1,71 @@ +--- +title: Window.outerWidth +slug: Web/API/Window/outerWidth +translation_of: Web/API/Window/outerWidth +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p><code>Window.outerWidth</code> 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。</p> +<p>该属性为只读，没有默认值。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>outWindowWidth</var> = window.outerWidth; +</pre> +<p><code>outWindowWidth</code> 是窗口的外层的宽度。</p> +<h2 id="Notes" name="Notes">备注</h2> +<p>要改变一个窗口的大小，可参考 {{domxref("window.resizeBy()")}} 和 {{domxref("window.resizeTo()")}}。</p> +<p>要获取一个窗口的内层宽度（inner width），即页面被展示的区域，请参考 {{domxref("window.innerWidth")}}。</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>9</td> + <td>9</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>9</td> + <td>9</td> + <td>3</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">规范</h2> +<p>DOM Level 0。不属于任何 W3C 技术规范或推荐。<span class="comment">the To do in Notes</span></p> +<h2 id="相关链接">相关链接</h2> +<ul> + <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/pagehide_event/index.html b/files/zh-cn/web/api/window/pagehide_event/index.html new file mode 100644 index 0000000000..a95bf134aa --- /dev/null +++ b/files/zh-cn/web/api/window/pagehide_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'Window: 页面隐藏事件(pagehide event)' +slug: Web/API/Window/pagehide_event +tags: + - API + - Event + - Navigation + - pagehide event + - sendBeacon + - 前端监控 + - 埋点 + - 数据上报 +translation_of: Web/API/Window/pagehide_event +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>当浏览器在显示与会话历史记录不同的页面的过程中隐藏当前页面时, <span class="seoSummary"><strong><code>pagehide</code></strong></span>(页面隐藏)事件会被发送到一个<span class="seoSummary">{{domxref("Window")}} 。</span>例如，当用户单击浏览器的“后退”按钮时，当前页面在显示上一页之前会收到一个<code>pagehide</code>(页面隐藏)事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles(冒泡)</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable(可取消)</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface(接口)</th> + <td>{{domxref("PageTransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property(事件处理程序属性)</th> + <td>{{domxref("Window.onpagehide", "onpagehide")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>在此示例中，建立了一个事件处理程序以监视 <code>pagehide </code>(页面隐藏)事件，并在持久保存页面以进行可能的重用时执行特殊处理。</p> + +<pre class="brush: js notranslate">window.addEventListener("pagehide", event => { + if (event.persisted) { + /* the page isn't being discarded, so it can be reused later */ + } +}, false); +</pre> + +<p>这也可以使用 {{domxref("Window")}} 上的 {{domxref("Window.onpagehide", "onpagehide")}} 事件处理程序属性来编写：</p> + +<pre class="brush: js notranslate">window.onpagehide = event => { + if (event.persisted) { + /* the page isn't being discarded, so it can be reused later */ + } +} +</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', 'browsing-the-web.html#event-pagehide', 'pagehide')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial specification.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pagehide', 'pagehide')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.pagehide_event")}}</p> + +<h2 id="了解更多">了解更多</h2> + +<ul> + <li>The {{domxref("Window.pageshow_event", "pageshow")}} event</li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 156px; top: 1657px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/zh-cn/web/api/window/pagexoffset/index.html b/files/zh-cn/web/api/window/pagexoffset/index.html new file mode 100644 index 0000000000..d6f823e4a4 --- /dev/null +++ b/files/zh-cn/web/api/window/pagexoffset/index.html @@ -0,0 +1,92 @@ +--- +title: Window.pageXOffset +slug: Web/API/Window/pageXOffset +tags: + - API + - CSSOM +translation_of: Web/API/Window/pageXOffset +--- +<div>{{ APIRef() }}</div> + +<p>这是 <code><a href="/en-US/docs/Web/API/Window/scrollX">scrollX</a> 的别名</code></p> + +<h2 id="Specification" name="Specification">规范</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('CSSOM View', '#dom-window-pagexoffset', 'window.pageXOffset') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Window/pageYOffset"><code>window.pageYOffset</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/window/pageyoffset/index.html b/files/zh-cn/web/api/window/pageyoffset/index.html new file mode 100644 index 0000000000..acef4e640d --- /dev/null +++ b/files/zh-cn/web/api/window/pageyoffset/index.html @@ -0,0 +1,92 @@ +--- +title: Window.pageYOffset +slug: Web/API/Window/pageYOffset +tags: + - API + - CSSOM +translation_of: Web/API/Window/pageYOffset +--- +<div>{{ APIRef("CSSOM View") }}</div> + +<p>只读属性<code>pageYOffset</code>是 <code><a href="/en-US/docs/Web/API/Window/scrollY">scrollY</a> </code>的别名。</p> + +<h2 id="Specification" name="Specification">规范</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('CSSOM View', '#dom-window-pageyoffset', 'window.pageYOffset') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Window/pageXOffset"><code>window.pageXOffset</code></a></li> +</ul> diff --git a/files/zh-cn/web/api/window/parent/index.html b/files/zh-cn/web/api/window/parent/index.html new file mode 100644 index 0000000000..58c756ee2e --- /dev/null +++ b/files/zh-cn/web/api/window/parent/index.html @@ -0,0 +1,39 @@ +--- +title: window.parent +slug: Web/API/Window/parent +translation_of: Web/API/Window/parent +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>返回当前窗口的父窗口对象.</p> + +<p>如果一个窗口没有父窗口,则它的 <code>parent</code> 属性为自身的引用.</p> + +<p>如果当前窗口是一个 <code><iframe></code>, <code><object></code>, 或者 <code><frame></code>,则它的父窗口是嵌入它的那个窗口</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">var <em>parentWindow</em> = window.parent; +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="eval">if (window.parent != window.top) { + // 至少有三层窗口 +} +</pre> + +<h3 id="See_also" name="See_also">相关链接</h3> + +<ul> + <li><code><a href="/zh-cn/DOM/window.frameElement" title="zh-cn/DOM/window.frameElement">window.frameElement</a></code> 返回嵌入当前窗口的frame对象.</li> + <li><code><a href="/zh-CN/docs/Web/API/Window/top" title="zh-cn/DOM/window.top">window.top</a></code> 返回当前窗口最顶层的父窗口.</li> +</ul> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>{{ DOM0() }}</p> + +<p>{{ languages( { "fr": "fr/DOM/window.parent", "ja": "ja/DOM/window.parent" , "en": "en/DOM/window.parent"} ) }}</p> diff --git a/files/zh-cn/web/api/window/performance/index.html b/files/zh-cn/web/api/window/performance/index.html new file mode 100644 index 0000000000..926f4b6b40 --- /dev/null +++ b/files/zh-cn/web/api/window/performance/index.html @@ -0,0 +1,35 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +tags: + - Window.performance + - analytics + - 前端代码埋点 +translation_of: Web/API/Window/performance +--- +<div>{{APIREf}}</div> + +<div>Web Performance API允许网页访问某些函数来测量网页和Web应用程序的性能，包括 <a href="/en-US/docs/Navigation_timing">Navigation Timing</a> API和高分辨率时间数据。</div> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt>{{domxref("Performance.mark()", "performance.mark()")}}</dt> + <dd>通过一个给定的名称，将该名称（作为键）和对应的{{domxref("DOMHighResTimeStamp")}}（作为值）保存在一个哈希结构里。该键值对表示了从某一时刻（译者注：某一时刻通常是 navigationStart 事件发生时刻）到记录时刻间隔的毫秒数。（译者注：该方法一般用来多次记录时间，用于求得各记录间的时间差）</dd> +</dl> + +<dl> + <dt>{{domxref("Performance.now()", "performance.now()")}}</dt> + <dd>该方法返回一个{{domxref("DOMHighResTimeStamp")}}对象，该对象表示从某一时刻（译者注：某一时刻通常是 navigationStart 事件发生时刻）到调用该方法时刻的毫秒数。</dd> +</dl> + +<h2 id="Properties" name="Properties">属性</h2> + +<dl> + <dt>{{domxref("Performance.timing", "performance.timing")}}</dt> + <dd>是一个{{domxref("PerformanceTiming")}} 对象,包含延迟相关的性能信息。</dd> + <dt>{{domxref("Performance.navigation", "performance.navigation")}}</dt> + <dd>是一个 {{domxref("PerformanceNavigation")}} 对象，该对象表示在当前给定浏览上下文中网页导航的类型（译者注：TYPE_BACK_FORWARD，TYPE_NAVIGATE， TYPE_RELOAD，TYPE_RESERVED）以及次数。</dd> + <dt><a href="https://docs.webplatform.org/apis/timing/properties/memory">performance.memory</a></dt> + <dd>在Chrome中添加的一个非标准扩展。</dd> +</dl> diff --git a/files/zh-cn/web/api/window/personalbar/index.html b/files/zh-cn/web/api/window/personalbar/index.html new file mode 100644 index 0000000000..e689c2cfff --- /dev/null +++ b/files/zh-cn/web/api/window/personalbar/index.html @@ -0,0 +1,73 @@ +--- +title: Window.personalbar +slug: Web/API/Window/personalbar +translation_of: Web/API/Window/personalbar +--- +<div>{{APIRef}}</div> + +<h2 id="概要"><span class="short_text" id="result_box" lang="zh-CN"><span>概要</span></span></h2> + +<p>返回 <code>personalbar</code> 对象，其可见性可以在窗口中切换。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>objRef</em> =<em>window</em>.personalbar +</pre> + +<h2 id="示例">示例</h2> + +<p>{{todo('https://bugzilla.mozilla.org/show_bug.cgi?id=790023')}}</p> + +<p>{{deprecated_inline}} The following complete HTML example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window. Due to <a href="https://developer.mozilla.org/en-US/docs/Bypassing_Security_Restrictions_and_Signing_Code" title="https://developer.mozilla.org/en-US/docs/Bypassing_Security_Restrictions_and_Signing_Code">deprecation of enablePrivilege</a> this functionality can not be used in web pages. EnablePrivilege is disabled in Firefox 15 and will be removed in Firefox 17.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> +<title>Various DOM Tests</title> + +<script> +// changing bar states on the existing window +netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); +window.personalbar.visible = !window.personalbar.visible; +</script> + +</head> +<body> + <p>Various DOM Tests</p> +</body> +</html> +</pre> + +<h2 id="笔记">笔记</h2> + +<p>When you load the example page above, the browser displays the following dialog: <img src="https://mdn.mozillademos.org/files/550/Modify_any_open_window_dialog.png" style="height: 262px; width: 607px;"></p> + +<p>To toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. Also be aware that dynamically updating the visibilty of the various toolbars can change the size of the window rather dramatically, and may affect the layout of your page.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-personalbar', 'Window.personalbar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-personalbar', 'Window.personalbar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/popstate_event/index.html b/files/zh-cn/web/api/window/popstate_event/index.html new file mode 100644 index 0000000000..ef4c63f871 --- /dev/null +++ b/files/zh-cn/web/api/window/popstate_event/index.html @@ -0,0 +1,158 @@ +--- +title: popstate +slug: Web/API/Window/popstate_event +tags: + - popstate +translation_of: Web/API/Window/popstate_event +--- +<p>当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。</p> + +<p><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">需要注意的是调用<code>history.pushState()</code>或</span></font><code>history.replaceState()</code>不会触发<code>popstate</code>事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用<code>history.back()</code>或者<code>history.forward()</code>方法）</p> + +<p><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">不同的浏览器在加载页面时处理<code>popstate</code>事件的形式存在差异。页面加载时Chrome和Safari通常会触发(</span></font>emit <font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">)<code>popstate</code>事件，但Firefox则不会。</span></font></p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">PopStateEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">defaultView</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The browsing context (<code>window</code>).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>state</code> {{readonlyInline}}</td> + <td><em>any</em></td> + <td>The current history entry's state object (if any).</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>Yes</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10.0</td> + <td>Yes</td> + <td>limited</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0 (buggy in 2.2 and 2.3)</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10.0</td> + <td>Yes</td> + <td>limited</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="示例">示例</h2> + +<p> 打开<code>http://example.com/example.html页面运行以下代码，</code> 会按预期那样打出log提示。</p> + +<pre><code>window.addEventListener('popstate', (event) => { + console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}); +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // Logs "location: http://example.com/example.html, state: null +history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}</code></pre> + +<p>使用<code>onpopstate</code>事件处理程序属性的相同示例：</p> + +<pre><code>window.onpopstate = function(event) { + console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); +}; +history.pushState({page: 1}, "title 1", "?page=1"); +history.pushState({page: 2}, "title 2", "?page=2"); +history.replaceState({page: 3}, "title 3", "?page=3"); +history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}" +history.back(); // Logs "location: http://example.com/example.html, state: null +history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}</code></pre> + +<p>注意，虽然原始的历史项（<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">http://example.com/example.html所对应的</code><span style="line-height: 1.5;">）没有关联的状态对象（state object），但稍后调用<code>history.back()激活该历史项时，仍会触发popstate事件。</code></span></p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li> +</ul> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">Manipulating the browser history (the History API) </a></li> +</ul> diff --git a/files/zh-cn/web/api/window/postmessage/index.html b/files/zh-cn/web/api/window/postmessage/index.html new file mode 100644 index 0000000000..f06a29c7de --- /dev/null +++ b/files/zh-cn/web/api/window/postmessage/index.html @@ -0,0 +1,173 @@ +--- +title: window.postMessage +slug: Web/API/Window/postMessage +tags: + - AJAX + - API + - CORS + - DOM + - Window.postMessage() + - postMessage() + - 参考 + - 方法 +translation_of: Web/API/Window/postMessage +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><strong>window.postMessage()</strong> </strong>方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 {{domxref("Document.domain")}}设置为相同的值) 时，这两个脚本才能相互通信。<strong><strong>window.postMessage()</strong> </strong>方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。</p> + +<p>从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 <code>targetWindow = window.opener</code>），然后在窗口上调用 <code>targetWindow.postMessage()</code> 方法分发一个 {{domxref("MessageEvent")}}<strong> </strong>消息。接收消息的窗口可以根据需要自由<a href="/zh-CN/docs/Web/Guide/Events">处理此事件</a>。传递给 window.postMessage() 的参数（比如 message ）将<a href="/zh-CN/docs/Web/API/Window/postMessage#The_dispatched_event">通过消息事件对象暴露给接收消息的窗口</a>。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate">otherWindow.postMessage(message, targetOrigin, [transfer]);</pre> + +<dl> + <dt><code>otherWindow</code></dt> + <dd>其他窗口的一个引用，比如iframe的contentWindow属性、执行<a href="/en-US/docs/DOM/window.open" title="DOM/window.open">window.open</a>返回的窗口对象、或者是命名过或数值索引的<a href="/en-US/docs/DOM/window.frames" title="DOM/window.frames">window.frames</a>。</dd> + <dt><code>message</code></dt> + <dd>将要发送到其他 window的数据。它将会被<a href="https://developer.mozilla.org/en-US/docs/DOM/The_structured_clone_algorithm">结构化克隆算法</a>序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[<a href="https://developer.mozilla.org/en-US/docs/">1</a>]</dd> + <dt><code>targetOrigin</code></dt> + <dd>通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。<strong>如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。</strong></dd> + <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt> + <dd>是一串和message 同时传递的 {{domxref("Transferable")}} 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。</dd> +</dl> + +<h2 id="The_dispatched_event" name="The_dispatched_event">The dispatched event</h2> + +<p>执行如下代码, 其他window可以监听分发的message:</p> + +<pre class="brush: js notranslate">window.addEventListener("message", receiveMessage, false); + +function receiveMessage(event) +{ +<code> // For Chrome, the origin property is in the event.originalEvent + // object. + // 这里不准确，chrome没有这个属性 + // var origin = event.origin || event.originalEvent.origin; + var origin = event.origin</code> + if (origin !== "http://example.org:8080") + return; + + // ... +} +</pre> + +<p> message 的属性有:</p> + +<dl> + <dt><code>data</code></dt> + <dd>从其他 window 中传递过来的对象。</dd> + <dt><code>origin</code></dt> + <dd>调用 <code>postMessage</code> 时消息发送方窗口的 <a href="/en-US/docs/Origin" title="Origin">origin</a> . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “<code><span class="nowiki">https://example.org</span></code> (隐含端口 <code>443</code>)”、“<code><span class="nowiki">http://example.net</span></code> (隐含端口 <code>80</code>)”、“<code><span class="nowiki">http://example.com:8080</span></code>”。请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。</dd> + <dt><code>source</code></dt> + <dd>对发送消息的<a href="/en-US/docs/DOM/window">窗口</a>对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。</dd> +</dl> + +<dl> +</dl> + +<h2 id="Security_concerns" name="Security_concerns">安全问题</h2> + +<p><strong>如果您不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。 </strong>这是一个完全万无一失的方式来避免安全问题。</p> + +<p>如果您确实希望从其他网站接收message，请<strong>始终使用origin和source属性验证发件人的身份</strong>。 任何窗口（包括例如http://evil.example.com）都可以向任何其他窗口发送消息，并且您不能保证未知发件人不会发送恶意消息。 但是，验证身份后，您仍然应该<strong>始终验证接收到的消息的语法</strong>。 否则，您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。</p> + +<p><strong>当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。 </strong>恶意网站可以在您不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。</p> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js notranslate">/* + * A窗口的域名是<http://example.com:8080>，以下是A窗口的script标签下的代码： + */ + +var popup = window.open(...popup details...); + +// 如果弹出框没有被阻止且加载完成 + +// 这行语句没有发送信息出去，即使假设当前页面没有改变location（因为targetOrigin设置不对） +popup.postMessage("The user is 'bob' and the password is 'secret'", + "https://secure.example.net"); + +// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了） +popup.postMessage("hello there!", "http://example.org"); + +function receiveMessage(event) +{ + // 我们能相信信息的发送者吗? (也许这个发送者和我们最初打开的不是同一个页面). + if (event.origin !== "http://example.org") + return; + + // event.source 是我们通过window.open打开的弹出页面 popup + // event.data 是 popup发送给当前页面的消息 "hi there yourself! the secret response is: rheeeeet!" +} +window.addEventListener("message", receiveMessage, false); +</pre> + +<pre class="brush: js notranslate">/* + * 弹出页 popup 域名是<http://example.org>，以下是script标签中的代码: + */ + +//当A页面postMessage被调用后，这个function被addEventListener调用 +function receiveMessage(event) +{ + // 我们能信任信息来源吗？ + if (event.origin !== "http://example.com:8080") + return; + + // event.source 就当前弹出页的来源页面 + // event.data 是 "hello there!" + + // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把event.source + // 作为回信的对象，并且把event.origin作为targetOrigin + event.source.postMessage("hi there yourself! the secret response " + + "is: rheeeeet!", + event.origin); +} + +window.addEventListener("message", receiveMessage, false); +</pre> + +<h3 id="Notes" name="Notes"><strong>注意</strong></h3> + +<p>任何窗口可以在任何其他窗口访问此方法，在任何时间，无论文档在窗口中的位置，向其发送消息。 因此，用于接收消息的任何事件监听器<strong>必须</strong>首先使用origin和source属性来检查消息的发送者的身份。 <strong>这不能低估：无法检查origin和source属性会导致跨站点脚本攻击。</strong></p> + +<p>与任何异步调度的脚本（超时，用户生成的事件）一样，postMessage的调用者不可能检测到侦听由postMessage发送的事件的事件处理程序何时抛出异常。</p> + +<p>分派事件的origin属性的值不受调用窗口中document.domain的当前值的影响。</p> + +<p>仅对于IDN主机名，origin属性的值不是始终为Unicode或punycode; 在使用此属性时，如果您期望来自IDN网站的消息，则最大程度地兼容性检查IDN和punycode值。 这个值最终将始终是IDN，但现在你应该同时处理IDN和punycode表单。</p> + +<p>当发送窗口包含 <code>javascript:</code> 或 <code>data:</code> URL时，origin属性的值是加载URL的脚本的</p> + +<h3 id="在扩展Non-standard_inline中使用window.postMessage"><strong>在扩展</strong>{{Non-standard_inline}}<strong>中使用window.postMessage</strong></h3> + +<p><code>window.postMessage</code>可用于以chrome代码运行的JavaScript（例如，在扩展和特权代码中），但是分派事件的source属性总是为空作为安全限制。 （其他属性具有其期望值。）发送到位于chrome：URL的窗口的消息的<code>targetOrigin</code>参数当前被错误解释，使得将导致发送消息的唯一值为<code>“*”</code>。 由于此值是不安全的，当目标窗口可以导航到其他地方的恶意网站，建议postMessage不用于与chrome：页面的沟通; 使用不同的方法（如打开窗口时的查询字符串）与chrome窗口进行通信。 最后，在文件中向页面发布消息：URL当前要求<code>targetOrigin</code>参数为<code>“*”</code>。<code> file://</code>不能用作安全限制; 这个限制可能会在将来被修改。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table> + <tbody> + <tr> + <th>规范</th> + <th>状态</th> + <th>状态</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "web-messaging.html#dom-window-postmessage", "postMessage()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p><span style="">{{Compat("api.Window.postMessage")}}</span></p> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>{{domxref("Document.domain")}}</li> + <li>{{domxref("CustomEvent")}} </li> +</ul> diff --git a/files/zh-cn/web/api/window/print/index.html b/files/zh-cn/web/api/window/print/index.html new file mode 100644 index 0000000000..fd775a3283 --- /dev/null +++ b/files/zh-cn/web/api/window/print/index.html @@ -0,0 +1,20 @@ +--- +title: window.print +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +<p>{{ ApiRef() }}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>打开打印对话框打印当前文档.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="eval">window.print() +</pre> +<h2 id="Specification" name="Specification">规范</h2> +<p>{{ DOM0() }}</p> +<h2 id="相关链接">相关链接</h2> +<ol> + <li><a href="/zh-cn/Printing" title="zh-cn/Printing">Printing</a></li> + <li><a class="internal" href="/zh-cn/DOM/window.onbeforeprint" title="zh-cn/DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a></li> + <li><a class="internal" href="/zh-cn/DOM/window.onafterprint" title="zh-cn/DOM/window.onafterprint"><code>window.onafterprint</code></a></li> +</ol> +<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "en": "en/DOM/window.print" } ) }}</p> diff --git a/files/zh-cn/web/api/window/prompt/index.html b/files/zh-cn/web/api/window/prompt/index.html new file mode 100644 index 0000000000..93ce29190f --- /dev/null +++ b/files/zh-cn/web/api/window/prompt/index.html @@ -0,0 +1,54 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>result</em> = window.prompt(<em>text</em>, <em>value</em>); +</pre> + +<ul> + <li><code>result</code> 用来存储用户输入文字的字符串，或者是 null。</li> + <li><code>text</code> 用来提示用户输入文字的字符串，如果没有任何提示内容，该参数可以省略不写。</li> + <li><code>value</code> 文本输入框中的默认值，该参数也可以省略不写。不过在 Internet Explorer 7 和 8 中，省略该参数会导致输入框中显示默认值"undefined"。</li> +</ul> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="eval">var sign = prompt("<span class="long_text short_text" id="result_box" lang="zh-CN"><span>你是什么星座的</span></span>?"); +if (sign == "天蝎座"){ + alert("哇! 我也是天蝎座的耶!"); +} +// 有多种使用prompt方法的方式 +var sign = window.prompt(); // 打开空的提示窗口 +var sign = prompt(); // 打开空的提示窗口 +var sign = window.prompt('<span class="long_text short_text" id="result_box" lang="zh-CN"><span>你</span><span>觉得很幸运吗</span></span>?'); // 打开显示提示文本为"<span class="long_text short_text" id="result_box" lang="zh-CN"><span>你</span><span>觉得很幸运吗?</span></span>"的提示窗口 +var sign = window.prompt('<span class="long_text short_text" id="result_box" lang="zh-CN"><span>你</span><span>觉得很幸运吗</span></span>?','是的'); // 打开显示提示文本为"<span class="long_text short_text" id="result_box" lang="zh-CN"><span>你</span><span>觉得很幸运吗</span></span>?"并且输入框默认值为"是的"的提示窗口 +</pre> + +<p><span class="long_text" id="result_box" lang="zh-CN"><span>当用户点击</span><span>"确定"按钮</span><span>后，文本</span><span>输入框中的文字被</span><span>返回。</span><span>如果文本输入框中为空</span><span>,</span><span>则返回一个空字符串。</span><span>如果用户点击</span><span>"取消"按钮，</span><span>则返回null。</span></span></p> + +<h3 id="Notes" name="Notes">注意</h3> + +<div>一个prompt对话框,包含一个单行文本框，一个“取消”按钮，一个“确定”按钮,在对话框关闭时，返回用户输入到文本框内的值(可能为空)。<br> +<br> +prompt和alert以及类似的对话框都是模态窗口，它们会阻止用户激活程序其他部分的界面，直到该对话框关闭。因此，你不应该过度使用该方法。(译注：在content上下文，Firefox 4 以上版本使用非模态的对话框)。</div> + +<div>Chrome上下文执行的脚本(例如扩展开发)应该使用XPCOM <a href="/zh-cn/XPCOM_Interface_Reference/nsIPromptService" title="zh-cn/XPCOM_Interface_Reference/nsIPromptService">nsIPromptService</a> 来替代window.prompt。</div> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="See_also" name="See_also">相关链接</h3> + +<p><a href="/zh-cn/DOM/window.alert" title="zh-cn/DOM/window.alert">alert</a>, <a href="/zh-cn/DOM/window.confirm" title="zh-cn/DOM/window.confirm">confirm</a></p> + +<p>{{ languages( { "fr": "fr/DOM/window.prompt", "ja": "ja/DOM/window.prompt", "pl": "pl/DOM/window.prompt", "en": "en/DOM/window.prompt" } ) }}</p> diff --git a/files/zh-cn/web/api/window/rejectionhandled_event/index.html b/files/zh-cn/web/api/window/rejectionhandled_event/index.html new file mode 100644 index 0000000000..cf04dd5ae8 --- /dev/null +++ b/files/zh-cn/web/api/window/rejectionhandled_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Window: rejectionhandled event' +slug: Web/API/Window/rejectionhandled_event +translation_of: Web/API/Window/rejectionhandled_event +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><code>当Promise被rejected且有rejection处理器时会在全局触发</code><strong><code>rejectionhandled</code></strong> 事件(通常是发生在window下，但是也可能发生在Worker中)。应用于调试一般应用回退。</span>当Promise被rejected且没有rejection处理器处理时会触发<strong>unhandledrejection</strong><span class="seoSummary"><code>事件。这两个事件协同工作。</code></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>No</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>No</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>PromiseRejectionEvent</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>onrejectionhandled</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>你可以使用<code>rejectionhandled事件在控制台打印出被rejected的Promise，以及被rejected的原因：</code></p> + +<pre class="brush: js">window.addEventListener("rejectionhandled", event => { + console.log("Promise rejected; reason: " + event.reason); +}, false); +</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', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.rejectionhandled_event")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li> + <li>{{domxref("PromiseRejectionEvent")}}</li> + <li>{{domxref("Promise")}}</li> + <li>{{Event("unhandledrejection")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/requestanimationframe/index.html b/files/zh-cn/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..b0e36717ab --- /dev/null +++ b/files/zh-cn/web/api/window/requestanimationframe/index.html @@ -0,0 +1,123 @@ +--- +title: window.requestAnimationFrame +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - DOM Reference + - Intermediate + - JavaScript timers + - Method + - NeedsBrowserCompatibility +translation_of: Web/API/window/requestAnimationFrame +--- +<div>{{APIRef}}</div> + +<p><strong><code>window.requestAnimationFrame()</code></strong> 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行</p> + +<div class="note"><strong>注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用<code>window.requestAnimationFrame()</code></strong></div> + +<p>当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数(即你的回调函数)。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当<code>requestAnimationFrame()</code> 运行在后台标签页或者隐藏的{{ HTMLElement("iframe") }} 里时，<code>requestAnimationFrame()</code> 会被暂停调用以提升性能和电池寿命。</p> + +<p>回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数，{{domxref("DOMHighResTimeStamp")}}指示当前被 <code>requestAnimationFrame()</code> 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。</p> + +<div class="blockIndicator warning"> +<p>请确保总是使用第一个参数(或其它获得当前时间的方法)计算每次调用之间的时间间隔，否则动画在高刷新率的屏幕中会运行得更快。请参考下面例子的做法。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入{{domxref("DOMHighResTimeStamp")}}参数，该参数与{{domxref('performance.now()')}}的返回值相同，它表示<code>requestAnimationFrame()</code> 开始去执行回调函数的时刻。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个 <code>long</code> 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 {{domxref("window.cancelAnimationFrame()")}} 以取消回调函数。</p> + +<h2 id="Notes" name="Notes">范例</h2> + +<pre class="brush: js notranslate">const element = document.getElementById('some-element-you-want-to-animate'); +let start; + +function step(timestamp) { + if (start === undefined) + start = timestamp; + const elapsed = timestamp - start; + + //这里使用`Math.min()`确保元素刚好停在200px的位置。 + element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)'; + + if (elapsed < 2000) { // 在两秒后停止动画 + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step);</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><strong>规范</strong></th> + <th scope="col"><strong>状态</strong></th> + <th scope="col">注解</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>无改变，取代旧版</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>初步定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.Window.requestAnimationFrame")}}</p> +</div> + +<h2 id="See_also" name="See_also">参阅</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> + +<div id="gtx-anchor" style="position: absolute; left: 233px; top: 1643px; width: 325.969px; height: 20px;"></div> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-content-id" id="bubble-3"> +<div id="gtx-host" style="max-width: 400px;"></div> +</div> + +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 143px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> diff --git a/files/zh-cn/web/api/window/requestfilesystem/index.html b/files/zh-cn/web/api/window/requestfilesystem/index.html new file mode 100644 index 0000000000..17561dfda0 --- /dev/null +++ b/files/zh-cn/web/api/window/requestfilesystem/index.html @@ -0,0 +1,74 @@ +--- +title: Window.requestFileSystem() +slug: Web/API/Window/requestFileSystem +translation_of: Web/API/Window/requestFileSystem +--- +<p>{{APIRef("File System API")}}</p> + +<p>这个非标准 {{domxref("Window")}} <strong><code>requestFileSystem()</code></strong> 方法是谷歌浏览器内核用来让web站点或app获得通过沙箱访问文件系统 . 它返回 {{domxref("FileSystem")}} 然后就可以和 <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">file system APIs</a> 一起使用了</p> + +<div class="warning"> +<p>甚至相比较如File和Directory Entries API, <code>requestFileSystem()</code> 更不规范; 只有Chrome支持它, 所有其它浏览器已经决定不支持它了. 它甚至已经从规范建议单中移除了. 因此<em>不要使用这个方法</em></p> +</div> + +<h2 id="语法">语法</h2> + +<div class="note"> +<p><code>在所有支持它的浏览器中这个方法都有webkit前缀</code> (实际上也仅有谷歌浏览器支持).</p> +</div> + +<pre class="syntaxbox">window.requestFileSystem(<em>type</em>, <em>size</em>, <em>successCallback</em>[, <em>errorCallback</em>]);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>type</code></dt> + <dd>要请求的存储类型. 指定<code>Window.TEMPORARY</code> 浏览器自行决定要不要删除文件, 例如低内存, 或者<code>Window.PERSISTENT</code> 如果你需要文件保持在这个地方必须用户或站点或app明确许可. 持久存储要求用户授予站点配额</dd> + <dt><code>size</code></dt> + <dd>你希望你的app被允许的使用空间大小.</dd> + <dt><code>successCallback</code></dt> + <dd> + <p>成功获取文件系统时调用的函数。<span style="font-size: 1rem; letter-spacing: -0.00278rem;">回调接收单个参数: 一个 {{domxref("FileSystem")}} 表示应用程序有权使用的文件系统的对象.</span></p> + </dd> + <dt><code>errorCallback</code> {{optional_inline}}</dt> + <dd>一个可选参数，指定在试图获取文件系统时发生错误或用户拒绝创建或访问文件系统的权限时调用的函数。回调接收单个参数作为输入：一个{{domxref("FileError")}}用来描述错误的对象</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">无返回值</span></font></p> + +<h2 id="示例">示例</h2> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('File System API')}}</td> + <td>{{Spec2('File System API')}}</td> + <td>Draft of proposed API</td> + </tr> + </tbody> +</table> + +<p>这个API没有W3C或者WHATWG的官方规范.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.requestFileSystem")}}</p> + +<h2 id="相关知识">相关知识</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/requestidlecallback/index.html b/files/zh-cn/web/api/window/requestidlecallback/index.html new file mode 100644 index 0000000000..dc36051a1f --- /dev/null +++ b/files/zh-cn/web/api/window/requestidlecallback/index.html @@ -0,0 +1,76 @@ +--- +title: requestIdleCallback +slug: Web/API/Window/requestIdleCallback +tags: + - Idle + - requestAnimationFrame + - requestIdleCallback + - setTimeout + - 性能优化 +translation_of: Web/API/Window/requestIdleCallback +--- +<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> + +<p><strong><code>window.requestIdleCallback()</code></strong>方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间<code>timeout</code>，则有可能为了在超时前执行函数而打乱执行顺序。</p> + +<p>你可以在<span title="idle">空闲</span>回调函数中调用<code><strong>requestIdleCallback()</strong></code>，以便在下一次通过事件循环之前调度另一个回调。</p> + +<div class="blockIndicator note"> +<p>强烈建议使用<code>timeout</code>选项进行必要的工作，否则可能会在触发回调之前经过几秒钟。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><code>var handle = window.requestIdleCallback(callback[, options])</code></pre> + +<h3 id="返回值">返回值</h3> + +<p>一个ID，可以把它传入 {{domxref("Window.cancelIdleCallback()")}} 方法来结束回调。</p> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 {{domxref("IdleDeadline")}} 的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>包括可选的配置参数。具有如下属性： + <ul> + <li><code>timeout</code>：如果指定了timeout并具有一个正值，并且尚未通过超时毫秒数调用回调，那么回调会在下一次空闲时期被强制执行，尽管这样很可能会对性能造成负面影响。</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<p>See our <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API#Example">complete example</a> in the article <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Background Tasks')}}</td> + <td>{{Spec2('Background Tasks')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Window.requestIdleCallback")}}</p> + +<h2 id="查看更多">查看更多</h2> + +<ul> + <li>{{domxref("window.cancelIdleCallback()")}}</li> + <li>{{domxref("IdleDeadline")}}</li> + <li>{{domxref("window.setTimeout()")}}</li> + <li>{{domxref("window.setInterval()")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/resize_event/index.html b/files/zh-cn/web/api/window/resize_event/index.html new file mode 100644 index 0000000000..bdddef32e7 --- /dev/null +++ b/files/zh-cn/web/api/window/resize_event/index.html @@ -0,0 +1,182 @@ +--- +title: resize +slug: Web/API/Window/resize_event +translation_of: Web/API/Window/resize_event +--- +<p style="font-family: Microsoft Yahei;"><span class="seoSummary">文档视图调整大小时会触发 <strong>resize</strong> 事件。</span></p> + +<h2 id="基本信息" style="font-family: Microsoft Yahei;">基本信息</h2> + +<dl style="font-family: Microsoft Yahei;"> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a>, <a href="http://www.w3.org/TR/cssom-view/#resizing-viewports">CSSOM View</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">是否可取消默认</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">事件目标</dt> + <dd style="margin: 0 0 0 120px;">defaultView (window)</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性" style="font-family: Microsoft Yahei;">属性</h2> + +<table class="standard-table" style="font-family: Microsoft Yahei;"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="案例" style="font-family: Microsoft Yahei;">案例</h2> + +<p style="font-family: Microsoft Yahei;">由于resize事件可以以较高的速率触发, 因此事件处理程序不应该执行计算开销很大的操作 (如 DOM 修改)。相反, 建议使用<a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a>, <a href="/en-US/docs/Web/API/WindowTimers/setTimeout">setTimeout</a> or <a href="/en-US/docs/Web/API/CustomEvent">customEvent</a>, 比如:</p> + +<h3 id="requestAnimationFrame_customEvent" style="font-family: Microsoft Yahei;">requestAnimationFrame + customEvent</h3> + +<pre class="brush: js">;(function() { + var throttle = function(type, name, obj) { + obj = obj || window; + var running = false; + var func = function() { + if (running) { return; } + running = true; + requestAnimationFrame(function() { + obj.dispatchEvent(new CustomEvent(name)); + running = false; + }); + }; + obj.addEventListener(type, func); + }; + + /* init - you can init any event */ + throttle("resize", "optimizedResize"); +})(); + +// handle event +window.addEventListener("optimizedResize", function() { + console.log("Resource conscious resize callback!"); +}); +</pre> + +<h3 id="requestAnimationFrame" style="font-family: Microsoft Yahei;">requestAnimationFrame</h3> + +<pre class="brush: js">var optimizedResize = (function() { + + var callbacks = [], + running = false; + + // fired on resize event + function resize() { + + if (!running) { + running = true; + + if (window.requestAnimationFrame) { + window.requestAnimationFrame(runCallbacks); + } else { + setTimeout(runCallbacks, 66); + } + } + + } + + // run the actual callbacks + function runCallbacks() { + + callbacks.forEach(function(callback) { + callback(); + }); + + running = false; + } + + // adds callback to loop + function addCallback(callback) { + + if (callback) { + callbacks.push(callback); + } + + } + + return { + // public method to add additional callback + add: function(callback) { + if (!callbacks.length) { + window.addEventListener('resize', resize); + } + addCallback(callback); + } + } +}()); + +// start process +optimizedResize.add(function() { + console.log('Resource conscious resize callback!') +}); +</pre> + +<h3 id="setTimeout" style="font-family: Microsoft Yahei;">setTimeout</h3> + +<pre class="brush: js">(function() { + + window.addEventListener("resize", resizeThrottler, false); + + var resizeTimeout; + function resizeThrottler() { + // ignore resize events as long as an actualResizeHandler execution is in the queue + if ( !resizeTimeout ) { + resizeTimeout = setTimeout(function() { + resizeTimeout = null; + actualResizeHandler(); + + // The actualResizeHandler will execute at a rate of 15fps + }, 66); + } + } + + function actualResizeHandler() { + // handle the resize event + ... + } + +}());</pre> diff --git a/files/zh-cn/web/api/window/resizeby/index.html b/files/zh-cn/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..ad8419af50 --- /dev/null +++ b/files/zh-cn/web/api/window/resizeby/index.html @@ -0,0 +1,43 @@ +--- +title: Window.resizeBy() +slug: Web/API/Window/resizeBy +translation_of: Web/API/Window/resizeBy +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>调整窗口大小。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.resizeBy(<em>xDelta</em>, <em>yDelta</em>) +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>xDelta</code> 为窗口水平方向变化的像素值。</li> + <li><code>yDelta</code> 为窗口垂直方向变化的像素值。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">// 缩小窗口 +window.resizeBy(-200, -200); +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>该方法相对于窗口当前大小来调整该窗口的大小。要以绝对大小方式调整窗口的大小，可使用 {{domxref("window.resizeTo")}}。</p> + +<p>从 Firefox 7，依据<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">下面的规则</a>，不能再调整浏览器内一个窗口的默认大小了：</p> + +<ol> + <li>不能调整非 window.open 方法打开的窗口或 Tab 的大小。</li> + <li>当一个窗口内包含有一个以上的 Tab 时，不能调整窗口的大小。</li> +</ol> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>DOM Level 0。不属于规范。</p> diff --git a/files/zh-cn/web/api/window/resizeto/index.html b/files/zh-cn/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..96fc9833ed --- /dev/null +++ b/files/zh-cn/web/api/window/resizeto/index.html @@ -0,0 +1,34 @@ +--- +title: Window.resizeTo +slug: Web/API/Window/resizeTo +translation_of: Web/API/Window/resizeTo +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>动态调整窗口的大小。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox">window.resizeTo(<em>aWidth</em>, <em>aHeight</em>) +</pre> +<h3 id="Parameters" name="Parameters">参数</h3> +<ul> + <li><code>aWidth</code> 是一个整数，表示新的 {{domxref("window.outerWidth","outerWidth")}}（单位：像素）（包括滚动条、窗口边框等）。</li> + <li><code>aHeight</code> 是一个整数，表示新的 {{domxref("window.outerHeight","outerHeight")}}（单位：像素）（包括滚动条、标题栏、窗口边框等）。</li> +</ul> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js">// 将窗口设置为整个屏幕的 1/4 大小（面积） +function quarter() { + window.resizeTo( + window.screen.availWidth / 2, + window.screen.availHeight / 2 + ); +}</pre> +<h2 id="Notes" name="Notes">备注</h2> +<p>从 Firefox 7 开始，不能改变浏览器窗口的大小了，要依据<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">下面的规则</a>：</p> +<ol> + <li>不能设置那些不是通过 window.open 创建的窗口或 Tab 的大小。</li> + <li>当一个窗口里面含有一个以上的 Tab 时，无法设置窗口的大小。</li> +</ol> +<p>相关链接 {{domxref("window.resizeBy")}}.</p> +<h2 id="规范">规范</h2> +<p>{{dom0}}</p> diff --git a/files/zh-cn/web/api/window/restore/index.html b/files/zh-cn/web/api/window/restore/index.html new file mode 100644 index 0000000000..bc704660b6 --- /dev/null +++ b/files/zh-cn/web/api/window/restore/index.html @@ -0,0 +1,16 @@ +--- +title: Window.restore() +slug: Web/API/Window/restore +translation_of: Web/API/Window/moveTo +--- +<p>{{APIRef}}</p> + +<p>这个方法现在已经失效，不过可以使用下面的方法代替：</p> + +<p>{{domxref("window.moveTo")}}({{domxref("window.screenX")}}, {{domxref("window.screenY")}});</p> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + + + +<p>{{Compat("api.Window.restore")}}</p> diff --git a/files/zh-cn/web/api/window/screen/index.html b/files/zh-cn/web/api/window/screen/index.html new file mode 100644 index 0000000000..699d85d5c7 --- /dev/null +++ b/files/zh-cn/web/api/window/screen/index.html @@ -0,0 +1,32 @@ +--- +title: Window.screen +slug: Web/API/Window/screen +tags: + - screen +translation_of: Web/API/Window/screen +--- +<div>{{APIRef("CSSOM View")}}</div> + +<p>返回当前window的screen对象。screen对象实现了{{domxref("Screen")}}接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>screenObj</var> = <var>window</var>.screen; +</pre> + +<p> </p> + +<h2 id="Example" name="Example">示例</h2> + +<p> </p> + +<pre class="brush:js">if (screen.pixelDepth < 8) { + // use low-color version of page +} else { + // use regular, colorful page +} +</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<p>TBD</p> diff --git a/files/zh-cn/web/api/window/screenleft/index.html b/files/zh-cn/web/api/window/screenleft/index.html new file mode 100644 index 0000000000..a3a64a5164 --- /dev/null +++ b/files/zh-cn/web/api/window/screenleft/index.html @@ -0,0 +1,88 @@ +--- +title: Window.screenLeft +slug: Web/API/Window/screenLeft +translation_of: Web/API/Window/screenLeft +--- +<div>{{APIRef}}</div> + +<p><code><strong>Window.screenLeft</strong></code> 是一个只读属性，它返回浏览器左边框到左边屏幕边缘的 CSS 像素数。</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong>：<code>screenLeft</code> 只是 {{domxref("Window.screenX")}} 属性的别名，最初只被 IE 浏览器所支持。现在主流的浏览器都已支持该属性。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>leftWindowPos</em> = window.screenLeft +</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回浏览器窗口到屏幕左边缘的 CSS 像素距离数值。</p> + +<h2 id="Specifications" name="Specifications">例子</h2> + +<p>在 <a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> 项目中，展示了一个监听浏览器窗口位置变化，动态更新 canvas 的例子。在这个例子中，当你移动浏览器窗口位置，绘制在 canvas 上的圆也会对应移动。我们通过监听 <code>screenLeft</code>/<code>screenTop</code> 的变化，并使用 {{domxref("Window.requestAnimationFrame()")}} 来对 canvas 实时重绘，保证了浏览器窗口移动时，canvas 内部圆的位置也会发生对应的移动。</p> + +<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft; +initialTop = window.screenTop + canvasElem.offsetTop; + +function positionElem() { + let newLeft = window.screenLeft + canvasElem.offsetLeft; + let newTop = window.screenTop + canvasElem.offsetTop; + + let leftUpdate = initialLeft - newLeft; + let topUpdate = initialTop - newTop; + + ctx.fillStyle = 'rgb(0, 0, 0)'; + ctx.fillRect(0, 0, width, height); + ctx.fillStyle = 'rgb(0, 0, 255)'; + ctx.beginPath(); + ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false); + ctx.fill(); + + pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop; + + window.requestAnimationFrame(positionElem); +} + +window.requestAnimationFrame(positionElem);</pre> + +<p>如果浏览器不支持 <code>screenLeft</code>属性，我们还在代码中使用了一个 polyfill 来保证演示效果。通过设置 {{domxref("Window.screenX")}}/{{domxref("Window.screenY")}} 为对应别名来实现一样的功能。</p> + +<pre class="brush: js">if(!window.screenLeft) { + window.screenLeft = window.screenX; + window.screenTop = window.screenY; +}</pre> + +<h2 id="Specifications" name="Specifications">说明</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">提交</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenLeft') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.screenLeft")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("window.screenTop")}}</li> + <li>{{domxref("Window.screenX")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/screentop/index.html b/files/zh-cn/web/api/window/screentop/index.html new file mode 100644 index 0000000000..35067bb48d --- /dev/null +++ b/files/zh-cn/web/api/window/screentop/index.html @@ -0,0 +1,88 @@ +--- +title: Window.screenTop +slug: Web/API/Window/screenTop +translation_of: Web/API/Window/screenTop +--- +<p>{{APIRef}}</p> + +<p><code><strong>Window.screenTop</strong></code> 只读属性返回垂直距离，单位是CSS 像素, 从用户浏览器的上边界到屏幕最顶端。</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: <code>screenTop</code> is an alias of the older {{domxref("Window.screenY")}} property. <code>screenTop</code> was originally supported only in IE but was introduced everywhere due to popularity.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>topWindowPos</em> = window.screenTop +</pre> + +<h3 id="返回值">返回值</h3> + +<p>A number equal to the number of CSS pixels from the top edge of the browser viewport to the top edge of the screen.</p> + +<h2 id="Specifications" name="Specifications">例子</h2> + +<p>In our <a href="https://mdn.github.io/dom-examples/screenleft-screentop/">screenleft-screentop</a> example, you'll see a canvas onto which has been drawn a circle. In this example we are using <code>screenLeft</code>/<code>screenTop</code> plus {{domxref("Window.requestAnimationFrame()")}} to constantly redraw the circle in the same physical position on the screen, even if the window position is moved.</p> + +<pre class="brush: js">initialLeft = window.screenLeft + canvasElem.offsetLeft; +initialTop = window.screenTop + canvasElem.offsetTop; + +function positionElem() { + let newLeft = window.screenLeft + canvasElem.offsetLeft; + let newTop = window.screenTop + canvasElem.offsetTop; + + let leftUpdate = initialLeft - newLeft; + let topUpdate = initialTop - newTop; + + ctx.fillStyle = 'rgb(0, 0, 0)'; + ctx.fillRect(0, 0, width, height); + ctx.fillStyle = 'rgb(0, 0, 255)'; + ctx.beginPath(); + ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false); + ctx.fill(); + + pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop; + + window.requestAnimationFrame(positionElem); +} + +window.requestAnimationFrame(positionElem);</pre> + +<p>Also in the code we include a snippet that detects whether <code>screenLeft</code> is supported, and if not, polyfills in <code>screenLeft</code>/<code>screenTop</code> using {{domxref("Window.screenX")}}/{{domxref("Window.screenY")}}.</p> + +<pre class="brush: js">if(!window.screenLeft) { + window.screenLeft = window.screenX; + window.screenTop = window.screenY; +}</pre> + +<h2 id="Specifications" name="Specifications">说明</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-screeny', 'Window.screenTop') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.screenTop")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("window.screenLeft")}}</li> + <li>{{domxref("Window.screenY")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/screenx/index.html b/files/zh-cn/web/api/window/screenx/index.html new file mode 100644 index 0000000000..44048dfe03 --- /dev/null +++ b/files/zh-cn/web/api/window/screenx/index.html @@ -0,0 +1,21 @@ +--- +title: Window.screenX +slug: Web/API/Window/screenX +translation_of: Web/API/Window/screenX +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回浏览器左边界到操作系统桌面左边界的水平距离。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><i>lLoc</i> = window.screenX +</pre> +<ul> + <li><code>lLoc</code> 为浏览器左边到系统桌面左边的像素值</li> +</ul> +<h2 id="Specification" name="Specification">规范</h2> +<p>{{dom0}}</p> +<h2 id="See_also" name="See_also">相关链接</h2> +<ul> + <li>{{domxref("Window.screenY")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/screeny/index.html b/files/zh-cn/web/api/window/screeny/index.html new file mode 100644 index 0000000000..23f2fcdb2a --- /dev/null +++ b/files/zh-cn/web/api/window/screeny/index.html @@ -0,0 +1,21 @@ +--- +title: Window.screenY +slug: Web/API/Window/screenY +translation_of: Web/API/Window/screenY +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回浏览器顶部距离系统桌面顶部的垂直距离。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><var>lLoc</var> = window.screenY +</pre> +<ul> + <li><code>lLoc</code> 距离屏幕顶部的像素值。</li> +</ul> +<h2 id="Specification" name="Specification">规范</h2> +<p>{{dom0}}</p> +<h2 id="See_also" name="See_also">相关链接</h2> +<ul> + <li>{{domxref("window.screenX")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/scroll/index.html b/files/zh-cn/web/api/window/scroll/index.html new file mode 100644 index 0000000000..dd889bbe60 --- /dev/null +++ b/files/zh-cn/web/api/window/scroll/index.html @@ -0,0 +1,70 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +tags: + - 全局方法 +translation_of: Web/API/Window/scroll +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>滚动窗口至文档中的特定位置。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.scroll(<em>x-coord</em>, <em>y-coord</em>) +window.scroll(<em>options</em>) +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>x-coord</code> 值表示你想要置于左上角的像素点的横坐标。</li> + <li><code>y-coord</code> 值表示你想要置于左上角的像素点的纵坐标。</li> +</ul> + +<p>- 或者 -</p> + +<ul> + <li><code>options</code> 值是一个 {{domxref("ScrollToOptions")}} 字典</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:html;htmlScript:true;"><!-- 把纵轴上第 100 个像素置于窗口顶部 --> + +<button onClick="scroll(0, 100);">点击以向下滚动 100 像素</button> +</pre> + +<p>使用 <code>options</code>:</p> + +<pre class="brush: js">window.scroll({ + top: 100, + left: 100, + behavior: 'smooth' +}); +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p><a href="/zh-CN/docs/Web/API/Window/scrollTo">window.scrollTo</a> 实际上和该方法是相同的。想要重复地滚动某个距离，请使用 <a href="/zh-CN/docs/Web/API/Window/scrollBy">window.scrollBy</a>. 参见 <a href="/zh-CN/docs/Web/API/Window/scrollByLines">window.scrollByLines</a>, <a href="/zh-CN/docs/Web/API/Window/scrollByPages">window.scrollByPages</a>.</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scrollto', 'window.scrollTo()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/window/scrollbars/index.html b/files/zh-cn/web/api/window/scrollbars/index.html new file mode 100644 index 0000000000..6afc2a7ddd --- /dev/null +++ b/files/zh-cn/web/api/window/scrollbars/index.html @@ -0,0 +1,65 @@ +--- +title: Window.scrollbars +slug: Web/API/Window/scrollbars +translation_of: Web/API/Window/scrollbars +--- +<p>{{ APIRef() }}</p> + +<h3 id="概要">概要</h3> + +<p>返回可以检查其可见性的滚动条对象。</p> + +<h3 id="语法">语法</h3> + +<pre class="eval"><var>objRef</var> = window.scrollbars +</pre> + +<h3 id="示例">示例</h3> + +<p>下面的HTML示例展示了如何使用window.scrollbars对象的visible 属性。</p> + +<pre><!doctype html> +<html> +<head> + <title>Various DOM Tests</title> + <script> + var visibleScrollbars = window.scrollbars.visible; + </script> +</head> +<body> + <p>Various DOM Tests</p> +</body> +</html> +</pre> + +<h3 id="规范">规范</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td> + <td>现行标准</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td> + <td>官方推荐</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="参见">参见</h3> + +<ul> + <li><a href="/en/DOM/window.locationbar">window.locationbar</a></li> + <li><a href="/en/DOM/window.menubar">window.menubar</a></li> + <li><a href="/en/DOM/window.personalbar">window.personalbar</a></li> + <li><a href="/en/DOM/window.statusbar">window.statusbar</a></li> + <li><a href="/en/DOM/window.toolbar">window.toolbar</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/scrollby/index.html b/files/zh-cn/web/api/window/scrollby/index.html new file mode 100644 index 0000000000..fea5cc42e3 --- /dev/null +++ b/files/zh-cn/web/api/window/scrollby/index.html @@ -0,0 +1,84 @@ +--- +title: Window.scrollBy() +slug: Web/API/Window/scrollBy +tags: + - 全局方法 +translation_of: Web/API/Window/scrollBy +--- +<p>{{ APIRef() }}</p> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p>在窗口中按指定的偏移量滚动文档。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>window.scrollBy(<em>x-coord</em>, <em>y-coord</em>); +window.scrollBy(<em>options</em>) +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>X</code> 是水平滚动的偏移量，单位：像素。</li> + <li><code>Y</code> 是垂直滚动的偏移量，单位：像素。</li> +</ul> + +<p>正数坐标会朝页面的右下方滚动，负数坐标会滚向页面的左上方。</p> + +<ul> + <li><code>options</code> 是一个包含三个属性的对象：</li> +</ul> + +<ol> + <li><code><em>top</em></code> 等同于 <code><em>y-coord</em></code></li> + <li><code><font face="consolas, Liberation Mono, courier, monospace">left</font></code> 等同于 <code>x<em>-coord</em></code></li> + <li><code><em>behavior</em></code><em> 表示滚动行为，支持参数：<code>smooth</code> (平滑滚动)，<code>instant</code> (瞬间滚动)，默认值 <code>auto</code>，效果等同于 <code>instant</code></em></li> +</ol> + +<h2 id="Example" name="Example">例子</h2> + +<p>向下滚动一页：</p> + +<pre><code>window.scrollBy(0, window.innerHeight);</code> +</pre> + + + +<p>向上滚动一页：</p> + +<pre><code>window.scrollBy(0, -window.innerHeight);</code></pre> + + + +<p>使用 options：</p> + +<pre><code>window.scrollBy({ + top: 100, + left: 100, + behavior: "smooth" +});</code> +</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p><a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a> 滚动指定的距离，而 <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a> 滚动至文档中的绝对位置。另外还有 <a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td>初次定义</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/window/scrollbylines/index.html b/files/zh-cn/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..d11f31562c --- /dev/null +++ b/files/zh-cn/web/api/window/scrollbylines/index.html @@ -0,0 +1,56 @@ +--- +title: Window.scrollByLines() +slug: Web/API/Window/scrollByLines +tags: + - API + - DOM + - Method + - Non-standard + - Window + - 方法 + - 非标准 +translation_of: Web/API/Window/scrollByLines +--- +<p> </p> + +<div>{{ ApiRef() }}</div> + +<div> +<p id="comment_text_2">{{Non-standard_header}}</p> +</div> + +<h2 id="Summary" name="Summary"><font>概要</font></h2> + +<p>按给定的行数滚动文档。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.scrollByLines(<var>lines</var>) +</pre> + +<h2 id="Parameters" name="Parameters">参数</h2> + +<ul> + <li><code>lines</code> 要滚动的行数。</li> + <li><code>lines</code> 可以是正整数，也可以是负整数。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:html"><!-- 向下滚动5行。 --> +<button onclick="scrollByLines(5);">down 5 lines</button> +</pre> + +<pre class="brush:html"><!-- 向上滚动5行。 --> +<button onclick="scrollByLines(-5);">up 5 lines</button> +</pre> + +<h2 id="Specification" name="Specification"><font>规范</font></h2> + +<p id="comment_text_2">这不是任何规范的一部分。</p> + +<h2 id="See_also" name="See_also">参考</h2> + +<ul> + <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/scrollbypages/index.html b/files/zh-cn/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..f2618eca98 --- /dev/null +++ b/files/zh-cn/web/api/window/scrollbypages/index.html @@ -0,0 +1,40 @@ +--- +title: window.scrollByPages +slug: Web/API/Window/scrollByPages +translation_of: Web/API/Window/scrollByPages +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>在当前文档页面按照指定的页数翻页.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.scrollByPages(<em>pages</em>) +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>pages</code> 翻页数,正数向下翻,负数向上翻<code>.</code></li> +</ul> + +<h3 id="Example" name="Example"><code>例子</code></h3> + +<pre><code>// 当前文档向下翻一页 +window.scrollByPages(1); + +// 当前文档向上翻一页 +window.scrollByPages(-1); +</code></pre> + +<h3 id="Notes" name="Notes"><code>备注</code></h3> + +<p><code>查看 <a href="/zh-cn/DOM/window.scrollBy" title="zh-cn/DOM/window.scrollBy">window.scrollBy</a>, <a href="/zh-cn/DOM/window.scrollByLines" title="zh-cn/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="/zh-cn/DOM/window.scroll" title="zh-cn/DOM/window.scroll">window.scroll</a>, <a href="/zh-cn/DOM/window.scrollTo" title="zh-cn/DOM/window.scrollTo">window.scrollTo</a>.</code></p> + +<h3 id="Specification" name="Specification"><code>规范</code></h3> + +<p><code>DOM Level 0 不属于任何标准</code></p> + +<p><code>{{ languages( { "ja": "ja/DOM/window.scrollByPages", "pl": "pl/DOM/window.scrollByPages", "en": "en/DOM/window.scrollByPages" } ) }}</code></p> diff --git a/files/zh-cn/web/api/window/scrollmaxx/index.html b/files/zh-cn/web/api/window/scrollmaxx/index.html new file mode 100644 index 0000000000..c6cebd7d02 --- /dev/null +++ b/files/zh-cn/web/api/window/scrollmaxx/index.html @@ -0,0 +1,45 @@ +--- +title: Window.scrollMaxX +slug: Web/API/Window/scrollMaxX +tags: + - API + - DOM + - Window + - 属性 + - 接口 +translation_of: Web/API/Window/scrollMaxX +--- +<div>{{APIRef}} {{Non-standard_header}}</div> + +<p><code><strong>Window.scrollMaxX</strong></code> 只读属性，返回有关文档可水平滚动的最大像素数。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>xMax</em> = window.scrollMaxX +</pre> + +<ul> + <li><code>xMax</code> 是像素数。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">// 滚动到页面的右边缘 +let maxX = window.scrollMaxX; + +window.scrollTo(maxX, 0); +</pre> + +<h2 id="提示">提示</h2> + +<p>不要用这个属性来获得文档总宽度，文档总宽度不等于<a href="/en-US/docs/DOM/window.innerWidth" title="DOM/window.innerWidth">window.innerWidth</a> + window.scrollMaxX。因为 {{domxref("window.innerWidth")}}包含所有可见的垂直滚动条的宽度，所以结果会超出文档总宽度，多出所有可见的垂直滚动条的宽度。作为替代，可使用{{domxref("element.scrollWidth","document.body.scrollWidth")}}。查看相关：{{domxref("window.scrollMaxY")}}。</p> + +<h2 id="规范">规范</h2> + +<p id="comment_text_2">不属于任何规范。</p> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.Window.scrollMaxX")}}</p> diff --git a/files/zh-cn/web/api/window/scrollmaxy/index.html b/files/zh-cn/web/api/window/scrollmaxy/index.html new file mode 100644 index 0000000000..3012d9d244 --- /dev/null +++ b/files/zh-cn/web/api/window/scrollmaxy/index.html @@ -0,0 +1,48 @@ +--- +title: Window.scrollMaxY +slug: Web/API/Window/scrollMaxY +tags: + - API + - DOM_0 + - HTML DOM + - 参考 + - 属性 + - 非标准 +translation_of: Web/API/Window/scrollMaxY +--- +<div>{{APIRef}} {{Non-standard_header}}</div> + +<p>只读属性<code><strong>Window.scrollMaxY</strong></code>返回<code>document</code>可以纵向滚动的最大像素数目</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>yMax</em> = window.scrollMaxY +</pre> + +<ul> + <li><code>yMax</code> 是像素数。</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">// 滚动到页面的底部 +let maxY = window.scrollMaxY; + +window.scrollTo(0, maxY); +</pre> + +<h2 id="备注">备注</h2> + +<p>不要用 {{domxref("window.innerHeight")}} + window.scrollMaxY 来计算document的总高度，因为 {{domxref("window.innerHeight")}} 也包括了可见的水平滚动条的高度。正确的做法是使用 {{domxref("element.scrollHeight","document.body.scrollHeight")}} 。</p> + +<p>参见{{domxref("window.scrollMaxX")}} 和 {{domxref("window.scrollTo")}} 。</p> + +<h2 id="规范">规范</h2> + +<p id="comment_text_2">这不属于任何规范中的一部分。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.scrollMaxY")}}</p> diff --git a/files/zh-cn/web/api/window/scrollto/index.html b/files/zh-cn/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..715e3f0190 --- /dev/null +++ b/files/zh-cn/web/api/window/scrollto/index.html @@ -0,0 +1,58 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +translation_of: Web/API/Window/scrollTo +--- +<div>{{ APIRef }}</div> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p>滚动到文档中的某个坐标。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre><code>window.scrollTo(x<em>-coord</em>,<em>y-coord</em> )</code> + +<code>window.scrollTo(options)</code></pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>x-coord</code> 是文档中的横轴坐标。</li> + <li><code>y-coord</code> 是文档中的纵轴坐标。</li> + <li><code>options</code> 是一个包含三个属性的对象:</li> +</ul> + +<ol> + <li><code><em>top</em></code> 等同于 <code><em>y-coord</em></code></li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">left</span></font> 等同于 <code>x<em>-coord</em></code></li> + <li><code><em>behavior</em></code><em> 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant</em></li> +</ol> + +<dl> +</dl> + +<h2 id="Example" name="Example">例子</h2> + +<pre>window.scrollTo( 0, 1000 ); + +<code>// 设置滚动行为改为平滑的滚动 +window.scrollTo({ + top: 1000, + behavior: "smooth" +});</code> +</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>该函数实际上和 <a href="/en-US/docs/DOM/Window.scroll">window.scroll</a>是一样的。 相对滚动可以参考 <a href="/en-US/docs/DOM/Window.scrollBy">window.scrollBy</a>，<a href="/en-US/docs/DOM/Window.scrollByLines">window.scrollByLines</a>，和 <a href="/en-US/docs/DOM/Window.scrollByPages">window.scrollByPages</a>。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>{{dom0}}</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">兼容性表格由结构化的数据自动生成. 如果你想功能数据, 请点击进入 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 给我们提交 pull request.</div> + +<p>{{Compat("api.Window.scrollTo")}}</p> diff --git a/files/zh-cn/web/api/window/scrollx/index.html b/files/zh-cn/web/api/window/scrollx/index.html new file mode 100644 index 0000000000..8981bee856 --- /dev/null +++ b/files/zh-cn/web/api/window/scrollx/index.html @@ -0,0 +1,34 @@ +--- +title: Window.scrollX +slug: Web/API/Window/scrollX +translation_of: Web/API/Window/scrollX +--- +<div> + {{ APIRef() }}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回文档/页面水平方向滚动的像素值。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox">var x = window.scrollX;</pre> +<h3 id="Parameters" name="Parameters">参数</h3> +<ul> + <li><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">x</span></font> 为该文档从左侧开始滚动的像素值。</li> +</ul> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js">// 如果 scrollX 大于 400，则把文档重新滚动到左上角。 +if (window.scrollX > 400) { + window.scroll(0,0); +}</pre> +<h2 id="Notes" name="Notes">备注</h2> +<p><code style="font-size: 14px;">pageXOffset</code><span style="line-height: 1.572;"> 属性是 </span><code style="font-size: 14px;">scrollX</code><span style="line-height: 1.572;"> 属性的别名：</span></p> +<pre>window.pageXOffset == window.scrollX; // 总是 true</pre> +<p>为了跨浏览器兼容性，请使用 <code>window.pageXOffset</code> 代替 <code>window.scrollX</code>。另外，旧版本的 IE（<9）两个属性都不支持，必须通过其他的非标准属性来解决此问题。完整的兼容性代码如下：</p> +<pre class="brush:js">var x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft; +var y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;</pre> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li>CSSOM View Module: <a class="external" href="http://dev.w3.org/csswg/cssom-view/#widl-Window-scrollX">window.scrollX</a> (Editor's Draft)</li> +</ul> +<h2 id="See_also" name="See_also">相关链接</h2> +<ul> + <li>{{domxref("window.scrollY")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/scrolly/index.html b/files/zh-cn/web/api/window/scrolly/index.html new file mode 100644 index 0000000000..7bc49120f2 --- /dev/null +++ b/files/zh-cn/web/api/window/scrolly/index.html @@ -0,0 +1,131 @@ +--- +title: Window.scrollY +slug: Web/API/Window/scrollY +tags: + - API + - Reference + - 参考 + - 属性 +translation_of: Web/API/Window/scrollY +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>返回文档在垂直方向已滚动的像素值。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var y = window.scrollY;</pre> + +<ul> + <li><code>y</code> 是文档从顶部开始滚动过的像素值。</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">// 保证刚好滚动到第二页 +if (window.scrollY) { + window.scroll(0, 0); // 重置滚动位置为文档的左上角 +} + +window.scrollByPages(1);</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>如果正在使用相对滚动函数，如 {{domxref("window.scrollBy")}}、{{domxref("window.scrollByLines")}} 或 {{domxref("window.scrollByPages")}}，则需要使用该属性来检测文档是否已被滚动了某段距离。</p> + +<p><code>pageYOffset</code> 属性是 <code>scrollY</code> 属性的别名：</p> + +<pre>window.pageYOffset == window.scrollY; // 总是返回 true</pre> + +<p>为了跨浏览器兼容，请使用 <code>window.pageYOffset</code> 代替 <code>window.scrollY</code>。另外，旧版本IE（<9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：</p> + +<pre class="brush: js">var supportPageOffset = window.pageXOffset !== undefined; +var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); + +var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft; +var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;</pre> + +<h2 id="Specification" name="Specification">规范</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('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<div id="compat-desktop"> +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Microsoft Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li>{{domxref("window.scrollX")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/self/index.html b/files/zh-cn/web/api/window/self/index.html new file mode 100644 index 0000000000..2d0504ef26 --- /dev/null +++ b/files/zh-cn/web/api/window/self/index.html @@ -0,0 +1,22 @@ +--- +title: Window.self +slug: Web/API/Window/self +translation_of: Web/API/Window/self +--- +<p>{{ APIRef() }}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回一个指向当前 window 对象的引用。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="eval"><i>objRef</i> = window.self +</pre> +<h2 id="Example" name="Example">示例</h2> +<pre> if (window.parent.frames[0] != window.self) { + // 当前对象不是frames列表中的第一个时 + } +</pre> +<h2 id="Notes" name="Notes">备注</h2> +<p><b>window.self</b> 几乎总是用于上面示例那样的比较，用来判断当前 window 是不是父 frameset 中的第一个 frame。</p> +<h2 id="Specification" name="Specification">规范</h2> +<p>HTML5</p> +<div class="noinclude"> + </div> diff --git a/files/zh-cn/web/api/window/sessionstorage/index.html b/files/zh-cn/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..d11bc0497a --- /dev/null +++ b/files/zh-cn/web/api/window/sessionstorage/index.html @@ -0,0 +1,113 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Web Storage + - WindowSessionStorage + - sessionStorage + - 存储 + - 属性 +translation_of: Web/API/Window/sessionStorage +--- +<p>{{APIRef()}}</p> + +<p><code>sessionStorage</code> 属性允许你访问一个，对应当前源的 session {{domxref("Storage")}} 对象。它与 {{domxref("Window.localStorage", "localStorage")}} 相似，不同之处在于 <code>localStorage</code> 里面存储的数据没有过期时间设置，而存储在 <code>sessionStorage</code> 里面的数据在页面会话结束时会被清除。</p> + +<ul> + <li>页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。</li> + <li><strong>在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，</strong>这点和 session cookies 的运行方式不同。</li> + <li>打开多个相同的URL的Tabs页面，会创建各自的<code>sessionStorage</code>。</li> + <li>关闭对应浏览器窗口（Window）/ tab，会清除对应的<code>sessionStorage</code>。 </li> +</ul> + +<div class="blockIndicator note"> +<p>应该注意，存储在sessionStorage或localStorage中的数据<strong>特定于页面的协议</strong>。也就<br> + 是说<code><strong>http</strong>://example.com</code> 与 <code><strong>https</strong>://example.com</code>的sessionStorage相互隔离。</p> + +<p>被存储的键值对总是以UTF-16 <a href="/zh-CN/docs/Web/API/DOMString">DOMString</a> 的格式所存储，其使用两个字节来表示一个字符。对于对象、整数key值会自动转换成字符串形式。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js notranslate">// 保存数据到 sessionStorage +sessionStorage.setItem('key', 'value'); + +// 从 sessionStorage 获取数据 +let data = sessionStorage.getItem('key'); + +// 从 sessionStorage 删除保存的数据 +sessionStorage.removeItem('key'); + +// 从 sessionStorage 删除所有保存的数据 +sessionStorage.clear(); + +</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("Storage")}} 对象。</p> + +<h2 id="示例">示例</h2> + +<p>下面的代码访问当前域名的 session {{domxref("Storage")}} 对象，并使用 {{domxref("Storage.setItem()")}} 访问往里面添加一个数据条目。</p> + +<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre> + +<p>下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。</p> + +<pre class="brush: js notranslate">// 获取文本输入框 +let field = document.getElementById("field"); + +// 检测是否存在 autosave 键值 +// (这个会在页面偶然被刷新的情况下存在) +if (sessionStorage.getItem("autosave")) { + // 恢复文本输入框的内容 + field.value = sessionStorage.getItem("autosave"); +} + +// 监听文本输入框的 change 事件 +field.addEventListener("change", function() { + // 保存结果到 sessionStorage 对象中 + sessionStorage.setItem("autosave", field.value); +}); +</pre> + +<div class="note"> +<p><strong>备注：</strong>完整的使用示例可以查看<a href="/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a>一文。</p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Window.sessionStorage")}}<br> + <span>各浏览器支持的 localStorage 和 sessionStorage 容量上限不同。测试页面 </span><a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a><span>。</span></p> + +<div id="compat-mobile"></div> + +<div class="note"> +<p><strong>Note: </strong>从iOS 5.1之后，移动端的Safari将localStorage数据存储在cache文件中，在操作系统的要求下，会偶尔进行清除，特别是空间不足时。</p> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">使用 Web Storage API</a></li> + <li>{{domxref("Window.localStorage")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/setcursor/index.html b/files/zh-cn/web/api/window/setcursor/index.html new file mode 100644 index 0000000000..d87850c4d3 --- /dev/null +++ b/files/zh-cn/web/api/window/setcursor/index.html @@ -0,0 +1,32 @@ +--- +title: Window.setCursor() +slug: Web/API/Window/setCursor +translation_of: Web/API/Window/setCursor +--- +<div>{{ ApiRef() }}</div> + +<div> +<p id="comment_text_2">{{Non-standard_header}}</p> +</div> + +<div> </div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>在当前窗口中改变光标（鼠标）的样子</p> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="syntaxbox">function setBusyCursor(enable) { + window.setCursor(enable ? "wait" : "auto"); +}</pre> + +<h2 id="Notes" name="Notes">提示</h2> + +<p>鼠标样式不会自动重置，需要主动设置回 <code>auto</code> 属性。</p> + +<p>这个函数方法是 <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow">ChromeWindow interface</a> 的一部分. 这个方法在某些网页上不能用, 可以使用 CSS {{cssxref("cursor")}} 代替.</p> + +<h2 id="规范">规范</h2> + +<p id="comment_text_2">这不是任何规范的一部分</p> diff --git a/files/zh-cn/web/api/window/setimmediate/index.html b/files/zh-cn/web/api/window/setimmediate/index.html new file mode 100644 index 0000000000..12016988ac --- /dev/null +++ b/files/zh-cn/web/api/window/setimmediate/index.html @@ -0,0 +1,54 @@ +--- +title: window.setImmediate +slug: Web/API/Window/setImmediate +tags: + - DOM + - setImmediate +translation_of: Web/API/Window/setImmediate +--- +<p>{{APIRef("HTML DOM")}}{{Non-standard_header}}</p> + +<p>该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。</p> + +<div class="note"><strong>注意:</strong> 该方法可能不会被批准成为标准，目前只有最新版本的 Internet Explorer 和Node.js 0.10+实现了该方法。<span style="font-size: 1rem; letter-spacing: -0.00278rem;">它遇到了 </span><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201" style="font-size: 1rem; letter-spacing: -0.00278rem;" title="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">(Firefox) 和</span><a href="http://code.google.com/p/chromium/issues/detail?id=146172" style="font-size: 1rem; letter-spacing: -0.00278rem;" title="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> (Google/Apple) 的阻力.</span></div> + +<h2 id="语法">语法</h2> + +<pre>var immediateID = setImmediate(func, [param1, param2, ...]); +var immediateID = setImmediate(func); +</pre> + +<ul> + <li><code>immediateID</code> 是这次setImmediate方法设置的唯一ID,可以作为 {{ domxref("window.clearImmediate") }} 的参数.</li> + <li><code>func</code> 是将要执行的回调函数</li> +</ul> + +<p>所有参数都会直接传给你的函数。</p> + +<h2 id="备注">备注</h2> + +<p>{{ domxref("window.clearImmediate") }} 方法可以用来取消通过setImmediate设置的将要执行的语句, 就像 {{ domxref("window.clearTimeout") }} 对应于 {{ domxref("window.setTimeout") }}一样.</p> + +<p>该方法可以用来替代 <code>setTimeout(fn, 0)</code> 去执行<a href="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/">繁重的操作</a>(<a href="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/" title="http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/">heavy operations</a>) </p> + +<p>可以通过以下几种方式来模仿该功能:</p> + +<ul> + <li>{{ domxref("window.postMessage") }} 可以被用来触发一个 immediate 但会产生回调. 请注意, Internet Explorer 8包含postMessage的同步版本, 这意味着它不能被用来作为代替品.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#channel-messaging">MessageChannel</a> 可以在Web Workers 内部很好的被使用, 而postMessage 的语义意味着它不能在那使用.</li> + <li><code>setTimeout(fn, 0)</code><em>可以使用</em>, 然而按照<a href="https://html.spec.whatwg.org/multipage/webappapis.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dom-windowtimers-settimeout">HTML规范</a>, 嵌套深度超过5级的定时器, 会被限制在4ms , 他没有为setImmediate的天然及时性提供合适的polyfill.</li> +</ul> + +<p>所有这些技术都被纳入 <a href="https://github.com/NobleJS/setImmediate" title="https://github.com/NobleJS/setImmediate">robust setImmediate polyfill</a> 中.</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Window.setImmediate")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<p>{{ domxref("window.clearImmediate") }}</p> + +<p>{{ spec("https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html", "Specification: Efficient Script Yielding") }}</p> + +<p><a class="external" href="http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html">Microsoft setImmediate API Demo</a></p> diff --git a/files/zh-cn/web/api/window/setinterval/index.html b/files/zh-cn/web/api/window/setinterval/index.html new file mode 100644 index 0000000000..385a19b81b --- /dev/null +++ b/files/zh-cn/web/api/window/setinterval/index.html @@ -0,0 +1,635 @@ +--- +title: window.setInterval +slug: Web/API/Window/setInterval +tags: + - API + - DOM + - 定时 + - 方法 + - 时间 +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("WindowOrWorkerGlobalScope")}} 的 <strong><code>setInterval()</code> </strong>方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。</p> + +<p><span class="seoSummary">在窗口和工作接口上提供的<strong>setInterval()</strong>方法重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。它返回一个时间间隔ID，该ID唯一地标识时间间隔，因此您可以稍后通过调用<strong>clearInterval()</strong>来删除它。这个方法是由<strong>WindowOrWorkerGlobalScope mixin</strong>定义的。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>, [<em>arg1</em>, <em>arg2</em>, ...]); +<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>func</code></dt> + <dd>要重复调用的函数。 每经过指定 <code>延迟</code> 毫秒后执行的{{jsxref("函数")}} 。该函数不接受任何参数，也没有返回值。</dd> + <dt><code>code</code></dt> + <dd>这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每个delay毫秒时间内执行一次。这个语法因为存在安全风险所以不被推荐使用。</dd> + <dt><code>delay</code></dt> + <dd>是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和<a href="/en-US/docs/DOM/window.setTimeout#Minimum_delay_and_timeout_nesting" title="en-US/docs/DOM/window.setTimeout#Minimum delay and timeout nesting">setTimeout</a>一样，实际的延迟时间可能会稍长一点。这个时间计算单位是毫秒（千分之一秒），这个定时器会使指定方法或者代码段执行的时候进行时间延迟。如果这个参数值小于10，则默认使用值为10。请注意，真正延迟时间或许更长； 请参考示例： {{SectionOnPage("/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "Reasons for delays longer than specified")}} </dd> + <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt> + <dd>当定时器过期的时候，将被传递给func指定函数的附加参数。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>此返回值<code>intervalID</code>是一个非零数值，用来标识通过<code>setInterval()</code>创建的计时器，这个值可以用来作为<code>clearInterval()</code>的参数来清除对应的计时器 。</p> + +<p>值得注意的是，<code>setInterval()</code>和<code>setTimeout()</code>共享同一个ID池，并且<code>clearInterval()</code>和<code>clearTimeout()</code>在技术上是可互换使用的。但是，我们必须去匹配<code>clearInterval()</code>和<code>clearTimeout()</code>对应的<code>id，以</code>避免代码杂乱无章，增强代码的可维护性。</p> + +<div class="note"><strong>Note</strong>: The <code>delay</code> argument is converted to a signed 32-bit integer. This effectively limits <code>delay</code> to 2147483647 ms, since it's specified as a signed integer in the IDL.</div> + +<h2 id="示例">示例</h2> + +<h3 id="例１：基本用法">例１：基本用法</h3> + +<p>下面例子是 <code>setInterval()</code>的基本语法</p> + +<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2'); + +function myCallback(a, b) +{ + // Your code here + // Parameters are purely optional. + console.log(a); + console.log(b); +} +</pre> + +<h3 id="例２：两种颜色的切换">例２：两种颜色的切换</h3> + +<p>下面的例子里会每隔一秒就调用函数 <code>flashtext()</code> 一次，直至你通过按下 Stop 按钮来清除本次重复操作的唯一辨识符 <code>intervalID</code>。</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>setInterval/clearInterval example</title> + + <script> + var nIntervId; + + function changeColor() { + nIntervId = setInterval(flashText, 1000); + } + + function flashText() { + var oElem = document.getElementById('my_box'); + oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red'; + // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator. + } + + function stopTextColor() { + clearInterval(nIntervId); + } + </script> +</head> + +<body onload="changeColor();"> + <div id="my_box"> + <p>Hello World</p> + </div> + + <button onclick="stopTextColor();">Stop</button> +</body> +</html> +</pre> + +<h3 id="例３：打字机效果">例３：打字机效果</h3> + +<p>下面这个例子通过键入、删除和再次键入所有 <a href="/en-US/docs/DOM/NodeList"><code>NodeList</code></a> 中的符合特定的选择器的字符，以达到打字机的效果。</p> + +<div> +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8" /> +<title>JavaScript Typewriter - MDN Example</title> +<script> +function Typewriter (sSelector, nRate) { + + function clean () { + clearInterval(nIntervId); + bTyping = false; + bStart = true; + oCurrent = null; + aSheets.length = nIdx = 0; + } + + function scroll (oSheet, nPos, bEraseAndStop) { + if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; } + + var oRel, bExit = false; + + if (aMap.length === nPos) { aMap.push(0); } + + while (aMap[nPos] < oSheet.parts.length) { + oRel = oSheet.parts[aMap[nPos]]; + + scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true; + + if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { + bExit = true; + oCurrent = oRel.ref; + sPart = oCurrent.nodeValue; + oCurrent.nodeValue = ""; + } + + oSheet.ref.appendChild(oRel.ref); + if (bExit) { return false; } + } + + aMap.length--; + return true; + } + + function typewrite () { + if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } + + oCurrent.nodeValue += sPart.charAt(0); + sPart = sPart.slice(1); + } + + function Sheet (oNode) { + this.ref = oNode; + if (!oNode.hasChildNodes()) { return; } + this.parts = Array.prototype.slice.call(oNode.childNodes); + + for (var nChild = 0; nChild < this.parts.length; nChild++) { + oNode.removeChild(this.parts[nChild]); + this.parts[nChild] = new Sheet(this.parts[nChild]); + } + } + + var + nIntervId, oCurrent = null, bTyping = false, bStart = true, + nIdx = 0, sPart = "", aSheets = [], aMap = []; + + this.rate = nRate || 100; + + this.play = function () { + if (bTyping) { return; } + if (bStart) { + var aItems = document.querySelectorAll(sSelector); + + if (aItems.length === 0) { return; } + for (var nItem = 0; nItem < aItems.length; nItem++) { + aSheets.push(new Sheet(aItems[nItem])); + /* Uncomment the following line if you have previously hidden your elements via CSS: */ + // aItems[nItem].style.visibility = "visible"; + } + + bStart = false; + } + + nIntervId = setInterval(typewrite, this.rate); + bTyping = true; + }; + + this.pause = function () { + clearInterval(nIntervId); + bTyping = false; + }; + + this.terminate = function () { + oCurrent.nodeValue += sPart; + sPart = ""; + for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false)); + clean(); + }; +} + +/* usage: */ +var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); + +/* default frame rate is 100: */ +var oTWExample2 = new Typewriter("#controls"); + +/* you can also change the frame rate value modifying the "rate" property; for example: */ +// oTWExample2.rate = 150; + +onload = function () { + oTWExample1.play(); + oTWExample2.play(); +}; +</script> +<style type="text/css"> +span.intLink, a, a:visited { + cursor: pointer; + color: #000000; + text-decoration: underline; +} + +#info { + width: 180px; + height: 150px; + float: right; + background-color: #eeeeff; + padding: 4px; + overflow: auto; + font-size: 12px; + margin: 4px; + border-radius: 5px; + /* visibility: hidden; */ +} +</style> +</head> + +<body> + +<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p> +<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span>&nbsp;]</p> +<div id="info"> +Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. +</div> +<h1>JavaScript Typewriter</h1> + +<div id="article"> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> +<form> +<p>Phasellus ac nisl lorem: <input type="text" /><br /> +<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p> +<input type="submit" value="Send" /> +</form> +<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p> +<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> +</div> +</body> +</html></pre> +</div> + +<p><a href="/files/3997/typewriter.html">查看示例效果</a>，亦可参考：<a href="https://developer.mozilla.org/zh-CN/docs/DOM/window.clearInterval" title="en-US/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>。</p> + +<h2 id="回调参数">回调参数</h2> + +<p>如前所述，Internet Explorer 9及以下版本不支持在<code>setTimeout()</code>或<code>setInterval()</code>中向回调函数传递参数。下面的IE专用代码演示了一种克服这种限制的方法。使用时，只需将以下代码添加到你的脚本顶部即可。</p> + +<pre class="brush:js notranslate">/*\ +|*| +|*| IE-specific polyfill that enables the passage of arbitrary arguments to the +|*| callback functions of javascript timers (HTML5 standard syntax). +|*| +|*| https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval +|*| https://developer.mozilla.org/User:fusionchess +|*| +|*| Syntax: +|*| var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]); +|*| var timeoutID = window.setTimeout(code, delay); +|*| var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]); +|*| var intervalID = window.setInterval(code, delay); +|*| +\*/ + +if (document.all && !window.setTimeout.isPolyfill) { + var __nativeST__ = window.setTimeout; + window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + window.setTimeout.isPolyfill = true; +} + +if (document.all && !window.setInterval.isPolyfill) { + var __nativeSI__ = window.setInterval; + window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + window.setInterval.isPolyfill = true; +} +</pre> + +<p>另一种方式是使用匿名函数调用你的回调函数，但是这种方式开销较大。例如：</p> + +<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre> + +<p>还有一种方式是使用 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>. 例如：</p> + +<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre> + +<p>{{h3_gecko_minversion("Inactive tabs", "5.0")}}</p> + +<p>Starting in Gecko 5.0 {{geckoRelease("5.0")}}, intervals are clamped to fire no more often than once per second in inactive tabs.</p> + +<h2 id="this_的问题">"<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" 的问题</h2> + +<p>当你给 <code>setInterval()</code> 传递一个方法或者函数的时候，<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 值的绑定会存在一些问题。 这个问题在<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript 参考</a> 进行了详细解释。</p> + +<h3 id="解释">解释</h3> + +<p>Code executed by <code>setInterval()</code> runs in a separate execution context than the function from which it was called. As a consequence, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> keyword for the called function is set to the <code>window</code> (or <code>global</code>) object, it is not the same as the <code>this</code> value for the function that called <code>setTimeout</code>. See the following example (which uses <code>setTimeout()</code> instead of <code>setInterval()</code> – the problem, in fact, is the same for both timers):</p> + +<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; + +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // prints "zero,one,two" +myArray.myMethod(1); // prints "one" +setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second +setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds +// passing the 'this' object with .call won't work +// because this will change the value of this inside setTimeout itself +// while we want to change the value of this inside myArray.myMethod +// in fact, it will be an error because setTimeout code expects this to be the window object: +setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error +</pre> + +<p>As you can see there are no ways to pass the <code>this</code> object to the callback function in the legacy JavaScript.</p> + +<h3 id="一个可能的解决方案">一个可能的解决方案</h3> + +<p>A possible way to solve the "<code>this</code>" problem is to replace the two native <code>setTimeout()</code> or <code>setInterval()</code> global functions with two <em>non-native</em> ones that enable their invocation through the <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> method. The following example shows a possible replacement:</p> + +<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers + +var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; + +window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +}; + +window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +};</pre> + +<div class="note">These two replacements also enable the HTML5 standard passage of arbitrary arguments to the callback functions of timers in IE. So they can be used as <em>non-standard-compliant</em> polyfills also. See the <a href="#Callback_arguments">callback arguments paragraph</a> for a <em>standard-compliant</em> polyfill.</div> + +<p>New feature test:</p> + +<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; + +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but... +setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds +</pre> + +<p>Another, more complex, solution for<strong> </strong>the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> problem<strong> </strong>is <a href="#MiniDaemon_-_A_framework_for_managing_timers">the following framework</a>.</p> + +<div class="note">JavaScript 1.8.5 introduces the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method, which lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Also, ES2015 supports <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, with lexical this allowing us to write setInterval( () => this.myMethod) if we're inside myArray method.</div> + +<h2 id="MiniDaemon：一个用于管理定时器的小框架">MiniDaemon：一个用于管理定时器的小框架</h2> + +<p>In pages requiring many timers, it can often be difficult to keep track of all of the running timer events. One approach to solving this problem is to store information about the state of a timer in an object. Following is a minimal example of such an abstraction. The constructor architecture explicitly avoids the use of closures. It also offers an alternative way to pass the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object to the callback function (see <a href="#The_.22this.22_problem">The "this" problem</a> for details). The following code is also <a href="https://github.com/madmurphy/minidaemon.js">available on GitHub</a>.</p> + +<div class="note">For a more complex but still modular version of it (<code><em>Daemon</em></code>) see <a href="/en-US/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a>. This more complex version is nothing but a big and scalable collection of methods for the <code><em>Daemon</em></code> constructor. However, the <code><em>Daemon</em></code> constructor itself is nothing but a clone of <code><em>MiniDaemon</em></code> with an added support for <em>init</em> and <em>onstart</em> functions declarable during the instantiation of the <code><em>daemon</em></code>. <strong>So the <code><em>MiniDaemon</em></code> framework remains the recommended way for simple animations</strong>, because <code><em>Daemon</em></code> without its collection of methods is essentially a clone of it.</div> + +<h3 id="minidaemon.js">minidaemon.js</h3> + +<div> +<pre class="brush:js notranslate">/*\ +|*| +|*| :: MiniDaemon :: +|*| +|*| Revision #2 - September 26, 2014 +|*| +|*| https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval +|*| https://developer.mozilla.org/User:fusionchess +|*| https://github.com/madmurphy/minidaemon.js +|*| +|*| This framework is released under the GNU Lesser General Public License, version 3 or later. +|*| http://www.gnu.org/licenses/lgpl-3.0.html +|*| +\*/ + +function MiniDaemon (oOwner, fTask, nRate, nLen) { + if (!(this && this instanceof MiniDaemon)) { return; } + if (arguments.length < 2) { throw new TypeError('MiniDaemon - not enough arguments'); } + if (oOwner) { this.owner = oOwner; } + this.task = fTask; + if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); } + if (nLen > 0) { this.length = Math.floor(nLen); } +} + +MiniDaemon.prototype.owner = null; +MiniDaemon.prototype.task = null; +MiniDaemon.prototype.rate = 100; +MiniDaemon.prototype.length = Infinity; + + /* These properties should be read-only */ + +MiniDaemon.prototype.SESSION = -1; +MiniDaemon.prototype.INDEX = 0; +MiniDaemon.prototype.PAUSED = true; +MiniDaemon.prototype.BACKW = true; + + /* Global methods */ + +MiniDaemon.forceCall = function (oDmn) { + oDmn.INDEX += oDmn.BACKW ? -1 : 1; + if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; } + return true; +}; + + /* Instances methods */ + +MiniDaemon.prototype.isAtEnd = function () { + return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length; +}; + +MiniDaemon.prototype.synchronize = function () { + if (this.PAUSED) { return; } + clearInterval(this.SESSION); + this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this); +}; + +MiniDaemon.prototype.pause = function () { + clearInterval(this.SESSION); + this.PAUSED = true; +}; + +MiniDaemon.prototype.start = function (bReverse) { + var bBackw = Boolean(bReverse); + if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; } + this.BACKW = bBackw; + this.PAUSED = false; + this.synchronize(); +}; +</pre> +</div> + +<div class="note">MiniDaemon passes arguments to the callback function. If you want to work on it with browsers that natively do not support this feature, use one of the methods proposed above.</div> + +<h3 id="语法_2">语法</h3> + +<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p> + +<h3 id="说明">说明</h3> + +<p>Returns a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> containing all information needed by an animation (like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object, the callback function, the length, the frame-rate).</p> + +<h4 id="参数_2">参数</h4> + +<dl> + <dt><code>thisObject</code></dt> + <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which the <em>callback</em> function is called. It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd> + <dt><code>callback</code></dt> + <dd>The function that is repeatedly invoked . <strong>It is called with three arguments</strong>: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the <em>daemon</em> - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and <em>backwards</em> (a boolean expressing whether the <em>index</em> is increasing or decreasing). It is something like <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>). <strong>If the callback function returns a <code>false</code> value the <em>daemon</em> is paused</strong>.</dd> + <dt><code>rate (optional)</code></dt> + <dd>The time lapse (in number of milliseconds) between each invocation. The default value is 100.</dd> + <dt><code>length (optional)</code></dt> + <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>. The default value is <code>Infinity</code>.</dd> +</dl> + +<h4 id="MiniDaemon_实例（instance）的属性"><code>MiniDaemon</code> 实例（instance）的属性</h4> + +<dl> + <dt><code>myDaemon.owner</code></dt> + <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> object on which is executed the daemon (read/write). It can be an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> or <code>null</code>.</dd> + <dt><code>myDaemon.task</code></dt> + <dd>The function that is repeatedly invoked (read/write). It is called with three arguments: <em>index</em> (the iterative index of each invocation), <em>length</em> (the number of total invocations assigned to the daemon - finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) and backwards (a boolean expressing whether the <em>index</em> is decreasing or not) – see above. If the <code>myDaemon.task</code> function returns a <code>false</code> value the <em>daemon</em> is paused.</dd> + <dt><code>myDaemon.rate</code></dt> + <dd>The time lapse (in number of milliseconds) between each invocation (read/write).</dd> + <dt><code>myDaemon.length</code></dt> + <dd>The total number of invocations. It can be a positive integer or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> (read/write).</dd> +</dl> + +<h4 id="MiniDaemon_实例的方法"><code>MiniDaemon</code> 实例的方法</h4> + +<dl> + <dt><code>myDaemon.isAtEnd()</code></dt> + <dd>Returns a boolean expressing whether the <em>daemon</em> is at the start/end position or not.</dd> + <dt><code>myDaemon.synchronize()</code></dt> + <dd>Synchronize the timer of a started daemon with the time of its invocation.</dd> + <dt><code>myDaemon.pause()</code></dt> + <dd>Pauses the daemon.</dd> + <dt><code>myDaemon.start([<em>reverse</em>])</code></dt> + <dd>Starts the daemon forward (<em>index</em> of each invocation increasing) or backwards (<em>index</em> decreasing).</dd> +</dl> + +<h4 id="MiniDaemon_全局对象的方法"><code>MiniDaemon</code> 全局对象的方法</h4> + +<dl> + <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt> + <dd>Forces a single callback to the <code><em>minidaemon</em>.task</code> function regardless of the fact that the end has been reached or not. In any case the internal <code>INDEX</code> property is increased/decreased (depending on the actual direction of the process).</dd> +</dl> + +<h3 id="使用示例">使用示例</h3> + +<p>HTML：</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>MiniDaemin Example - MDN</title> + <script type="text/javascript" src="minidaemon.js"></script> + <style type="text/css"> + #sample_div { + visibility: hidden; + } + </style> +</head> + +<body> + <p> + <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /> + <input type="button" onclick="fadeInOut.start(true);" value="fade out"> + <input type="button" onclick="fadeInOut.pause();" value="pause" /> + </p> + + <div id="sample_div">Some text here</div> + + <script type="text/javascript"> + function opacity (nIndex, nLength, bBackwards) { + this.style.opacity = nIndex / nLength; + if (bBackwards ? nIndex === 0 : nIndex === 1) { + this.style.visibility = bBackwards ? 'hidden' : 'visible'; + } + } + + var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8); + </script> +</body> +</html></pre> + +<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">View this example in action</a></p> + +<h2 id="备注">备注</h2> + +<p>The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations.</p> + +<p>You can cancel the interval using {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}.</p> + +<p>If you wish to have your function called <em>once</em> after the specified delay, use {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</p> + +<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency">Ensure that execution duration is shorter than interval frequency</h3> + +<p>If there is a possibility that your logic could take longer to execute than the interval time, it is recommended that you recursively call a named function using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}. For example, if using <code>setInterval</code> to poll a remote server every 5 seconds, network latency, an unresponsive server, and a host of other issues could prevent the request from completing in its allotted time. As such, you may find yourself with queued up XHR requests that won't necessarily return in order.</p> + +<p>In these cases, a recursive <code>setTimeout()</code> pattern is preferred:</p> + +<pre class="brush:js notranslate">(function loop(){ + setTimeout(function() { + // Your logic here + + loop(); + }, delay); +})(); +</pre> + +<p>In the above snippet, a named function <code>loop()</code> is declared and is immediately executed. <code>loop()</code> is recursively called inside <code>setTimeout()</code> after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.</p> + +<h3 id="Throttling_of_intervals">Throttling of intervals</h3> + +<p><code>setInterval()</code> is subject to the same throttling restrictions in Firefox as {{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}}; see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition (DOM Level 0)</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript 定时器</a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/settimeout/index.html b/files/zh-cn/web/api/window/settimeout/index.html new file mode 100644 index 0000000000..f9813851f7 --- /dev/null +++ b/files/zh-cn/web/api/window/settimeout/index.html @@ -0,0 +1,476 @@ +--- +title: window.setTimeout +slug: Web/API/Window/setTimeout +tags: + - Timers + - WindowOrWorkerGlobalScope + - WindowTimers + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p> {{domxref("WindowOrWorkerGlobalScope")}} 混合的 <strong><code>setTimeout()</code></strong>方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate"><code>var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>function</em>[<em>,</em> <em>delay, arg1, arg2</em>, ...]); +var timeoutID = <em>scope</em>.setTimeout(function[, <em>delay</em>]); +var<em> </em>timeoutID = <em>scope</em>.setTimeout(<em>code</em>[, <em>delay</em>]);</code></pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>function</code></dt> + <dd>{{jsxref("function")}} 是你想要在到期时间(<code>delay</code>毫秒)之后执行的<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function">函数</a>。</dd> + <dt><code>code</code></dt> + <dd>这是一个可选语法，你可以使用字符串而不是{{jsxref("function")}} ，在<code>delay</code>毫秒之后编译和执行字符串 (使用该语法是<strong>不推荐的,</strong> 原因和使用 {{jsxref("Global_Objects/eval", "eval()")}}一样，有安全风险)。</dd> + <dt><code>delay</code> {{optional_inline}}</dt> + <dd>延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的(delay毫秒数) 值长，原因请查看{{anch("实际延时比设定值更久的原因：最小延迟时间")}}。</dd> + <dt><code>arg1, ..., argN</code> {{optional_inline}}</dt> + <dd>附加参数，一旦定时器到期，它们会作为参数传递给{{jsxref("function")}} </dd> +</dl> + +<div class="note"> +<p><strong>备注</strong>：需要注意的是，IE9 及更早的 IE 浏览器不支持向回调函数传递额外参数(第一种语法)。如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看 {{anch("兼容旧环境（polyfill）")}} 一段).</p> +</div> + +<h3 id="Examples" name="Examples">返回值</h3> + +<p>返回值<code>timeoutID</code>是一个正整数，表示定时器的编号。这个值可以传递给{{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}来取消该定时器。</p> + +<p>需要注意的是<code>setTimeout()</code>和{{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}共用一个编号池，技术上，<code>clearTimeout()</code>和 {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} 可以互换。但是，为了避免混淆，不要混用取消定时函数。</p> + +<p>在同一个对象上（一个window或者worker），<code>setTimeout()</code>或者<code>setInterval()</code>在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。</p> + +<h2 id="例子">例子</h2> + +<p>下文的例子在网页中设置了两个简单的按钮，以触发 <code>setTimeout()</code> 和 <code>clearTimeout()</code> 方法：按下第一个按钮会设置一个定时器，定时器在 2s 后显示一个警告对话框，并将此次 setTimeout 的定时器 ID 保存起来，按下第二个按钮可以取消定时器。</p> + +<h3 id="HTML" style="line-height: 24px; font-size: 1.71428571428571rem;">HTML</h3> + +<pre class="brush: html notranslate"><p>Live Example</p> +<button onclick="delayedAlert();">Show an alert box after two seconds</button> +<p></p> +<button onclick="clearAlert();">Cancel alert before it happens</button> +</pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div> + +<h3 id="JavaScript" style="line-height: 24px; font-size: 1.71428571428571rem;">JavaScript</h3> + +<pre class="brush: js notranslate">var timeoutID; + +function delayedAlert() { + timeoutID = window.setTimeout(slowAlert, 2000); +} + +function slowAlert() { + alert('That was really slow!'); +} + +function clearAlert() { + window.clearTimeout(timeoutID); +} +</pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 171px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 190px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 209px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 228px; background: 0px 0px;"></div> + +<h3 id="结果展示">结果展示</h3> + +<p>{{EmbedLiveSample('例子')}}</p> + +<p>也可参考 <a href="/en-US/docs/DOM/window.clearTimeout#Example" title="en-US/docs/DOM/window.clearTimeout#Example"><code>clearTimeout()</code> </a>示例.</p> + +<h2 id="兼容旧环境（polyfill）">兼容旧环境（polyfill）</h2> + +<p>如果你需要向你的回调函数内传递一个或多个参数, 而且还需要兼容那些不支持传递额外参数(不管使用<code>setTimeout()</code> 或者 <code>setInterval()</code>)的浏览器时(比如，IE9及更早的版本), 你可以引入下面的兼容代码来支持向定时器函数传参。将以下代码添加到你代码的最上面：</p> + +<pre class="brush: js notranslate">/*\ +|*| +|*| Polyfill which enables the passage of arbitrary arguments to the +|*| callback functions of JavaScript timers (HTML5 standard syntax). +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval +|*| +|*| Syntax: +|*| var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]); +|*| var timeoutID = window.setTimeout(code, delay); +|*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]); +|*| var intervalID = window.setInterval(code, delay); +|*| +\*/ + +(function() { + setTimeout(function(arg1) { + if (arg1 === 'test') { + // feature test is passed, no need for polyfill + return; + } + var __nativeST__ = window.setTimeout; + window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function() { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + }, 0, 'test'); + + var interval = setInterval(function(arg1) { + clearInterval(interval); + if (arg1 === 'test') { + // feature test is passed, no need for polyfill + return; + } + var __nativeSI__ = window.setInterval; + window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function() { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + }, 0, 'test'); +}())</pre> + +<h3 id="针对IE的解决方法">针对IE的解决方法</h3> + +<p>如果你需要单独的针对IE9及之前浏览器的 hack 写法，你可以使用 JavaScript 条件注释：</p> + +<pre class="brush: js notranslate">/*@cc_on + // conditional IE < 9 only fix + @if (@_jscript_version <= 9) + (function(f){ + window.setTimeout = f(window.setTimeout); + window.setInterval = f(window.setInterval); + })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}}); + @end +@*/</pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 152px; background: 0px 0px;"></div> + +<p>或者使用更加清晰的 IE HTML 条件注释：</p> + +<pre class="brush: html notranslate"><!--[if lte IE 9]><script> +(function(f){ +window.setTimeout=f(window.setTimeout); +window.setInterval=f(window.setInterval); +})(function(f){return function(c,t){ +var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)} +}); +</script><![endif]--> + + +</pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"></div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 133px; background: 0px 0px;"></div> + +<h3 id="变通方法">变通方法</h3> + +<p>另一种方法是使用匿名函数包裹你的回调函数，这种方式要消耗更多资源：</p> + +<pre class="brush: js notranslate">var intervalID = setTimeout(function() { myFunc('one', 'two', 'three'); }, 1000); +</pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div> + +<p>上面那个例子也可以用<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>:</p> + +<pre class="brush: js notranslate">var intervalID = setTimeout(() => { myFunc('one', 'two', 'three'); }, 1000); +</pre> + +<p>此外，也可使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind">function's bind</a>：</p> + +<pre class="brush: js notranslate">setTimeout(function(arg1){}.bind(undefined, 10), 1000); +</pre> + +<h2 id="关于this的问题">关于"<code>this</code>"的问题</h2> + +<p>当你向 <code>setTimeout()</code> (或者其他函数)传递一个函数时,该函数中的<code>this</code>指向跟你的期望可能不同，这个问题在 <a href="/en-US/docs/JavaScript/Reference/Operators/this#Method_binding" title="en-US/docs/Core_JavaScript_1.5_Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript reference</a> 中进行了详细解释.</p> + +<h3 id="解释">解释</h3> + +<p>由<code>setTimeout()</code>调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 <code>this</code> 关键字在非严格模式会指向 <code>window</code> (或全局)对象，严格模式下为 undefined，这和所期望的<code>this</code>的值是不一样的。</p> + +<div class="note"> +<p>备注：即使是在严格模式下，<code>setTimeout()</code>的回调函数里面的<code>this</code>仍然默认指向<code>window</code>对象， 并不是<code>undefined</code>。</p> +</div> + +<p>查看下面的例子:</p> + +<pre class="brush: js notranslate">let myArray = ["zero", "one", "two"]; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // prints "zero,one,two" +myArray.myMethod(1); // prints "one"</pre> + +<p>上面这段代码正常工作，用<code>myArray</code>调用，在函数内，<code>this[sProperty]</code>等于 <code>myArray[sProperty]</code>。然后，下面这个例子：</p> + +<pre class="brush: js notranslate">setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second +setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds</pre> + +<p><code>myArray.myMethod</code>函数传递给 <code>setTimeout</code>，到了定时时间，<code>this</code>没有指向，默认指向<code>window</code>对象。并且没有方法把 <code>thisArg</code> 传递给<code>setTimeout</code>，正如Array方法的<code>forEach</code>，<code>reduce</code>等。下面的例子表示使用<code>call</code>方法设置<code>this</code>也没用。</p> + +<pre class="brush: js notranslate">setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error</pre> + +<h3 id="可能的解决方案">可能的解决方案</h3> + +<p>一个通用的方法是用包装函数来设置<code>this</code>：</p> + +<pre class="brush: js notranslate">setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds +setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre> + +<p>箭头函数也可以：</p> + +<pre class="brush: js notranslate">setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds +setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre> + +<p>另一个解决<code>this</code>问题的方法是使用两个非原生的 <code>setTimeout()</code> 和 <code>setInterval()</code> 全局函数代替原生的。该非原生的函数通过使用<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> 方法激活了正确的作用域。下面的代码显示了应该如何替换：</p> + +<pre class="brush: js notranslate">// Enable the passage of the 'this' object through the JavaScript timers + +var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; + +window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +}; + +window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +};</pre> + +<div class="note"><strong>备注:</strong> 这两个替换也让 IE支持了符合 HTML5 标准的定时器函数。所以也能作为一个 polyfills。查看 <a href="#Callback_arguments">Callback arguments</a> 一段.</div> + +<p>新特性检测:</p> + +<pre class="brush: js notranslate">let myArray = ["zero", "one", "two"]; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but... +setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds +</pre> + +<p>针对这个问题并没有原生的解决方案。</p> + +<div class="note"><strong>注：</strong>JavaScript 1.8.5 引入了 <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind()</a></code> 方法，该方法允许显式地指定函数调用时 this 所指向的值 。该方法可以帮助你解决 this 指向不确定的问题。</div> + +<p>使用<code>bind()</code>的例子：</p> + +<pre class="brush: js notranslate">let myArray = ['zero', 'one', 'two']; +myBoundMethod = (function (sProperty) { + console.log(arguments.length > 0 ? this[sProperty] : this); +}).bind(myArray); + +myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function +myBoundMethod(1); // prints "one" +setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding +setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds +</pre> + +<h2 id="备注">备注</h2> + +<p>你可以使用 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()","clearTimeout()")}}来取消定时器。</p> + +<p>如果你希望你的代码被重复的调用 (比如每 N 毫秒一次),考虑使用{{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}。</p> + +<h3 id="传递字符串字面量">传递字符串字面量</h3> + +<p>向<code>setTimeout()</code>传递一个字符串而不是函数会遭受到与使用<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval">eval</a></code>一样的风险.</p> + +<pre class="brush: js notranslate">// 推荐 +window.setTimeout(function() { + alert("Hello World!"); +}, 500); + +// 不推荐 +window.setTimeout("alert(\"Hello World!\");", 500); + +</pre> + +<p>字符串会在全局作用域内被解释执行，所以当<code>setTimeout()</code>函数执行完毕后，字符串中的变量不可用.</p> + +<h3 id="实际延时比设定值更久的原因：最小延迟时间">实际延时比设定值更久的原因：最小延迟时间</h3> + +<p>有很多因素会导致setTimeout的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。</p> + +<h4 id="最小延时_>4ms">最小延时 >=4ms</h4> + +<p>在浏览器中，<code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的。例如：</p> + +<pre class="brush: js notranslate" id="ct-0"><code>function cb() { f(); setTimeout(cb, 0); } +setTimeout(cb, 0);</code></pre> + +<pre class="brush: js notranslate"><code>setInterval(f, 0);</code></pre> + +<p>在Chrome 和 Firefox中， 定时器的第5次调用被阻塞了；在Safari是在第6次；Edge是在第3次。Gecko 从这个版本 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/56">version 56</a>开始对 <code>setInterval()</code> 开始采用这样的机制（<code>setTimeout()</code>已经实现，具体请参考以下内容)。</p> + +<p>一直以来，不同浏览器中出现这种最小延迟的情况有所不同（例如Firefox） - 从其他地方调用了setInterval( )，或者在嵌套函数调用setTimeout( ) 时（嵌套级别达到特定深度时），都会出现超时延迟。</p> + +<p>如果想在浏览器中实现0ms延时的定时器，你可以参考<a href="http://dbaron.org/log/20100309-faster-timeouts">这里</a>所说的{domxref("window.postMessage()")}}</p> + +<div class="note"> +<p><strong>Note</strong>: 最小延时, <code>DOM_MIN_TIMEOUT_VALUE</code>, 是4ms (但在Firefox中通常是是存储在 <code>dom.min_timeout_value </code>这个变量中), <code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> 的第5层.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 4 ms 是在 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 spec </a> 中精确的，并且在2010年及以后的跨浏览器中保持了一致，这个数值比 {{geckoRelease("5.0")}}规定的嵌套函数的最小延时10ms更为精确。</p> +</div> + +<h4 id="未被激活的tabs的定时最小延迟>1000ms">未被激活的tabs的定时最小延迟>=1000ms</h4> + +<p>为了优化后台tab的加载损耗（以及降低耗电量），在未被激活的tab中定时器的最小延时限制为1S(1000ms)。</p> + +<p>Firefox 从version 5 (see {{bug(633421)}}开始采取这种机制，1000ms的间隔值可以通过 <code>dom.min_background_timeout_value</code> 改变。Chrome 从 version 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>)开始采用。</p> + +<p>Android 版的Firefox对未被激活的后台tabs的使用了15min的最小延迟间隔时间 ，并且这些tabs也能完全不被加载。</p> + +<div class="note"> +<p>当 Web Audio API {{domxref("AudioContext")}} 正在被用来播放音频的时候，Firefox 50不会再限制后台tabs的加载。 后续的Firefox 51 版本修正了这个问题，即使在没有音频播放的情况下，也不再限制后台tabs的加载。这个解决了一些软件应用在后台tabs中播放基于文本的音频( note-based) 时，无法去同步音频和画面的问题。</p> +</div> + +<h4 id="追踪型脚本的最小延时限制">追踪型脚本的最小延时限制</h4> + +<p>从Firefox 55版本开始，追踪型脚本（例如 谷歌分析，或者其他的一些被Firefox 的 <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">TP lists</a> 识别为追踪型脚本的 外链URL脚本）是重点限制加载的对象。在当前正在使用的页面中，这个节流限制的延时依然是4ms。但是在后台tabs中，这个最小延时限制是10000ms（10s）,这个限制会在文档第一次加载后的30s后生效。</p> + +<p>控制这些行为的属性包含以下这些：</p> + +<ul> + <li><code>dom.min_tracking_timeout_value</code>: 4</li> + <li><code>dom.min_tracking_background_timeout_value</code>: 10000</li> + <li><code>dom.timeout.tracking_throttling_delay</code>: 30000</li> +</ul> + +<h4 id="超时延迟">超时延迟</h4> + +<p>除了"最小延时"之外，定时器仍然有可能因为当前页面（或者操作系统/浏览器本身）被其他任务占用导致延时。 需要被强调是， 直到调用 <code>setTimeout()</code>的主线程执行完其他任务之后，回调函数和代码段才能被执行。例如：</p> + +<pre class="notranslate"><code>function foo() { + console.log('foo has been called'); +} +setTimeout(foo, 0); +console.log('After setTimeout');</code></pre> + +<p>会在控制台输出:</p> + +<pre class="notranslate"><code>After setTimeout +foo has been called</code></pre> + +<p>出现这个结果的原因是，尽管<code>setTimeout</code> 以0ms的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。</p> + +<h3 id="WebExtension_Background_pages和定时器">WebExtension Background pages和定时器</h3> + +<p>在 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a> 中 background pages，timers工作不正常。这主要因为background pages实际上，并不是一次性全部加载：如果浏览器没有使用它，就不加载，如果需要就恢复。这对于WebExtension是透明的，但是有些事件(包括JS的timers)不会在不加载/恢复循环中执行，所以WebExtension中建议使用alarms。更详细的细节在<a href="https://developer.chrome.com/extensions/background_migration">合并到事件驱动后台脚本</a>。</p> + +<p>在本文写作的时候，只有Chrome展示了如上的特性 — Firefox没有未加载/恢复循环的行为，所以timers仍然可以工作。但是，仍然建议不要在WebExtension中使用timers:</p> + +<p>1.兼容Chorme。</p> + +<p>2.未来行为的改变会引起问题。</p> + +<h3 id="最大延时值">最大延时值</h3> + +<p>包括 IE, Chrome, Safari, Firefox 在内的浏览器其内部以32位带符号整数存储延时。这就会导致如果一个延时(delay)大于 2147483647 毫秒 (大约24.8 天)时就会溢出，导致定时器将会被立即执行。</p> + +<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', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Method moved to the <code>WindowOrWorkerGlobalScope</code> mixin in the latest spec.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition (DOM Level 0)</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div id="compat-desktop"> +<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.WindowOrWorkerGlobalScope.setTimeout")}}</p> +</div> + +<h2 id="See_also" name="See_also" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">相关链接：</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers" title="/en-US/docs/JavaScript/Timers">JavaScript timers</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li> + <li>{{domxref("WindowTimers.setInterval")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Timers/Daemons" title="/en-US/docs/JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/showmodaldialog/index.html b/files/zh-cn/web/api/window/showmodaldialog/index.html new file mode 100644 index 0000000000..81c0bb505f --- /dev/null +++ b/files/zh-cn/web/api/window/showmodaldialog/index.html @@ -0,0 +1,80 @@ +--- +title: Window.showModalDialog() +slug: Web/API/Window/showModalDialog +translation_of: Web/API/Window/showModalDialog +--- +<div>{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}</div> + +<p> <strong><code>Window.showModalDialog()</code></strong> 用于创建和展示一个指向特定网页的模态对话框。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>returnVal</var> = window.showModalDialog(<var>uri</var>[, <var>arguments</var>][, <var>options</var>]); +</pre> + +<p>其中</p> + +<ul> + <li><code>returnVal</code> 集合类型(Set)返回值。由<code>uri</code>指定的页面返回。</li> + <li><code>uri</code> 要在模态对话框中打开的页面URI。</li> + <li><code>arguments</code> 可选变量。可以通过该参数将需要的值传入对话框; 参数可以通过 <code><a href="/en-US/docs/DOM/window">window</a></code> 对象的<code><a href="/en-US/docs/DOM/window.dialogArguments">window.dialogArguments</a></code> 属性获取。</li> + <li><code>options</code> 可选字符串参数。用于设置对话框打开的样式，使用一个或多个逗号分隔。</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th>Syntax</th> + <th>Description</th> + </tr> + <tr> + <td><code>center: {on | off | yes | no | 1 | 0 }</code></td> + <td>If this argument's value is <code>on</code>, <code>yes</code>, or 1, the dialog window is centered on the desktop; otherwise it's hidden. The default value is <code>yes</code>.</td> + </tr> + <tr> + <td><code>dialogheight: <em>height</em></code></td> + <td>Specifies the height of the dialog box; by default, the size is specified in pixels.</td> + </tr> + <tr> + <td><code>dialogleft: <em>left</em></code></td> + <td>Specifies the horizontal position of the dialog box in relation to the upper-left corner of the desktop.</td> + </tr> + <tr> + <td><code>dialogwidth: <em>width</em></code></td> + <td>Specifies the width of the dialog box; by default, the size is specified in pixels.</td> + </tr> + <tr> + <td><code>dialogtop: <em>top</em></code></td> + <td>Specifies the vertical position of the dialog box in relation to the upper-left corner of the desktop.</td> + </tr> + <tr> + <td><code>resizable: {on | off | yes | no | 1 | 0 }</code></td> + <td>If this argument's value is <code>on</code>, <code>yes</code>, or 1, the dialog window can be resized by the user; otherwise its size is fixed. The default value is <code>no</code>.</td> + </tr> + <tr> + <td><code>scroll: {on | off | yes | no | 1 | 0 }</code></td> + <td>If this argument's value is <code>on</code>, <code>yes</code>, or 1, the dialog window has scroll bars; otherwise its size is fixed. The default value is <code>no</code>.</td> + </tr> + </tbody> +</table> + +<p>{{Note("Firefox does not implement the <code>dialogHide</code>, <code>edge</code>, <code>status</code>, or <code>unadorned</code> arguments.")}}</p> + +<h2 id="Compatibility" name="Compatibility">Compatibility</h2> + +<p>Introduced by Microsoft Internet Explorer 4. Support added to Firefox in Firefox 3 (deprectated in Fx 28), and to Safari in Safari 5.1.</p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<p><a href="/samples/domref/showModalDialog.html">Try out <code>showModalDialog()</code></a>.</p> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p><code>showModalDialog()</code> is currently being standardized as part of HTML5. The third argument (for additional options) is not present in the HTML5 version, and is (safely) ignored by both Safari and Chrome.</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><code><a href="https://msdn.microsoft.com/en-us/library/ms536759%28VS.85%29.aspx?f=255&MSPPError=-2147217396">showModalDialog()</a></code></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#dialogs-implemented-using-separate-documents">HTML5 Dialogs implemented using separate documents</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/sidebar/index.html b/files/zh-cn/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..5557b1f26c --- /dev/null +++ b/files/zh-cn/web/api/window/sidebar/index.html @@ -0,0 +1,40 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +translation_of: Web/API/Window/sidebar +--- +<div> + {{APIRef}} {{SeeCompatTable}}</div> +<p>Returns a sidebar object, which contains several methods for registering add-ons with browser.</p> +<h2 id="Example" name="Example">Example</h2> +<pre class="syntaxbox">window.sidebar.addPanel("Google", "http://www.google.com/", ""); +</pre> +<p>Note: the third empty parameter is required!</p> +<h2 id="Notes" name="Notes">Notes</h2> +<p>The sidebar object returned has the following methods:</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Method</th> + <th>Description</th> + </tr> + <tr> + <td><code>addPanel(<var>title</var>, <var>contentURL</var>, <var>customizeURL</var>)</code> {{Obsolete_inline(23)}}</td> + <td>Adds a sidebar panel. See <a href="/en-US/docs/Creating_a_Firefox_sidebar" title="Creating a Firefox sidebar">Creating a Firefox sidebar</a> for details on sidebars in Firefox 2 and later.</td> + </tr> + <tr> + <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, <var>customizeURL</var>)</code> {{Obsolete_inline(23)}}</td> + <td>Adds a sidebar panel, which is able to work in the background. This only works in SeaMonkey or Firefox 1.x; Firefox 2 and later will just do <code>addPanel()</code>.</td> + </tr> + <tr> + <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code></td> + <td>Installs a search engine. See <a href="/en-US/docs/Adding_search_engines_from_web_pages" title="Adding_search_engines_from_web_pages">Adding search engines from web pages</a> for details.</td> + </tr> + <tr> + <td><code>addMicrosummaryGenerator(<var>generatorURL</var>)</code> {{gecko_minversion_inline("1.8.1")}} {{Obsolete_inline(6)}}</td> + <td>Installs a microsummary generator.</td> + </tr> + </tbody> +</table> +<h2 id="Specification" name="Specification">Specification</h2> +<p>Mozilla-specific. Not part of any standard.</p> diff --git a/files/zh-cn/web/api/window/sizetocontent/index.html b/files/zh-cn/web/api/window/sizetocontent/index.html new file mode 100644 index 0000000000..19932356f6 --- /dev/null +++ b/files/zh-cn/web/api/window/sizetocontent/index.html @@ -0,0 +1,38 @@ +--- +title: Window.sizeToContent() +slug: Web/API/Window/sizeToContent +translation_of: Web/API/Window/sizeToContent +--- +<div>{{APIRef}}{{Non-standard_header}}</div> + +<p>The <code><strong>Window.sizeToContent()</strong></code> 方法根据窗口内容调整窗口大小。 为了使其工作，在调用此函数时应加载DOM内容，例如，一旦抛出 {{event("DOMContentLoaded")}} 事件。</p> + +<p>可以强行的调整窗口的最小尺寸。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.sizeToContent() +</pre> + +<h2 id="Example" name="Example"> 例子</h2> + +<pre class="brush:js">window.sizeToContent(); +</pre> + +<h2 id="Specification" name="Specification"> 规范说明</h2> + +<p>此功能不是任何规范的一部分</p> + +<h2 id="浏览器兼容说明">浏览器兼容说明</h2> + +<div> + + +<p>{{Compat("api.Window.sizeToContent")}}</p> +</div> + +<h2 id="其他链接">其他链接</h2> + +<ul> + <li>{{domxref("Window")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/stop/index.html b/files/zh-cn/web/api/window/stop/index.html new file mode 100644 index 0000000000..dc65485d75 --- /dev/null +++ b/files/zh-cn/web/api/window/stop/index.html @@ -0,0 +1,52 @@ +--- +title: Window.stop() +slug: Web/API/Window/stop +tags: + - API + - DOM + - Window + - 参考 + - 方法 +translation_of: Web/API/Window/stop +--- +<div> {{APIRef}}</div> + +<p><strong><code>window.stop()</code></strong> 方法的效果相当于点击了浏览器的停止按钮。由于脚本的加载顺序，该方法不能阻止已经包含在加载中的文档，但是它能够阻止图片、新窗口、和一些会延迟加载的对象的加载。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.stop() +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">window.stop(); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.stop")}}</p> diff --git a/files/zh-cn/web/api/window/storage_event/index.html b/files/zh-cn/web/api/window/storage_event/index.html new file mode 100644 index 0000000000..81d66d57bc --- /dev/null +++ b/files/zh-cn/web/api/window/storage_event/index.html @@ -0,0 +1,85 @@ +--- +title: storage +slug: Web/API/Window/storage_event +tags: + - Web Storage + - 事件 +translation_of: Web/API/Window/storage_event +--- +<p>当存储区域（localStorage 或 sessionStorage）被修改时，将触发 storage 事件。查看 <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> 来获取更多信息。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">说明</dt> + <dd style="margin: 0 0 0 120px;"><em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("StorageEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为可取消</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件目标(DOM 树中的最大目标)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件的类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件通常是否会出现冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可取消</td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>键更改时</td> + </tr> + <tr> + <td><code>oldValue</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>正在更改键的旧值</td> + </tr> + <tr> + <td><code>newValue</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>正在更改键的新值</td> + </tr> + <tr> + <td><code>url</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>键更改的文档的地址</td> + </tr> + <tr> + <td><code>storageArea</code> {{readonlyInline}}</td> + <td>{{domxref("Storage")}}</td> + <td>受影响的存储对象</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/window/top/index.html b/files/zh-cn/web/api/window/top/index.html new file mode 100644 index 0000000000..d2142ec21e --- /dev/null +++ b/files/zh-cn/web/api/window/top/index.html @@ -0,0 +1,55 @@ +--- +title: Window.top +slug: Web/API/Window/top +tags: + - API + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/top +--- +<p>{{APIRef}}</p> + +<p>返回窗口层级最顶层窗口的引用。</p> + +<h2 id="语法" name="语法">语法</h2> + +<pre class="eval">var <em>topWindow</em> = window.top; +</pre> + +<h2 id="备注" name="备注"><span style="font-family: Arial,Arial,Helvetica,sans-serif; line-height: 20px;">备注</span></h2> + +<p> <code style="font-style: normal; line-height: 1.5;"><a href="https://developer.mozilla.org/zh-CN/DOM/window.parent" title="en/DOM/window.parent">window.parent</a></code> <span style="line-height: 1.5;">返回当前窗口的直接父对象，而 </span>{{domxref("window.top")}}<span style="line-height: 1.5;"> </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: inherit;">返回最顶层的窗口对象。</span></p> + +<p> </p> + +<p>当你在处理父窗口的子框架（subframe），而你想获取顶层框架时，这个属性相当有用。</p> + +<h2 id="规范" name="规范" style="line-height: 24px;">规范</h2> + +<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', 'browsers.html#dom-top', 'window.top')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性" name="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Window.top")}}</p> diff --git a/files/zh-cn/web/api/window/updatecommands/index.html b/files/zh-cn/web/api/window/updatecommands/index.html new file mode 100644 index 0000000000..29eaef7dbf --- /dev/null +++ b/files/zh-cn/web/api/window/updatecommands/index.html @@ -0,0 +1,37 @@ +--- +title: Window.updateCommands() +slug: Web/API/Window/updateCommands +tags: + - chrome窗口（UI）的命令状态。 +translation_of: Web/API/Window/updateCommands +--- +<p>{{ ApiRef() }}{{Non-standard_header}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>更新当前chrome窗口（UI）的命令状态。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">window.updateCommands("sCommandName") +</pre> + +<h2 id="Parameters" name="Parameters"> 参数</h2> + +<ul> + <li><code>sCommandName</code> 是一个特定的字符串，它描述了这种更新事件的类型 (我们用到了背景色注明).</li> +</ul> + +<h2 id="Notes" name="Notes">记录</h2> + +<p>这将启用或禁用项目（根据需要在命令节点上设置或清除“disabled”属性），或通过在XUL命令节点的“state”属性中设置当前状态信息来确保命令状态反映选择的状态。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>DOM 0 级。不属于规范。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.updateCommands")}}</p> diff --git a/files/zh-cn/web/api/window/url/index.html b/files/zh-cn/web/api/window/url/index.html new file mode 100644 index 0000000000..6bf90043c3 --- /dev/null +++ b/files/zh-cn/web/api/window/url/index.html @@ -0,0 +1,104 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +tags: + - Window.URL +translation_of: Web/API/URL +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p><strong>Window.URL</strong> 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 {{domxref("URL")}} 对象。</p> + +<div class="note"> +<p>Note: 此功能在Web Workers中可用。</p> +</div> + +<h2 id="语法">语法</h2> + +<p>调用一个静态方法：</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>构造一个新对象：</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 从 Gecko 2 (Firefox 4) 到 包括Gecko 18, Gecko 返回一个不标准的nsIDOMMozURLProperty内部类型. 在实践中, 这是没有意义的.</p> + +<p>[2] 在非标准名称webkitURL下实现。</p> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li>{{domxref("URL")}} API.</li> +</ul> diff --git a/files/zh-cn/web/api/window/visualviewport/index.html b/files/zh-cn/web/api/window/visualviewport/index.html new file mode 100644 index 0000000000..bc751840d9 --- /dev/null +++ b/files/zh-cn/web/api/window/visualviewport/index.html @@ -0,0 +1,89 @@ +--- +title: Window.visualViewport +slug: Web/API/Window/visualViewport +translation_of: Web/API/Window/visualViewport +--- +<p>{{SeeCompatTable}}{{APIRef("Visual Viewport")}}</p> + +<p> </p> + +<p>{{domxref("Window")}} 接口的visualViewport只读属性返回一个{{domxref("VisualViewport")}}对象，该对象表示给定窗口的可视视口。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>visualViewport</em> = Window.visualViewport</pre> + +<h3 id="值">值</h3> + +<p>一个 {{domxref("VisualViewport")}} 对象。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Visual Viewport','#dom-window-visualviewport','visualViewport')}}</td> + <td>{{Spec2('Visual Viewport')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<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>{{CompatChrome(60)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(47)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(47)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/window/window.blur()/index.html b/files/zh-cn/web/api/window/window.blur()/index.html new file mode 100644 index 0000000000..0aebdbb367 --- /dev/null +++ b/files/zh-cn/web/api/window/window.blur()/index.html @@ -0,0 +1,39 @@ +--- +title: Window.blur() +slug: Web/API/Window/Window.blur() +translation_of: Web/API/Window/blur +--- +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">总结</h2> + +<p>将焦点移出顶层窗口。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><code>window.blur()</code></pre> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">window.blur();</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>使用 window.blur() 方法与用户主动将焦点移出顶层窗口本质上是一样的。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/window/window/index.html b/files/zh-cn/web/api/window/window/index.html new file mode 100644 index 0000000000..e3cab55da4 --- /dev/null +++ b/files/zh-cn/web/api/window/window/index.html @@ -0,0 +1,65 @@ +--- +title: Window.window +slug: Web/API/Window/window +translation_of: Web/API/Window/window +--- +<div>{{APIRef}}</div> + +<h2 id="摘要">摘要</h2> + +<p><span class="seoSummary">window对象的 <code>window</code> 属性指向这个window对象本身。</span>因此以下表达式所返回的window对象都是同一个。</p> + +<pre class="syntaxbox">window.window +window.window.window +window.window.window.window + ... + +</pre> + +<p>在网页中，window对象也是一个全局对象。这意味着：</p> + +<ol> + <li>脚本中的全局变量实际上是window对象的属性： + <pre class="brush:js">var global = {data: 0}; +alert(global === window.global); // displays "true" +</pre> + </li> + <li>不用写 <code>window. </code>前缀就可以访问window对象的内置属性： + <pre class="brush:js">setTimeout("alert('Hi!')", 50); // equivalent to using window.setTimeout. +alert(window === window.window); // displays "true" +</pre> + </li> +</ol> + +<p>将 <code>window</code> 属性指向该window对象本身的目的，是为了更容易引用全局对象。不然，就得在最开始写代码的时候进行手动赋值：<code>var window = this;</code> 。</p> + +<p>另外一个原因是如果没有这个属性，就不能像这样方便的写： {{domxref("window.open","window.open('http://google.com/')")}}，而只能这样： open('http://google.com/')</p> + +<p>使用该属性还有一个原因，有些库，特别是JavaScript模块希望能够提供OOP版本和非OOP版本。例如，如果引用了 <code>this.window.location.href</code> ，<a href="https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript 模块</a>就可以在它定义的类里面定义一个 <code>window </code>属性（因为默认没有全局性的 <code>window</code> 变量存在），这个属性可以在将window对象传进这个模块的类的构造器之后被创建。这样，这个类的方法中的 <code>this.window</code> 就指向了window对象。在没有命名空间的版本中，<code>this.window</code> 会重新指向window对象，从而很容易获取到文档的位置。还有一个优点，这个类（即使这个类定义在模块外面）的对象可以随意地改变对window的引用，而如果有一个写死了的window的引用就做不到这样。类内部的默认值仍然可以设置成当前的window对象。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>和最新版 {{SpecName("HTML5.1")}}一致</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'browsers.html#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>和{{SpecName("HTML5 W3C")}}一致</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>第一个包含 <code>Window.window</code> 定义的快照</td> + </tr> + </tbody> +</table> |