diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/orphaned/web | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/orphaned/web')
27 files changed, 3666 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/web/api/analysernode/fft/index.html b/files/zh-cn/orphaned/web/api/analysernode/fft/index.html new file mode 100644 index 0000000000..f553738351 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/analysernode/fft/index.html @@ -0,0 +1,7 @@ +--- +title: Directory failure 目录失效 +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 new file mode 100644 index 0000000000..2b7022c1ce --- /dev/null +++ b/files/zh-cn/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html @@ -0,0 +1,95 @@ +--- +title: AudioContext.mozAudioChannelType +slug: Web/API/AudioContext/mozAudioChannelType +translation_of: 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 new file mode 100644 index 0000000000..eb82534aed --- /dev/null +++ b/files/zh-cn/orphaned/web/api/audionode/connect(audioparam)/index.html @@ -0,0 +1,163 @@ +--- +title: AudioNode.connect(AudioParam) +slug: Web/API/AudioNode/connect(AudioParam) +translation_of: 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/document/cookie/simple_document.cookie_framework/index.html b/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html new file mode 100644 index 0000000000..450751cefa --- /dev/null +++ b/files/zh-cn/orphaned/web/api/document/cookie/simple_document.cookie_framework/index.html @@ -0,0 +1,218 @@ +--- +title: 简单的cookie框架 +slug: Web/API/Document/cookie/Simple_document.cookie_framework +tags: + - Cookies + - cookie +translation_of: 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/entity/index.html b/files/zh-cn/orphaned/web/api/entity/index.html new file mode 100644 index 0000000000..2e05365217 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/entity/index.html @@ -0,0 +1,52 @@ +--- +title: Entity +slug: Web/API/Entity +translation_of: 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 new file mode 100644 index 0000000000..9bd7699388 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/fetchobserver/index.html @@ -0,0 +1,145 @@ +--- +title: FetchObserver +slug: Web/API/FetchObserver +translation_of: 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/msselection/index.html b/files/zh-cn/orphaned/web/api/msselection/index.html new file mode 100644 index 0000000000..5760848324 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/msselection/index.html @@ -0,0 +1,103 @@ +--- +title: MSSelection +slug: Web/API/MSSelection +tags: + - API + - DHTML + - DOM + - 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> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据,请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<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 new file mode 100644 index 0000000000..8506bc5266 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/namelist/index.html @@ -0,0 +1,48 @@ +--- +title: NameList +slug: Web/API/NameList +translation_of: 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/navigatorplugins/测试滕盖/index.html b/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html new file mode 100644 index 0000000000..3f9c09d768 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/navigatorplugins/测试滕盖/index.html @@ -0,0 +1,38 @@ +--- +title: 测试滕盖 +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/notification/sound/index.html b/files/zh-cn/orphaned/web/api/notification/sound/index.html new file mode 100644 index 0000000000..ffe90b4955 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/notification/sound/index.html @@ -0,0 +1,129 @@ +--- +title: Notification.sound +slug: Web/API/notification/sound +translation_of: 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/textrange/text/index.html b/files/zh-cn/orphaned/web/api/textrange/text/index.html new file mode 100644 index 0000000000..ae485dd58e --- /dev/null +++ b/files/zh-cn/orphaned/web/api/textrange/text/index.html @@ -0,0 +1,72 @@ +--- +title: TextRange.text +slug: Web/API/TextRange/text +tags: + - API + - DHTML + - DOM + - TextRange +--- +<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> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据,请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<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/websockets_api/websocket_server_vb.net/index.html b/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html new file mode 100644 index 0000000000..3969f9c5ea --- /dev/null +++ b/files/zh-cn/orphaned/web/api/websockets_api/websocket_server_vb.net/index.html @@ -0,0 +1,270 @@ +--- +title: WebSocket Server Vb.NET +slug: Web/API/WebSockets_API/WebSocket_Server_Vb.NET +translation_of: 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 new file mode 100644 index 0000000000..f17531eb18 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/window/getattention/index.html @@ -0,0 +1,33 @@ +--- +title: Window.getAttention() +slug: Web/API/Window/getAttention +translation_of: Web/API/Window/getAttention +--- +<div>{{ ApiRef() }}</div> + +<p>The <code><strong>Window.getAttention()</strong></code> method attempts to get the user's attention. The mechanism for this happening depends on the specific operating system and window manager.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">window.getAttention(); +</pre> + +<h2 id="Notes">Notes</h2> + +<p>On Windows, the taskbar button for the window flashes, if this hasn't been disabled by the user.</p> + +<p>On Linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others focus the window immediately. This may be configurable as well.</p> + +<p>On Macintosh, the icon in the upper right corner of the desktop flashes.</p> + +<p>The function is disabled for web content. Neither Gecko nor Internet Explorer supports this feature now for web content. <code>getAttention</code> will still work when used from <a href="en/Chrome">chrome</a> in a Gecko application.</p> + +<h2 id="Specification">Specification</h2> + +<p>DOM Level 0. Not part of specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.getAttention")}}</p> diff --git a/files/zh-cn/orphaned/web/guide/css/css基础/index.html b/files/zh-cn/orphaned/web/guide/css/css基础/index.html new file mode 100644 index 0000000000..922f62c536 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/css/css基础/index.html @@ -0,0 +1,57 @@ +--- +title: CSS基础 +slug: Web/Guide/CSS/CSS基础 +tags: + - CSS + - 'CSS:Getting_Started' + - CSS入门 + - CSS教程 + - Web + - 初学者 + - 教程 +--- +<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/html/html/index.html b/files/zh-cn/orphaned/web/guide/html/html/index.html new file mode 100644 index 0000000000..ee911ca9a1 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/html/html/index.html @@ -0,0 +1,181 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML +tags: + - HTML + - HTML5 + - Web + - Web 开发 + - 帮助 + - 指南 + - 综述 +--- +<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/html/element/command/index.html b/files/zh-cn/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..9d6a7c58fd --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/command/index.html @@ -0,0 +1,139 @@ +--- +title: command +slug: Web/HTML/Element/command +translation_of: 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 new file mode 100644 index 0000000000..4db9cb2471 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/element/element/index.html @@ -0,0 +1,112 @@ +--- +title: <element> +slug: Web/HTML/Element/element +translation_of: 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/global_attributes/dropzone/index.html b/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..316e41a944 --- /dev/null +++ b/files/zh-cn/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,94 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +translation_of: 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/http/跨域资源共享(cors)_/index.html b/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html new file mode 100644 index 0000000000..5d4f591eb7 --- /dev/null +++ b/files/zh-cn/orphaned/web/http/跨域资源共享(cors)_/index.html @@ -0,0 +1,544 @@ +--- +title: 跨域资源共享(CORS) +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 class="hidden">The compatibility table in 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("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 new file mode 100644 index 0000000000..b9cd157ec1 --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/javascript(起步)/index.html @@ -0,0 +1,292 @@ +--- +title: javascript(起步) +slug: Web/JavaScript/javascript(起步) +tags: + - bug-840092 +--- +<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/global_objects/array/prototype/index.html b/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..31d65bf734 --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,178 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array.prototype +translation_of: 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 new file mode 100644 index 0000000000..9a8678680a --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,57 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +translation_of: 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 new file mode 100644 index 0000000000..9c14e462bd --- /dev/null +++ b/files/zh-cn/orphaned/web/javascript/reference/global_objects/asynciterator/index.html @@ -0,0 +1,119 @@ +--- +title: AsyncIterator +slug: Web/JavaScript/Reference/Global_Objects/AsyncIterator +tags: + - 异步迭代器 + - 类 +translation_of: 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/localization/index.html b/files/zh-cn/orphaned/web/localization/index.html new file mode 100644 index 0000000000..0bc89e00c7 --- /dev/null +++ b/files/zh-cn/orphaned/web/localization/index.html @@ -0,0 +1,36 @@ +--- +title: 本地化和全球化 +slug: Web/Localization +translation_of: 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/security/information_security_basics/index.html b/files/zh-cn/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..d9c1f0769f --- /dev/null +++ b/files/zh-cn/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,28 @@ +--- +title: 信息安全基础 +slug: Web/Security/Information_Security_Basics +translation_of: 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 new file mode 100644 index 0000000000..992d8c3814 --- /dev/null +++ b/files/zh-cn/orphaned/web/specification_list/index.html @@ -0,0 +1,405 @@ +--- +title: 规范列表 +slug: Specification_List +translation_of: Web/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/web_components/status_in_firefox/index.html b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html new file mode 100644 index 0000000000..d57e5adef5 --- /dev/null +++ b/files/zh-cn/orphaned/web/web_components/status_in_firefox/index.html @@ -0,0 +1,51 @@ +--- +title: Status of Web Components support in Firefox +slug: Web/Web_Components/Status_in_Firefox +translation_of: 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> |