diff options
Diffstat (limited to 'files/zh-cn/web/api')
187 files changed, 6348 insertions, 5122 deletions
diff --git a/files/zh-cn/web/api/fetchcontroller/abort/index.html b/files/zh-cn/web/api/abortcontroller/abort/index.html index d661e73d2b..a37eda8176 100644 --- a/files/zh-cn/web/api/fetchcontroller/abort/index.html +++ b/files/zh-cn/web/api/abortcontroller/abort/index.html @@ -1,7 +1,8 @@ --- title: AbortController.abort() -slug: Web/API/FetchController/abort +slug: Web/API/AbortController/abort translation_of: Web/API/AbortController/abort +original_slug: Web/API/FetchController/abort --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/fetchcontroller/abortcontroller/index.html b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html index 35fe67d1ae..036806e29a 100644 --- a/files/zh-cn/web/api/fetchcontroller/abortcontroller/index.html +++ b/files/zh-cn/web/api/abortcontroller/abortcontroller/index.html @@ -1,11 +1,12 @@ --- title: AbortController.AbortController() -slug: Web/API/FetchController/AbortController +slug: Web/API/AbortController/AbortController tags: - AbortController - Constructor - Fetch translation_of: Web/API/AbortController/AbortController +original_slug: Web/API/FetchController/AbortController --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/fetchcontroller/index.html b/files/zh-cn/web/api/abortcontroller/index.html index 4211eb8211..c29b4a0a7d 100644 --- a/files/zh-cn/web/api/fetchcontroller/index.html +++ b/files/zh-cn/web/api/abortcontroller/index.html @@ -1,12 +1,13 @@ --- title: AbortController -slug: Web/API/FetchController +slug: Web/API/AbortController tags: - API - AbortController - Fetch - how to cancel a fetch request translation_of: Web/API/AbortController +original_slug: Web/API/FetchController --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/devicelightevent/using_light_events/index.html b/files/zh-cn/web/api/ambient_light_events/index.html index f90edf8ca2..62bc1d8d4f 100644 --- a/files/zh-cn/web/api/devicelightevent/using_light_events/index.html +++ b/files/zh-cn/web/api/ambient_light_events/index.html @@ -1,11 +1,12 @@ --- title: Using Light Events -slug: Web/API/DeviceLightEvent/Using_light_events +slug: Web/API/Ambient_Light_Events tags: - WebAPI - 事件 - 环境光 translation_of: Web/API/Ambient_Light_Events +original_slug: Web/API/DeviceLightEvent/Using_light_events --- <div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/ambientlightsensor/reading/index.html b/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html index b2b592a422..c17c74869c 100644 --- a/files/zh-cn/web/api/ambientlightsensor/reading/index.html +++ b/files/zh-cn/web/api/ambientlightsensor/illuminance/index.html @@ -1,8 +1,9 @@ --- title: reading -slug: Web/API/AmbientLightSensor/reading +slug: Web/API/AmbientLightSensor/illuminance translation_of: Web/API/AmbientLightSensor/illuminance translation_of_original: Web/API/AmbientLightSensor/reading +original_slug: Web/API/AmbientLightSensor/reading --- <p>{{SeeCompatTable}}{{APIRef("Ambient Light Sensor API")}}</p> diff --git a/files/zh-cn/web/api/analysernode/fft/index.html b/files/zh-cn/web/api/analysernode/fft/index.html deleted file mode 100644 index f553738351..0000000000 --- a/files/zh-cn/web/api/analysernode/fft/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -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/web/api/audiocontext/mozaudiochanneltype/index.html b/files/zh-cn/web/api/audiocontext/mozaudiochanneltype/index.html deleted file mode 100644 index 2b7022c1ce..0000000000 --- a/files/zh-cn/web/api/audiocontext/mozaudiochanneltype/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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/web/api/audionode/connect(audioparam)/index.html b/files/zh-cn/web/api/audionode/connect(audioparam)/index.html deleted file mode 100644 index eb82534aed..0000000000 --- a/files/zh-cn/web/api/audionode/connect(audioparam)/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -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/web/api/audiocontext/createanalyser/index.html b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html index 2d00a8a100..b302a0ab96 100644 --- a/files/zh-cn/web/api/audiocontext/createanalyser/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createanalyser/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createAnalyser() -slug: Web/API/AudioContext/createAnalyser +slug: Web/API/BaseAudioContext/createAnalyser translation_of: Web/API/BaseAudioContext/createAnalyser +original_slug: Web/API/AudioContext/createAnalyser --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createbiquadfilter/index.html b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html index fa5884ad71..7f8210c2f4 100644 --- a/files/zh-cn/web/api/audiocontext/createbiquadfilter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -1,6 +1,6 @@ --- title: AudioContext.createBiquadFilter() -slug: Web/API/AudioContext/createBiquadFilter +slug: Web/API/BaseAudioContext/createBiquadFilter tags: - API - EQ @@ -9,6 +9,7 @@ tags: - 方法 - 滤波器 translation_of: Web/API/BaseAudioContext/createBiquadFilter +original_slug: Web/API/AudioContext/createBiquadFilter --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createbuffer/index.html b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html index 2d29213737..6a8e5b70fc 100644 --- a/files/zh-cn/web/api/audiocontext/createbuffer/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbuffer/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.createBuffer() -slug: Web/API/AudioContext/createBuffer +slug: Web/API/BaseAudioContext/createBuffer tags: - 创建音频片段 - 接口 - 方法 - 音频环境 translation_of: Web/API/BaseAudioContext/createBuffer +original_slug: Web/API/AudioContext/createBuffer --- <p>音频环境{{ domxref("AudioContext") }} 接口的 <code>createBuffer() 方法用于新建一个空</code>白的 {{ domxref("AudioBuffer") }} 对象，以便用于填充数据，通过 {{ domxref("AudioBufferSourceNode") }} 播放。</p> diff --git a/files/zh-cn/web/api/audiocontext/createbuffersource/index.html b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html index 5244513312..701ca8e220 100644 --- a/files/zh-cn/web/api/audiocontext/createbuffersource/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createbuffersource/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.createBufferSource() -slug: Web/API/AudioContext/createBufferSource +slug: Web/API/BaseAudioContext/createBufferSource tags: - API - 音源 - 音频源 - 音频节点 translation_of: Web/API/BaseAudioContext/createBufferSource +original_slug: Web/API/AudioContext/createBufferSource --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createchannelmerger/index.html b/files/zh-cn/web/api/baseaudiocontext/createchannelmerger/index.html index 281dcddfe7..2031548322 100644 --- a/files/zh-cn/web/api/audiocontext/createchannelmerger/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createchannelmerger/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.createChannelMerger() -slug: Web/API/AudioContext/createChannelMerger +slug: Web/API/BaseAudioContext/createChannelMerger tags: - API - Audio - AudioContext - Audio_Chinese translation_of: Web/API/BaseAudioContext/createChannelMerger +original_slug: Web/API/AudioContext/createChannelMerger --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createchannelsplitter/index.html b/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html index f46f5be2c5..37c482b6fd 100644 --- a/files/zh-cn/web/api/audiocontext/createchannelsplitter/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createchannelsplitter/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createChannelSplitter() -slug: Web/API/AudioContext/createChannelSplitter +slug: Web/API/BaseAudioContext/createChannelSplitter translation_of: Web/API/BaseAudioContext/createChannelSplitter +original_slug: Web/API/AudioContext/createChannelSplitter --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createconvolver/index.html b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html index 2cbe395edc..ae97d90aac 100644 --- a/files/zh-cn/web/api/audiocontext/createconvolver/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createconvolver/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createConvolver() -slug: Web/API/AudioContext/createConvolver +slug: Web/API/BaseAudioContext/createConvolver translation_of: Web/API/BaseAudioContext/createConvolver +original_slug: Web/API/AudioContext/createConvolver --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createdelay/index.html b/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html index b8e502758d..baae047758 100644 --- a/files/zh-cn/web/api/audiocontext/createdelay/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createdelay/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createDelay() -slug: Web/API/AudioContext/createDelay +slug: Web/API/BaseAudioContext/createDelay translation_of: Web/API/BaseAudioContext/createDelay +original_slug: Web/API/AudioContext/createDelay --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createscriptprocessor/index.html b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html index 7e505bc06a..e8c722c908 100644 --- a/files/zh-cn/web/api/audiocontext/createscriptprocessor/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createscriptprocessor/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createScriptProcessor() -slug: Web/API/AudioContext/createScriptProcessor +slug: Web/API/BaseAudioContext/createScriptProcessor translation_of: Web/API/BaseAudioContext/createScriptProcessor +original_slug: Web/API/AudioContext/createScriptProcessor --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/createwaveshaper/index.html b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html index 7aef8d5688..10986c407e 100644 --- a/files/zh-cn/web/api/audiocontext/createwaveshaper/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/createwaveshaper/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.createWaveShaper() -slug: Web/API/AudioContext/createWaveShaper +slug: Web/API/BaseAudioContext/createWaveShaper translation_of: Web/API/BaseAudioContext/createWaveShaper +original_slug: Web/API/AudioContext/createWaveShaper --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/currenttime/index.html b/files/zh-cn/web/api/baseaudiocontext/currenttime/index.html index fbdaf4315c..57e190cb46 100644 --- a/files/zh-cn/web/api/audiocontext/currenttime/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/currenttime/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.currentTime -slug: Web/API/AudioContext/currentTime +slug: Web/API/BaseAudioContext/currentTime translation_of: Web/API/BaseAudioContext/currentTime +original_slug: Web/API/AudioContext/currentTime --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/decodeaudiodata/index.html b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html index 40693fd8cc..9200638c57 100644 --- a/files/zh-cn/web/api/audiocontext/decodeaudiodata/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -1,12 +1,13 @@ --- title: AudioContext.decodeAudioData() -slug: Web/API/AudioContext/decodeAudioData +slug: Web/API/BaseAudioContext/decodeAudioData tags: - API - Audio - audio接口 - 音频解码 translation_of: Web/API/BaseAudioContext/decodeAudioData +original_slug: Web/API/AudioContext/decodeAudioData --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/destination/index.html b/files/zh-cn/web/api/baseaudiocontext/destination/index.html index 04fdfe8247..c1ebabfc81 100644 --- a/files/zh-cn/web/api/audiocontext/destination/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/destination/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.destination -slug: Web/API/AudioContext/destination +slug: Web/API/BaseAudioContext/destination translation_of: Web/API/BaseAudioContext/destination +original_slug: Web/API/AudioContext/destination --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/listener/index.html b/files/zh-cn/web/api/baseaudiocontext/listener/index.html index 81b2a730a2..64e97d31cc 100644 --- a/files/zh-cn/web/api/audiocontext/listener/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/listener/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.listener -slug: Web/API/AudioContext/listener +slug: Web/API/BaseAudioContext/listener translation_of: Web/API/BaseAudioContext/listener +original_slug: Web/API/AudioContext/listener --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/onstatechange/index.html b/files/zh-cn/web/api/baseaudiocontext/onstatechange/index.html index ee9b3f21c0..b2ee0a7463 100644 --- a/files/zh-cn/web/api/audiocontext/onstatechange/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/onstatechange/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.onstatechange -slug: Web/API/AudioContext/onstatechange +slug: Web/API/BaseAudioContext/onstatechange translation_of: Web/API/BaseAudioContext/onstatechange +original_slug: Web/API/AudioContext/onstatechange --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/samplerate/index.html b/files/zh-cn/web/api/baseaudiocontext/samplerate/index.html index b811702e26..d888951ef6 100644 --- a/files/zh-cn/web/api/audiocontext/samplerate/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/samplerate/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.sampleRate -slug: Web/API/AudioContext/sampleRate +slug: Web/API/BaseAudioContext/sampleRate translation_of: Web/API/BaseAudioContext/sampleRate +original_slug: Web/API/AudioContext/sampleRate --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/audiocontext/state/index.html b/files/zh-cn/web/api/baseaudiocontext/state/index.html index 97876f5d3d..df6b383bc9 100644 --- a/files/zh-cn/web/api/audiocontext/state/index.html +++ b/files/zh-cn/web/api/baseaudiocontext/state/index.html @@ -1,7 +1,8 @@ --- title: AudioContext.state -slug: Web/API/AudioContext/state +slug: Web/API/BaseAudioContext/state translation_of: Web/API/BaseAudioContext/state +original_slug: Web/API/AudioContext/state --- <p>{{ APIRef("Web Audio API") }}</p> diff --git a/files/zh-cn/web/api/broadcastchannel/message_event/index.html b/files/zh-cn/web/api/broadcastchannel/message_event/index.html new file mode 100644 index 0000000000..9b89d2bd63 --- /dev/null +++ b/files/zh-cn/web/api/broadcastchannel/message_event/index.html @@ -0,0 +1,168 @@ +--- +title: 'BroadcastChannel: message event' +slug: Web/API/BroadcastChannel/message_event +tags: + - 事件 + - 消息 + - 通信 +translation_of: Web/API/BroadcastChannel/message_event +original_slug: Web/Events/message +--- +<div>{{APIRef}}</div> + +<p>当频道收到一条消息时，会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 <code>message</code> 事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code><a href="/zh-CN/docs/Web/API/BroadcastChannel/onmessage">onmessage</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="实时示例">实时示例</h3> + +<p>在这个例子中，有一个 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 作为发送者，当用户点击按钮之后，会广播 <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> 中的内容。同时，有两个 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 作为接收者，会监听广播的消息，并将结果写入 <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> 元素。</p> + +<h4 id="发送者">发送者</h4> + +<div class="hidden"> +<pre class="brush: html"><h1>发送者</h1> +<label for="message">输入要广播的信息：</label><br/> +<textarea id="message" name="message" rows="1" cols="40">Hello</textarea> +<button id="broadcast-message" type="button">开始广播</button></pre> + +<pre class="brush: css">body { + border: 1px solid black; + padding: .5rem; + height: 150px; + font-family: "Fira Sans", sans-serif; +} + +h1 { + font: 1.6em "Fira Sans", sans-serif; + margin-bottom: 1rem; +} + +textarea { + padding: .2rem; +} + +label, br { + margin: .5rem 0; +} + +button { + vertical-align: top; + height: 1.5rem; +}</pre> +</div> + +<pre class="brush: js">const channel = new BroadcastChannel('example-channel'); +const messageControl = document.querySelector('#message'); +const broadcastMessageButton = document.querySelector('#broadcast-message'); + +broadcastMessageButton.addEventListener('click', () => { + channel.postMessage(messageControl.value); +}) +</pre> + +<h4 id="接收者_1">接收者 1</h4> + +<div class="hidden"> +<pre class="brush: html"><h1>接收者 1</h1> +<div id="received"></div></pre> + +<pre class="brush: css">body { + border: 1px solid black; + padding: .5rem; + height: 100px; + font-family: "Fira Sans", sans-serif; +} + +h1 { + font: 1.6em "Fira Sans", + sans-serif; margin-bottom: 1rem; +} +</pre> +</div> + +<pre class="brush: js">const channel = new BroadcastChannel('example-channel'); +channel.addEventListener('message', (event) => { + received.textContent = event.data; +});</pre> + +<h4 id="接收者_2">接收者 2</h4> + +<div class="hidden"> +<pre class="brush: html"><h1>接收者 2</h1> +<div id="received"></div></pre> + +<pre class="brush: css">body { + border: 1px solid black; + padding: .5rem; + height: 100px; + font-family: "Fira Sans", sans-serif; +} + +h1 { + font: 1.6em "Fira Sans", sans-serif; + margin-bottom: 1rem; +} +</pre> +</div> + +<pre class="brush: js">const channel = new BroadcastChannel('example-channel'); +channel.addEventListener('message', (event) => { + received.textContent = event.data; +});</pre> + +<h3 id="结果">结果</h3> + +<p>{{ EmbedLiveSample('发送者', '100%', '170px','' ,'' , 'dummy') }}</p> + +<p>{{ EmbedLiveSample('接收者_1', '100%', '150px','' ,'' , 'dummy') }}</p> + +<p>{{ EmbedLiveSample('接收者_2', '100%', '150px','' ,'' , 'dummy') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.BroadcastChannel.message_event")}}</p> + +<h2 id="相关信息">相关信息</h2> + +<ul> + <li>相关事件：<code><a href="/docs/Web/API/BroadcastChannel/messageerror_event">messageerror</a></code></li> +</ul> diff --git a/files/zh-cn/web/api/canvas_api/drawing_graphics_with_canvas/index.html b/files/zh-cn/web/api/canvas_api/drawing_graphics_with_canvas/index.html deleted file mode 100644 index 3cef2b94e8..0000000000 --- a/files/zh-cn/web/api/canvas_api/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Drawing graphics with canvas -slug: Web/API/Canvas_API/Drawing_graphics_with_canvas -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -<div class="note"> - <p>本文大部分（但不包括关于绘制窗体部分的文档）已经被包含到更详尽的Canvas教程中，该页面因为现在已经显得多余可能会被链接到那里，但是某些信息可能仍然是十分有用的。</p> - <p> </p> -</div> -<h2 id="Introduction" name="Introduction">Introduction</h2> -<p>With <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox includes a new HTML element for programmable graphics. <code><canvas></code> is based on the <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a>, which itself is based on Apple's <code><canvas></code> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.</p> -<p><code><canvas></code> creates a fixed size drawing surface that exposes one or more <em>rendering contexts</em>. We'll focus on the 2D rendering context. For 3D graphics, you should use the <a href="/en-US/docs/WebGL" title="https://developer.mozilla.org/en/WebGL">WebGL rendering context</a>.</p> -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">The 2D Rendering Context</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">A Simple Example</h3> -<p>To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "rgb(200,0,0)"; - ctx.fillRect (10, 10, 55, 50); - - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; - ctx.fillRect (30, 30, 55, 50); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> -<p>The <code>draw</code> function gets the <code>canvas</code> element, then obtains the <code>2d</code> context. The <code>ctx</code> object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling <code>fillRect</code>. The second fillStyle uses <code>rgba()</code> to specify an alpha value along with the color.</p> -<p>The <code>fillRect</code>, <code>strokeRect</code>, and <code>clearRect</code> calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.</p> -<h3 id="Using_Paths" name="Using_Paths">Using Paths</h3> -<p>The <code>beginPath</code> function starts a new path, and <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code>, and similar methods are used to add segments to the path. The path can be closed using <code>closePath</code>. Once a path is created, you can use <code>fill</code> or <code>stroke</code> to render the path to the canvas.</p> -<pre class="brush: js">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - ctx.fillStyle = "red"; - - ctx.beginPath(); - ctx.moveTo(30, 30); - ctx.lineTo(150, 150); - // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong. - ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right -> - ctx.lineTo(30, 30); - ctx.fill(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> -<p>Calling <code>fill()</code> or <code>stroke()</code> causes the current path to be used. To be filled or stroked again, the path must be recreated.</p> -<h3 id="Graphics_State" name="Graphics_State">Graphics State</h3> -<p>Attributes of the context such as <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code>, and <code>lineJoin</code> are part of the current <em>graphics state</em>. The context provides two methods, <code>save()</code> and <code>restore()</code>, that can be used to move the current state to and from the state stack.</p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">A More Complicated Example</h3> -<p>Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods <code>translate()</code>, <code>scale()</code>, and <code>rotate()</code> all transform the current matrix. All rendered points are first transformed by this matrix.</p> -<pre class="brush: js">function drawBowtie(ctx, fillStyle) { - - ctx.fillStyle = "rgba(200,200,200,0.3)"; - ctx.fillRect(-30, -30, 60, 60); - - ctx.fillStyle = fillStyle; - ctx.globalAlpha = 1.0; - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(-25, -25); - ctx.lineTo(25, -25); - ctx.lineTo(-25, 25); - ctx.closePath(); - ctx.fill(); -} - -function dot(ctx) { - ctx.save(); - ctx.fillStyle = "yellow"; - ctx.fillRect(-2, -2, 4, 4); - ctx.restore(); -} - -function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - - // note that all other translates are relative to this one - ctx.translate(45, 45); - - ctx.save(); - //ctx.translate(0, 0); // unnecessary - drawBowtie(ctx, "red"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 0); - ctx.rotate(45 * Math.PI / 180); - drawBowtie(ctx, "green"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(0, 85); - ctx.rotate(135 * Math.PI / 180); - drawBowtie(ctx, "blue"); - dot(ctx); - ctx.restore(); - - ctx.save(); - ctx.translate(85, 85); - ctx.rotate(90 * Math.PI / 180); - drawBowtie(ctx, "yellow"); - dot(ctx); - ctx.restore(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> -<p>This defines two methods, <code>drawBowtie</code> and <code>dot</code>, that are called 4 times. Before each call, <code>translate()</code> and <code>rotate()</code> are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. <code>dot</code> renders a small black square centered at <code>(0, 0)</code>. That dot is moved around by the transformation matrix. <code>drawBowtie</code> renders a simple bowtie path using the passed-in fill style.</p> -<p>As matrix operations are cumulative, <code>save()</code> and <code>restore()</code> are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a <code>translate() rotate() translate()</code> sequence will yield different results than a <code>translate() translate() rotate()</code> series of calls.</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibility With Apple <canvas></h2> -<p>For the most part, <code><canvas></code> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.</p> -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Required <code></canvas></code> tag</h3> -<p>In the Apple Safari implementation, <code><canvas></code> is an element implemented in much the same way <code><img></code> is; it does not have an end tag. However, for <code><canvas></code> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a <em>required</em> end tag.</p> -<p>If fallback content is not needed, a simple <code><canvas id="foo" ...></canvas></code> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.</p> -<p>If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).</p> -<pre>canvas { - font-size: 0.00001px !ie; -}</pre> -<h2 id="Additional_Features" name="Additional_Features">Additional Features</h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Rendering Web Content Into A Canvas</h3> -<div class="note"> - This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Read why</a>.</div> -<p>Mozilla's <code>canvas</code> is extended with the <a href="/en-US/docs/DOM/CanvasRenderingContext2D#drawWindow()" title="DOM/CanvasRenderingContext2D#drawWindow()"><code>drawWindow()</code></a> method. This method draws a snapshot of the contents of a DOM <code>window</code> into the canvas. For example,</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p>would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).</p> -<p>It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.</p> -<p>With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.</p> -<p>Ted Mielczarek's <a href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.</p> -<div class="note"> - <strong>Note:</strong> Using <code>canvas.drawWindow()</code> while handling a document's <code>onload</code> event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the <a href="/en-US/docs/Gecko-Specific_DOM_Events#MozAfterPaint" title="Gecko-Specific DOM Events#MozAfterPaint"><code>MozAfterPaint</code></a> event to successfully draw HTML content into a canvas on page load.</div> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/en-US/docs/tag/canvas">And more...</a></li> -</ul> diff --git a/files/zh-cn/web/api/canvascapturemediastream/index.html b/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html index 1a71e7d834..a6a2e34ccc 100644 --- a/files/zh-cn/web/api/canvascapturemediastream/index.html +++ b/files/zh-cn/web/api/canvascapturemediastreamtrack/index.html @@ -1,7 +1,8 @@ --- title: CanvasCaptureMediaStream -slug: Web/API/CanvasCaptureMediaStream +slug: Web/API/CanvasCaptureMediaStreamTrack translation_of: Web/API/CanvasCaptureMediaStreamTrack +original_slug: Web/API/CanvasCaptureMediaStream --- <div>{{APIRef}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/channel_messaging_api/使用_channel_messaging/index.html b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.html index 8ddfa8df8e..fb81f88093 100644 --- a/files/zh-cn/web/api/channel_messaging_api/使用_channel_messaging/index.html +++ b/files/zh-cn/web/api/channel_messaging_api/using_channel_messaging/index.html @@ -1,6 +1,6 @@ --- title: 使用 channel messaging -slug: Web/API/Channel_Messaging_API/使用_channel_messaging +slug: Web/API/Channel_Messaging_API/Using_channel_messaging tags: - API - Channel messaging @@ -9,6 +9,7 @@ tags: - MessagePort - 指南 translation_of: Web/API/Channel_Messaging_API/Using_channel_messaging +original_slug: Web/API/Channel_Messaging_API/使用_channel_messaging --- <p>{{DefaultAPISidebar("Channel Messaging API")}}</p> diff --git a/files/zh-cn/web/api/randomsource/getrandomvalues/index.html b/files/zh-cn/web/api/crypto/getrandomvalues/index.html index 5df5fb0a83..504ab67343 100644 --- a/files/zh-cn/web/api/randomsource/getrandomvalues/index.html +++ b/files/zh-cn/web/api/crypto/getrandomvalues/index.html @@ -1,6 +1,6 @@ --- title: Crypto.getRandomValues() -slug: Web/API/RandomSource/getRandomValues +slug: Web/API/Crypto/getRandomValues tags: - API - 加密 @@ -9,6 +9,7 @@ tags: - 密码学 - 方法 translation_of: Web/API/Crypto/getRandomValues +original_slug: Web/API/RandomSource/getRandomValues --- <p>{{APIRef("Web Crypto API")}}</p> diff --git a/files/zh-cn/web/api/cssmatrix/index.html b/files/zh-cn/web/api/cssmatrix/index.html deleted file mode 100644 index 16fe55276d..0000000000 --- a/files/zh-cn/web/api/cssmatrix/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: CSSMatrix -slug: Web/API/CSSMatrix -translation_of: Web/API/DOMMatrix -translation_of_original: Web/API/CSSMatrix ---- -<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div> - -<p><strong><code>CSSMatrix</code></strong> 代表可以用于2D或3D变换的4x4齐次矩阵。据说这个类曾经是 CSS Transitions Module Level 3 的一部分，但在现在的工作草案里不存在 。请使用 <a href="/en-US/docs/Web/API/DOMMatrix"><code>DOMMatrix</code></a> 。</p> - -<h2 id="Specifications" name="Specifications">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#webkitcssmatrix-interface', 'WebKitCSSMatrix')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>Initial standardization of the WebKit-prefixed version, <code>WebKitCSSMatrix</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>10<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>基本支持</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>11<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 将此 API<code>实现为MSCSSMatrix</code>。在版本11中，加入了别名<code>WebKitCSSMatrix</code>。</p> - -<p>[2] WebKit 将此 API<code>实现为WebKitCSSMatrix</code>。</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx"><code>MSCSSMatrix</code> documentation on MSDN</a></li> - <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html"><code>WebKitCSSMatrix</code> documentation at Safari Developer Library</a></li> - <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla bug 717722: implement <code>(WebKit)CSSMatrix()</code></a></li> -</ul> diff --git a/files/zh-cn/web/api/css分页规则/index.html b/files/zh-cn/web/api/csspagerule/index.html index ff1d047a59..750765aa1d 100644 --- a/files/zh-cn/web/api/css分页规则/index.html +++ b/files/zh-cn/web/api/csspagerule/index.html @@ -1,7 +1,8 @@ --- title: CSS分页规则 -slug: Web/API/CSS分页规则 +slug: Web/API/CSSPageRule translation_of: Web/API/CSSPageRule +original_slug: Web/API/CSS分页规则 --- <div>{{APIRef("CSSOM")}}</div> diff --git a/files/zh-cn/web/api/deviceacceleration/index.html b/files/zh-cn/web/api/devicemotioneventacceleration/index.html index 34b215d781..a278374222 100644 --- a/files/zh-cn/web/api/deviceacceleration/index.html +++ b/files/zh-cn/web/api/devicemotioneventacceleration/index.html @@ -1,6 +1,6 @@ --- title: DeviceAcceleration -slug: Web/API/DeviceAcceleration +slug: Web/API/DeviceMotionEventAcceleration tags: - API - 传感器 @@ -9,6 +9,7 @@ tags: - 需要示例 translation_of: Web/API/DeviceMotionEventAcceleration translation_of_original: Web/API/DeviceAcceleration +original_slug: Web/API/DeviceAcceleration --- <div>{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html b/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html deleted file mode 100644 index 450751cefa..0000000000 --- a/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -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/web/api/document/elementfrompoint/index.html b/files/zh-cn/web/api/document/elementfrompoint/index.html deleted file mode 100644 index 6fb591e1da..0000000000 --- a/files/zh-cn/web/api/document/elementfrompoint/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Document.elementFromPoint() -slug: Web/API/Document/elementFromPoint -translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint ---- -<div> - {{APIRef()}} {{Fx_minversion_header(3)}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p>返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.</p> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre><em>var element</em> = document.elementFromPoint(<em>x</em>, <em>y</em>);</pre> -<ul> - <li><code>element</code> 是返回的DOM<a href="/en-US/docs/DOM/element" title="DOM/element">元素</a>.</li> - <li><code>x</code> 和 <code>y</code> 是坐标数值, 不需要单位比如px.</li> -</ul> -<h2 id="Example" name="Example">示例</h2> -<pre class="brush:html"><!DOCTYPE html> -<html lang="en"> -<head> -<title>elementFromPoint example</title> - -<script> -function changeColor(newColor) { - elem = document.elementFromPoint(2, 2); - elem.style.color = newColor; -} -</script> -</head> - -<body> -<p id="para1">Some text here</p> -<button onclick="changeColor('blue');">blue</button> -<button onclick="changeColor('red');">red</button> -</body> -</html> -</pre> -<h2 id="Notes" name="Notes">附注</h2> -<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the DOM of the document the method is called on (in the iframe case, the iframe itself) is returned. If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.</p> -<p>If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is <code>null</code>.</p> -<p>{{Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.")}}</p> -<h2 id="Specification" name="Specification">规范</h2> -<ul> - <li>Preliminary specification: <code><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint">elementFromPoint</a></code></li> -</ul> diff --git a/files/zh-cn/web/api/document/elementsfrompoint/index.html b/files/zh-cn/web/api/document/elementsfrompoint/index.html deleted file mode 100644 index 9a7ee01503..0000000000 --- a/files/zh-cn/web/api/document/elementsfrompoint/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Document.elementsFromPoint() -slug: Web/API/Document/elementsFromPoint -translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint -translation_of_original: Web/API/Document/elementsFromPoint ---- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> - -<p><code><strong>elementsFromPoint()</strong></code> 方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。</p> - -<h2 id="语法">语法</h2> - -<pre class="brush: js">var<em> elements</em> = <em>document</em>.elementsFromPoint(<em>x</em>, <em>y</em>);</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个包含多个元素的数组</p> - -<h3 id="参数">参数</h3> - -<dl> - <dt>x</dt> - <dd>当前视口内某一点的横坐标</dd> - <dt>y</dt> - <dd>当前视口内某一点的纵坐标</dd> -</dl> - -<h2 id="Example" name="Example">示例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div> - <p>Some text</p> -</div> -<p>Elements at point 30, 20:</p> -<div id="output"></div> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js;highlight[1]">var output = document.getElementById("output"); -if (document.elementsFromPoint) { - var elements = document.elementsFromPoint(30, 20); - for(var i = 0; i < elements.length; i++) { - output.textContent += elements[i].localName; - if (i < elements.length - 1) { - output.textContent += " < "; - } - } -} else { - output.innerHTML = "<span style=\"color: red;\">" + - "您的浏览器不支持 <code>document.elementsFromPoint()</code>" + - "</span>"; -}</pre> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> {{CompatChrome(43.0)}}</td> - <td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td> - <td>10.0 {{property_prefix("ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(11)}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatGeckoMobile("46.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(11)}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/zh-cn/web/api/document/mozfullscreen/index.html b/files/zh-cn/web/api/document/fullscreen/index.html index eb15adcede..f1d6edc436 100644 --- a/files/zh-cn/web/api/document/mozfullscreen/index.html +++ b/files/zh-cn/web/api/document/fullscreen/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreen -slug: Web/API/Document/mozFullScreen +slug: Web/API/Document/fullscreen translation_of: Web/API/Document/fullscreen +original_slug: Web/API/Document/mozFullScreen --- <p> </p> diff --git a/files/zh-cn/web/api/document/mozfullscreenenabled/index.html b/files/zh-cn/web/api/document/fullscreenenabled/index.html index 248797541a..244abe8e26 100644 --- a/files/zh-cn/web/api/document/mozfullscreenenabled/index.html +++ b/files/zh-cn/web/api/document/fullscreenenabled/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreenEnabled -slug: Web/API/Document/mozFullScreenEnabled +slug: Web/API/Document/fullscreenEnabled translation_of: Web/API/Document/fullscreenEnabled +original_slug: Web/API/Document/mozFullScreenEnabled --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">概述</h3> diff --git a/files/zh-cn/web/api/document/getselection/index.html b/files/zh-cn/web/api/document/getselection/index.html deleted file mode 100644 index 73b3a4ce6b..0000000000 --- a/files/zh-cn/web/api/document/getselection/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: document.getSelection -slug: Web/API/Document/getSelection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -<article class="approved text-content" style="padding-right: 10px; width: 652px; float: left;"> -<div class="boxed translate-rendered" style=""> -<p>{{APIRef("DOM")}}</p> - -<p>该方法的功能等价于 {{domxref("Window.getSelection()")}} 方法；其返回一个 {{domxref("Selection")}} 对象，表示文档中当前被选择的文本。</p> -</div> -</article> - -<p> </p> diff --git a/files/zh-cn/web/api/document/inputencoding/index.html b/files/zh-cn/web/api/document/inputencoding/index.html deleted file mode 100644 index 00701e8acf..0000000000 --- a/files/zh-cn/web/api/document/inputencoding/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: document.inputEncoding -slug: Web/API/Document/inputEncoding -translation_of: Web/API/Document/characterSet -translation_of_original: Web/API/Document/inputEncoding ---- -<p>{{ ApiRef() }} {{ deprecated_header() }}</p> -<h3 id="概述">概述</h3> -<p>返回一个字符串,代表当前文档渲染时所使用的编码.(比如<code>utf-8</code>).</p> -<div class="warning"> - <strong>警告:</strong> 不要再使用该属性.该属性在DOM 4 规范(草案)中已经被废弃. Gecko 在未来的版本中将会删除它.</div> -<h3 id="语法">语法</h3> -<pre class="eval"><var>encoding</var> = <code>document.inputEncoding;</code> -</pre> -<p><code>inputEncoding</code> 是个只读属性.</p> -<h3 id="规范">规范</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> - <li>This has been removed from {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> -</ul> -<p>{{ languages( {"en": "en/DOM/document.inputEncoding" } ) }}</p> diff --git a/files/zh-cn/web/api/element/onafterscriptexecute/index.html b/files/zh-cn/web/api/document/onafterscriptexecute/index.html index f1e976522e..74bd826004 100644 --- a/files/zh-cn/web/api/element/onafterscriptexecute/index.html +++ b/files/zh-cn/web/api/document/onafterscriptexecute/index.html @@ -1,10 +1,11 @@ --- title: element.onafterscriptexecute -slug: Web/API/Element/onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute tags: - DOM - onafterscriptexecute translation_of: Web/API/Document/onafterscriptexecute +original_slug: Web/API/Element/onafterscriptexecute --- <div>{{ApiRef}}{{gecko_minversion_header("2")}}</div> diff --git a/files/zh-cn/web/api/document/readystatechange_event/index.html b/files/zh-cn/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..769a0cd3c5 --- /dev/null +++ b/files/zh-cn/web/api/document/readystatechange_event/index.html @@ -0,0 +1,150 @@ +--- +title: 'Document: readystatechange 事件' +slug: Web/API/Document/readystatechange_event +tags: + - Reference + - XMLHttpRequest + - interactive + - 事件 +translation_of: Web/API/Document/readystatechange_event +original_slug: Web/Events/readystatechange事件 +--- +<div>{{APIRef}}</div> + +<p>当文档的 {{domxref("Document.readyState", "readyState")}} 属性发生改变时，会触发 <code>readystatechange</code> 事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>否</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>否</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler 属性</th> + <td><code>onreadystatechange</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="实时演示">实时演示</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="160px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Document/readystatechange_event$samples/Live_example?revision=1607037" width="100%"></iframe></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.readystatechange_event")}}</p> + +<p>IE 浏览器是一直支持 <code>readystatechange</code> 事件的，可作为 <a href="/zh-CN/docs/Mozilla_event_reference/DOMContentLoaded_(event)">DOMContentLoaded </a>事件的替代方法（参见<a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/DOMContentLoaded_%28event%29#Browser_compatibility">Browser compatibility</a>的注释 [2]）。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/stylesheets/index.html b/files/zh-cn/web/api/document/stylesheets/index.html deleted file mode 100644 index de44c8537b..0000000000 --- a/files/zh-cn/web/api/document/stylesheets/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Document.styleSheets -slug: Web/API/Document/styleSheets -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets ---- -<div>{{APIRef}}</div> - -<p><strong><code>Document.styleSheets</code></strong> 只读属性，返回一个由 {{domxref("StyleSheet ")}} 对象组成的 {{domxref("StyleSheetList")}}，每个 {{domxref("StyleSheet ")}} 对象都是一个文档中链接或嵌入的样式表。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox">let <var>styleSheetList</var> = <em>document</em>.styleSheets; -</pre> - -<p>返回的对象是一个 {{domxref("StyleSheetList")}}。</p> - -<p>它是一个 {{domxref("StyleSheet")}} 对象的有序集合。<code><em>styleSheetList</em>.item(<em>index</em>)</code> 或 <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> 根据它的索引（索引基于0）返回一个单独的样式表对象。</p> - -<pre class="syntaxbox"> </pre> - -<h2 id="Specification" name="Specification">规范</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> -</ul> diff --git a/files/zh-cn/web/api/document/rouchmove_event/index.html b/files/zh-cn/web/api/document/touchmove_event/index.html index 1321a0c4d2..47cfa0fb7b 100644 --- a/files/zh-cn/web/api/document/rouchmove_event/index.html +++ b/files/zh-cn/web/api/document/touchmove_event/index.html @@ -1,7 +1,8 @@ --- title: touchmove -slug: Web/API/Document/rouchmove_event +slug: Web/API/Document/touchmove_event translation_of: Web/API/Document/touchmove_event +original_slug: Web/API/Document/rouchmove_event --- <div>{{APIRef}}</div> diff --git a/files/zh-cn/web/api/document_object_model/preface/index.html b/files/zh-cn/web/api/document_object_model/preface/index.html deleted file mode 100644 index 80f115abfd..0000000000 --- a/files/zh-cn/web/api/document_object_model/preface/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 前言 -slug: Web/API/Document_Object_Model/Preface -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -<p>{{ ApiRef() }}</p> -<h3 id="About_This_Reference" name="About_This_Reference">关于此参考文档</h3> -<p>本节将描述与此向导本身相关的一些内容，内容包括它是做什么的，里面的信息是如何呈现的，以及怎样在你DOM开发中如何使用这份参考文档中的示例。</p> -<p>注意，这份文档尚在开发中，并没有完整包含Gecko中所有已经移植的DOM方法及其属性，但是，文档中的每一个小节（例如，DOM文件参考）中所描述的对象是完整的。今后当某个API库的成员的信息可用时，它将会被整合到此文档中。</p> -<h3 id="哪些人应该阅读这份指南">哪些人应该阅读这份指南</h3> -<p>这份Gecko DOM参考文档的读者应该是一位web开发人员或者是一位对网页制作有一定了解的熟练web用户。这份文档对读者对DOM、XML、web服务或者web标准，甚至JavaScript——DOM呈现给读者的语言——的熟练度都没有要求。但是，本文档假定读者至少对HTML、标签、网页的基本结构、浏览器以及样式表是熟悉的。</p> -<p>在这里，介绍性的资料在展示的同时伴随有许多示例，并且高等级的解释对没有经验的和经验丰富的web开发者都同样有用，并且也并不仅仅针对入门开发者。然而，这是一份正在不断改进中的API参考手册。</p> -<h3 id="什么是Gecko？">什么是Gecko？</h3> -<p>Mozilla，Firefox, Netscape 6以上版本，以及一些基于Mozilla的其他浏览器都有一个相同的对DOM的实现。这是因为它们使用的是相同的技术。</p> -<p>Gecko，即在上述各种浏览器中处理HTML的解析，页面的排版，文档对象模型，以及整个应用界面的渲染的软件组件，是一个快速的、兼容多种标准的渲染引擎。它移植了W3C的DOM标准以及出现在网页页面和应用界面（或者称为chrome）中的类DOM（但尚未标准化）的浏览器对象模型（即所谓window等的）。</p> -<p>尽管应用界面和页面内容在不同的浏览器里的呈现方式不一样，但是DOM期望它们统一地作为一种节点的分层结构。</p> -<h3 id="API语法">API语法</h3> -<p>API参考里的每个描述都包括语法、输入输出参数（包括返回类型），一个例子，额外的一些提示，以及指向对应参考文档的链接。</p> -<p>只读的属性只能被读取。因为它们无法被设置，所以通常以一个单独的一行语法表示。例如screen对象的只读属性availHeight使用的语法如下：</p> -<pre>iAvail = window.screen.availHeight -</pre> -<p>这意味着你只能把该只读属性放在等式的右边。</p> -<p>可读/写的属性，既能被读取也能被写入：</p> -<pre>msg = window.status -window.status = msg -</pre> -<p>一般来说，描述对象的成员时，对象的格式声明通常都带有一个简单的类型描述符，例如，对所有的元素使用element，对所有的顶层文档对象使用document，对所有的表对象使用table等（详见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types" title="zh-CN/Gecko_DOM_Reference/Introduction#Important_Data_Types">重要的数据类型</a>）。</p> -<h3 id="Using_the_Examples" name="Using_the_Examples">如何使用示例</h3> -<p>本参考文档中的许多示例都是完整的文档，你可以把他们复制粘贴到一个新的文件，然后在浏览器中打开它。</p> -<p>其他的例子是一些代码片段。你可以把它们加入到JavaScript的回调函数中来执行。</p> -<p>例如，这个关于<a href="/zh-CN/DOM/window.document" title="zh-CN/DOM/window.document">window.document</a>属性的例子能通过一个函数来测试。这里，它通过一个按钮的<code>onclick </code>属性来调用。</p> -<pre class="brush: html"><html> -<head> -<title>Test Page</title> -<script type="text/javascript"> -function testWinDoc() { - - var doc= window.document; - - alert(doc.title); - -} -</script> -</head> - -<body> - <button onclick="testWinDoc();">test document property</button> -</body> -</html> -</pre> -<p>其他一些尚未完整打包的对象成员也采用与此类似的函数和页面。参见<a href="/zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" title="zh-CN/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">测试DOM API</a>，可以一次对各种API的做一次“无害测试”。</p> diff --git a/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..79d442f4e6 --- /dev/null +++ b/files/zh-cn/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,340 @@ +--- +title: 使用Javascript和DOM Interfaces来处理HTML +slug: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +tags: + - DOM +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +original_slug: 使用Javascript和DOM_Interfaces来处理HTML +--- +<div style="float: left; width: 912px;"> +<h3 id=".E7.AE.80.E4.BB.8B" name=".E7.AE.80.E4.BB.8B">简介</h3> + +<p>本文概述了一些强大的，基本的DOM 1 级别中的方法以及如何在JavaScript中使用它们。你将会如何动态地创建，访问，控制以及移除HTML元素。这里提到的DOM方法，并非是HTML专有的；它们在XML中同样适用。这里所有的示例，在任何全面支持DOM level1 的浏览器里都能正常工作；例如Mozilla浏览器或者其他基于Mozilla的浏览器，像网景公司的下一代导航者（Navigatior）浏览器等。这里的示例代码在IE5中也能正常工作。</p> + +<div class="note">这里所提到的DOM方法是文档对象模型规范（版本一）的核心的一部分。DOM 1版本包括对文档进行访问和处理的方法（DOM 1 核心）和专门为HTML文档定义的方法。</div> + +<h3 id="Sample1.html.E6.A6.82.E8.A7.88" name="Sample1.html.E6.A6.82.E8.A7.88">Sample1.html概览</h3> + +<p>这段文字是通过一个实例代码来介绍了DOM的。那么我们从下面的HTML示例来开始吧。这段示例使用了DOM1的方法，从JavaScript动态创建了一个HTML表格。它创建了一个包含了四个单元格，并且在每个单元格中含有文本。单元中文字内容是“这个单元式y行x列”，来展示单元格在表格中所处的位置。</p> + +<pre class="notranslate"><head> +<title>样例代码 - 使用 JavaScript 和 DOM 接口创建一个 HTML 表格</title> +<script> + function start() { + // 获得从body的引用 + var mybody=document.getElementsByTagName("body").item(0); + // 创建一个TABLE的元素 + var mytable = document.createElement("TABLE"); + // 创建一个TBODY的元素 + var mytablebody = document.createElement("TBODY"); + // 创建所有的单元格 + for(j=0;j<2;j++) { + // 创建一个TR元素 + var mycurrent_row=document.createElement("TR"); + for(i=0;i<2;i++) { + // 创建一个TD元素 + var mycurrent_cell=document.createElement("TD"); + // 创建一个文本（text）节点 + var currenttext=document.createTextNode("cell is row "+j+", column "+i); + // 将我们创建的这个文本节点添加在TD元素里 + mycurrent_cell.appendChild(currenttext); + // 将TD元素添加在TR里 + mycurrent_row.appendChild(mycurrent_cell); + } + // 将TR元素添加在TBODY里 + mytablebody.appendChild(mycurrent_row); + } + // 将TBODY元素添加在TABLE里 + mytable.appendChild(mytablebody); + // 将TABLE元素添加在BODY里 + mybody.appendChild(mytable); + // 设置mytable的边界属性border为2 + mytable.setAttribute("border","2"); + } +</script> +</head> +<body onload="start()"> +</body> +</html> +</pre> + +<p>注意我们创建元素和文本节点的顺序：</p> + +<ol> + <li>首先我们创建了TABLE元素。</li> + <li>然后，我们创建了TABLE的子元素--TBODY。</li> + <li>然后，我们使用循环语句创建了TBODY的子元素--TR。</li> + <li>对于每一个TR元素，我们使用一个循环语句创建它的子元素--TD。</li> + <li>对于每一个TD元素，我们创建单元格内的文本节点。</li> +</ol> + +<p>现在，我们创建了TABLE，TBODY，TR，TD等元素，然后创建了文本节点；接下来，我们将每一个对象接在各自的父节点上，使用逆序：</p> + +<ol> + <li>首先，我们将每一个文本节点接在TD元素上 + <pre class="notranslate">mycurrent_cell.appendChild(currenttext);</pre> + </li> + <li>然后，我们将每一个TD元素接在他的父TR元素上。 + <pre class="notranslate">mycurrent_row.appendChild(mycurrent_cell);</pre> + </li> + <li>然后，我们将每一个TR元素接在他们的父TBODY元素上。 + <pre class="notranslate">mytablebody.appendChild(mycurrent_row);</pre> + </li> + <li>下一步,我们将TBODY元素接在他的父TABLE元素上 + <pre class="notranslate">mytable.appendChild(mytablebody);</pre> + </li> + <li>最后，我们将TABLE元素接在他的父元素BODY上。 + <pre class="notranslate">mybody.appendChild(mytable);</pre> + </li> +</ol> + +<p>请记住这个机制。你将会在W3C DOM编程中经常使用它。首先，你从上到下的创建元素；然后你从下向上的将子元素接在他们的父元素上。</p> + +<p>下面是由javascript代码生成的HTML代码：</p> + +<pre class="notranslate">... +<table border="2"> +<tbody> +<tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr> +<tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr> +</tbody> +</table> +... +</pre> + +<p>下面是由代码生成的TABLE及其子元素的DOM对象树：</p> + +<p><img alt="Image:sample1-tabledom.jpg" class="internal" src="/@api/deki/files/2677/=Sample1-tabledom.jpg"></p> + +<p>你可以只用一些DOM方法来创建这个表格和它内部的子元素。请在脑海中时刻保留你想要创建的数据结构的树之模型，这样有利于更简便的写出必须的代码。在图1的TABLE树中，TABLE有一个子元素TBODY。TBODY有两个子元素。每一个TR又含有两个子元素（TD）。最后，每一个TD有一个子元素--文本节点。</p> + +<h3 id=".E5.9F.BA.E6.9C.ACDOM.E6.96.B9.E6.B3.95_-_Sample2.html" name=".E5.9F.BA.E6.9C.ACDOM.E6.96.B9.E6.B3.95_-_Sample2.html">基本DOM方法 - Sample2.html</h3> + +<p><code>getElementByTagName</code>是文档接口（Document interface）和元素接口（Element interface）的中的方法，所以不管是根文档对象还是所有的元素对象都含有方法<code>getElementByTagName</code>。用来通过它们的标签名称（tag name）来获得某些元素的一系列子元素。你可以使用的方法是：<code><var>element</var>.getElementsByTagName(<var>tagname</var>)</code>。</p> + +<p><code>getElementsByTagName</code>返回一个有特定标签名称（tagname）的子元素列表。从这个子元素列表中，你可以通过调用<code>item</code>和你想得到的元素的下标，来获得单个元素。列表中第一个元素的下标是0。上面的方法很简单，但是当你操作一个巨大的数据结构时还是应该小心一些。 OK，我们下一个话题中要继续对我们的表格例子进行修改。下面的示例更加简单，它意图展示一些基础的方法：</p> + +<pre class="notranslate"><html> +<head> +<title>样例代码 - 使用 JavaScript 和 DOM 接口操作 HTML 表格</title> +<script> + function start() { + // 获得所有的body元素列表（在这里将只有一个） + myDocumentElements=document.getElementsByTagName("body"); + // 我们所需要body元素是这个列表的第一个元素 + myBody=myDocumentElements.item(0); + // 现在，让我们获得body的子元素中所有的p元素 + myBodyElements=myBody.getElementsByTagName("p"); + // 我们所需要的是这个列表中的第二个单元元素 + myP=myBodyElements.item(1); + } +</script> +</head> +<body onload="start()"> +<p>hi</p> +<p>hello</p> +</body> +</html> +</pre> + +<p>在这个例子中，我们设置变量<code>myP</code>指向DOM对象body中的第二个<code>p</code>元素：</p> + +<ol> + <li>首先，我们使用下面的代码获得所有的body元素的列表，因为在任何合法的HTML文档中都只有一个body元素，所以这个列表是只包含一个单元的。 + <pre class="notranslate">document.getElementsByTagName("body")</pre> + </li> + <li>下一步，我们取得列表的第一个元素，它本身就会body元素对象。 + <pre class="notranslate">myBody=myDocumentElements.item(0);</pre> + </li> + <li>然后，我们通过下面代码获得body的子元素中所有的p元素 + <pre class="notranslate">myBodyElements=myBody.getElementsByTagName("p");</pre> + </li> + <li>最后，我们从列表中取第二个单元元素。 + <pre class="notranslate">myP=myBodyElements.item(1);</pre> + </li> +</ol> + +<p><img alt="Image:sample2a2.jpg" src="https://developer.mozilla.org/@api/deki/files/834/=Sample2a2.jpg"></p> + +<p>一旦你取得了HTML元素的DOM对象，你就可以设置它的属性了。比如，如果你希望设置背景色属性，你只需要添加：</p> + +<pre class="notranslate">myP.style.background="rgb(255,0,0)"; +// 设置inline的背景色风格 + +</pre> + +<h4 id=".E4.BD.BF.E7.94.A8document.createTextNode.28...29.E5.88.9B.E5.BB.BA.E6.96.87.E6.9C.AC.E8.8A.82.E7.82.B9" name=".E4.BD.BF.E7.94.A8document.createTextNode.28...29.E5.88.9B.E5.BB.BA.E6.96.87.E6.9C.AC.E8.8A.82.E7.82.B9">使用document.createTextNode(..)创建文本节点</h4> + +<p>使用文档对象来调用一个createTextNode方法并创建你自己的文本节点。你只需要传递文字内容给这个函数。返回的值就是一个展示那个文本节点信息的对象。</p> + +<pre class="notranslate">myTextNode=document.createTextNode("world"); +</pre> + +<p>这表示你已经创建了一个TEXT——NODE（一个文字片断）类型的节点，并且它的内容是“world”，任何你对myTextNode的引用都指向这个节点对象。如果想将这个文本插入到HTML页面中，你还需要将它作为其他节点元素的子元素。</p> + +<h4 id=".E4.BD.BF.E7.94.A8appendChild.28...29.E6.8F.92.E5.85.A5.E5.85.83.E7.B4.A0" name=".E4.BD.BF.E7.94.A8appendChild.28...29.E6.8F.92.E5.85.A5.E5.85.83.E7.B4.A0">使用appendChild(..)插入元素</h4> + +<p>那么，通过调用myP.appendChild({{ mediawiki.external('node_element') }})你可以将这个元素设置成为第二个P的一个新的子元素。</p> + +<pre class="notranslate">myP.appendChild(myTextNode); +</pre> + +<p>在测试了这个例子之后，我们注意到，hello和world单词被组合在了一个：helloworld。事实上，当你看到HTML页面时，hello和world两个文字节点看起来更像是一个节点。但是请记住它们在文档模型中的形式--是两个节点。第二个节点是一个TEXT_NODE类型的新节点，也是第二个P标签的第二个子元素。下面的图标将在文档树种展示最近创建的文本节点对象。</p> + +<p><img alt="Image:sample2b2.jpg" src="https://developer.mozilla.org/@api/deki/files/835/=Sample2b2.jpg"></p> + +<div class="note">createTextNode 和 appendChild 是在单词hello和world之间设置空格的一个简单方法。另外一个重要的注意事项是：appendChild方法将把新的子节点接在最后一个子节点之后，正如world被加在了hello之后。所以如果你想在hello和world中间添加一个文本节点的话，你应该使用insertBefore而不是appendChild.</div> + +<h4 id=".E4.BD.BF.E7.94.A8.E6.96.87.E6.A1.A3.E5.AF.B9.E8.B1.A1.E5.92.8CcreateElement.28...29.E6.96.B9.E6.B3.95.E5.88.9B.E5.BB.BA.E6.96.B0.E7.9A.84.E5.85.83.E7.B4.A0" name=".E4.BD.BF.E7.94.A8.E6.96.87.E6.A1.A3.E5.AF.B9.E8.B1.A1.E5.92.8CcreateElement.28...29.E6.96.B9.E6.B3.95.E5.88.9B.E5.BB.BA.E6.96.B0.E7.9A.84.E5.85.83.E7.B4.A0">使用文档对象和createElement(..)方法创建新的元素</h4> + +<p>你可以使用createElement来创建新的HTML元素或者任何其它你想要的元素。比如，如果你想要创建一个新的P作为BODY的子元素，你可以使用前面例子的myBody并给它接上一个新的元素节点。使用 document.createElement("tagname")可以方便的创建一个节点。如下：</p> + +<pre class="notranslate">myNewPTAGnode=document.createElement("p"); +myBody.appendChild(myNewPTAGnode); +</pre> + +<p><img alt="Image:sample2c.jpg" src="https://developer.mozilla.org/@api/deki/files/836/=Sample2c.jpg"></p> + +<h4 id=".E4.BD.BF.E7.94.A8removeChild.28...29.E6.96.B9.E6.B3.95.E7.A7.BB.E9.99.A4.E8.8A.82.E7.82.B9" name=".E4.BD.BF.E7.94.A8removeChild.28...29.E6.96.B9.E6.B3.95.E7.A7.BB.E9.99.A4.E8.8A.82.E7.82.B9">使用removeChild(..)方法移除节点</h4> + +<p>每一个节点都可以被移除.下面的一行代码移除了包含在myP(第二个p元素)下面的文本节点world。</p> + +<pre class="notranslate">myP.removeChild(myTextNode); +</pre> + +<p>最后你可以将myTextNode（那个包含了world单词的节点）添加给我们最后创建的P元素：</p> + +<pre class="notranslate">myNewPTAGnode.appendChild(myTextNode); +</pre> + +<p>被修改的对象树的最后的状态如下：</p> + +<p><img alt="Image:sample2d.jpg" src="https://developer.mozilla.org/@api/deki/files/837/=Sample2d.jpg"></p> + +<h3 id=".E5.8A.A8.E6.80.81.E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA.E8.A1.A8.E6.A0.BC.28.E5.9B.9E.E5.88.B0Sample1.html.29" name=".E5.8A.A8.E6.80.81.E5.88.9B.E5.BB.BA.E4.B8.80.E4.B8.AA.E8.A1.A8.E6.A0.BC.28.E5.9B.9E.E5.88.B0Sample1.html.29">动态创建一个表格(回到Sample1.html)</h3> + +<p>这一段落的剩余部分我们将继续修改我们sample1.html。下面的图展示了我们在示例中创建的表格的对象树的结构。</p> + +<h4 id=".E5.A4.8D.E4.B9.A0.E4.B8.80.E4.B8.8BHTML.E8.A1.A8.E6.A0.BC.E7.BB.93.E6.9E.84" name=".E5.A4.8D.E4.B9.A0.E4.B8.80.E4.B8.8BHTML.E8.A1.A8.E6.A0.BC.E7.BB.93.E6.9E.84">复习一下HTML表格结构</h4> + +<p><img alt="Image:sample1-tabledom.jpg" src="https://developer.mozilla.org/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<h4 id=".E5.88.9B.E5.BB.BA.E5.85.83.E7.B4.A0.E8.8A.82.E7.82.B9.E5.B9.B6.E5.B0.86.E4.BB.96.E4.BB.AC.E6.8F.92.E5.85.A5.E5.88.B0.E6.96.87.E6.A1.A3.E6.A0.91.E4.B8.AD" name=".E5.88.9B.E5.BB.BA.E5.85.83.E7.B4.A0.E8.8A.82.E7.82.B9.E5.B9.B6.E5.B0.86.E4.BB.96.E4.BB.AC.E6.8F.92.E5.85.A5.E5.88.B0.E6.96.87.E6.A1.A3.E6.A0.91.E4.B8.AD">创建元素节点并将他们插入到文档树中</h4> + +<p>sample1.html中创建表格的基本步骤是：</p> + +<ul> + <li>获得body对象（文档对象的第一个元素）</li> + <li>创建所有元素。</li> + <li>最后，根据表格结构（上面图中所示）将每一个孩子节点拼接起来。下面的一段源码是经过修改的sample1.html</li> +</ul> + +<div class="note">在start函数的最后，有一行新代码。使用另一个DOM方法（setAttribute）来设置表格的边界属性。setAttribute有两个参数：属性的名称和属性的值。你可以使用这个方法来设置任意元素的任意属性。</div> + +<pre class="notranslate"><head> +<title>示例代码 - 使用Javascript和DOM Interfaces来处理HTML</title> +<script> + function start() { + // 获得body的引用 + var mybody=document.getElementsByTagName("body").item(0); + // 创建一个标签名称为TABLE的元素 + mytable = document.createElement("TABLE"); + // 创建一个标签名称为在TBODY的元素 + mytablebody = document.createElement("TBODY"); + // 创建所有的单元格 + for(j=0;j<2;j++) { + // 创建一个标签名称为在TR的元素 + mycurrent_row=document.createElement("TR"); + for(i=0;i<2;i++) { + // 创建一个标签名称为在TD的元素 + mycurrent_cell=document.createElement("TD"); + // 创建一个文字节点 + currenttext=document.createTextNode("cell is row "+j+", column "+i); + // 将文字节点添加到TD单元格内 + mycurrent_cell.appendChild(currenttext); + // 将TD单元格添加到TR行中 + mycurrent_row.appendChild(mycurrent_cell); + } + // 将TR行添加到TBODY中 + mytablebody.appendChild(mycurrent_row); + } + // 将TBODY添加到TABLE中 + mytable.appendChild(mytablebody); + // 将TABLE添加到BODY中 + mybody.appendChild(mytable); + // 设置边界属性为2 + mytable.setAttribute("border","2"); + } +</script> +</head> +<body onload="start()"> +</body> +</html> +</pre> + +<h3 id=".E4.BD.BF.E7.94.A8CSS.E5.92.8CDOM.E6.9D.A5.E6.93.8D.E4.BD.9C.E8.A1.A8.E6.A0.BC" name=".E4.BD.BF.E7.94.A8CSS.E5.92.8CDOM.E6.9D.A5.E6.93.8D.E4.BD.9C.E8.A1.A8.E6.A0.BC">使用CSS和DOM来操作表格</h3> + +<h4 id=".E4.BB.8E.E8.A1.A8.E6.A0.BC.E4.B8.AD.E8.8E.B7.E5.BE.97.E4.B8.80.E4.B8.AA.E6.96.87.E5.AD.97.E8.8A.82.E7.82.B9" name=".E4.BB.8E.E8.A1.A8.E6.A0.BC.E4.B8.AD.E8.8E.B7.E5.BE.97.E4.B8.80.E4.B8.AA.E6.96.87.E5.AD.97.E8.8A.82.E7.82.B9">从表格中获得一个文字节点</h4> + +<p>示例介绍了两个新的DOM属性。首先，使用childNodes属性来获得mycel的孩子节点列表。childNodes列表包括所有的孩子节点，无论它们的名称或类型是什么。像getElemengByTagName一样，它返回了一个节点列表。不同的是，getElementByTagName只返回指定标签名称的元素。一旦你获得了返回的列表，你可以使用item(x)方法来使用指定的元素。这个例子在表格的第二行第二个单元格中的myceltext中保存了一个文字节点。然后，运行这个例子并观察结果，他创建了一个新的文字节点，这个文字节点的内容是myceltext的值，并且将这个文字节点作为了BODY元素的一个孩子。</p> + +<div class="note">如果你的对象是一个文字节点，你可以使用data属性来回收（retrieve）节点的文字内容</div> + +<pre class="notranslate">mybody=document.getElementsByTagName("body").item(0); +mytable=mybody.getElementsByTagName("table").item(0); +mytablebody=mytable.getElementsByTagName("tbody").item(0); +myrow=mytablebody.getElementsByTagName("tr").item(1); +mycel=myrow.getElementsByTagName("td").item(1); +// mycel的孩子节点列表的第一个元素 +myceltext=mycel.childNodes.item(0); +// currenttext的内容是myceltext的内容 +currenttext=document.createTextNode(myceltext.data); +mybody.appendChild(currenttext); +</pre> + +<h4 id=".E8.8E.B7.E5.BE.97.E4.B8.80.E4.B8.AA.E5.B1.9E.E6.80.A7.E7.9A.84.E5.80.BC" name=".E8.8E.B7.E5.BE.97.E4.B8.80.E4.B8.AA.E5.B1.9E.E6.80.A7.E7.9A.84.E5.80.BC">获得一个属性的值</h4> + +<p>在sample1的最后我们在mytable对象上调用了setAttribute。这个调用是用来设置表格的边界属性的。然后是用了getAttribute方法来获得一个属性的值：</p> + +<pre class="notranslate">mytable.getAttribute("border"); +</pre> + +<h4 id=".E9.80.9A.E8.BF.87.E6.94.B9.E5.8F.98.E6.A0.B7.E5.BC.8F.E5.B1.9E.E6.80.A7.E6.9D.A5.E9.9A.90.E8.97.8F.E4.B8.80.E5.88.97" name=".E9.80.9A.E8.BF.87.E6.94.B9.E5.8F.98.E6.A0.B7.E5.BC.8F.E5.B1.9E.E6.80.A7.E6.9D.A5.E9.9A.90.E8.97.8F.E4.B8.80.E5.88.97">通过改变样式属性来隐藏一列</h4> + +<p>一旦你在你的javascript变量中保存了一个对象，你就可以直接为它设置样式属性了。下面的代码是修改后的sample1.html，在这里，第二列的每一个单元格都被隐藏了。而且第一列中的每一个单元格改为使用红色背景。注意，样式属性是被直接设置的。</p> + +<pre class="notranslate"><html> +<body onload="start()"> +</body> +<script> + function start() { + var mybody=document.getElementsByTagName("body").item(0); + mytable = document.createElement("TABLE"); + mytablebody = document.createElement("TBODY"); + for(j=0;j<2;j++) { + mycurrent_row=document.createElement("TR"); + for(i=0;i<2;i++) { + mycurrent_cell=document.createElement("TD"); + currenttext=document.createTextNode("cell is:"+i+j); + mycurrent_cell.appendChild(currenttext); + mycurrent_row.appendChild(mycurrent_cell); + // 当column为0时，设置单元格背景色；column为1时隐藏单元格 + if(i==0) { + mycurrent_cell.style.background="rgb(255,0,0)"; + } else { + mycurrent_cell.style.display="none"; + } + } + mytablebody.appendChild(mycurrent_row); + } + mytable.appendChild(mytablebody); + mybody.appendChild(mytable); + } +</script> +</html> +</pre> + +<div class="noinclude"></div> +{{ languages( { "en": "en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces", "fr": "fr/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript", "ja": "ja/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces" } ) }}</div> diff --git a/files/zh-cn/web/api/document/mozfullscreenelement/index.html b/files/zh-cn/web/api/documentorshadowroot/fullscreenelement/index.html index d87cd89683..d26c1b85df 100644 --- a/files/zh-cn/web/api/document/mozfullscreenelement/index.html +++ b/files/zh-cn/web/api/documentorshadowroot/fullscreenelement/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreenElement -slug: Web/API/Document/mozFullScreenElement +slug: Web/API/DocumentOrShadowRoot/fullscreenElement translation_of: Web/API/DocumentOrShadowRoot/fullscreenElement +original_slug: Web/API/Document/mozFullScreenElement --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">概述</h3> diff --git a/files/zh-cn/web/api/document/pointerlockelement/index.html b/files/zh-cn/web/api/documentorshadowroot/pointerlockelement/index.html index eb6ed9cf98..38702632bd 100644 --- a/files/zh-cn/web/api/document/pointerlockelement/index.html +++ b/files/zh-cn/web/api/documentorshadowroot/pointerlockelement/index.html @@ -1,7 +1,8 @@ --- title: Document.pointerLockElement -slug: Web/API/Document/pointerLockElement +slug: Web/API/DocumentOrShadowRoot/pointerLockElement translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +original_slug: Web/API/Document/pointerLockElement --- <div>{{APIRef("DOM")}}</div> diff --git a/files/zh-cn/web/api/element/afterscriptexecute_event/index.html b/files/zh-cn/web/api/element/afterscriptexecute_event/index.html new file mode 100644 index 0000000000..bf7f503f53 --- /dev/null +++ b/files/zh-cn/web/api/element/afterscriptexecute_event/index.html @@ -0,0 +1,58 @@ +--- +title: Element：afterscriptexecute 事件 +slug: Web/API/Element/afterscriptexecute_event +tags: + - 事件 + - 参考 + - 非标准 +translation_of: Web/API/Element/afterscriptexecute_event +original_slug: Web/Events/afterscriptexecute +--- +<div>{{APIRef}}</div> + +<div>{{Non-standard_header}}</div> + +<div class="warning"> +<p>此事件是早期版本的规范中的一个提案。不要依赖它。</p> +</div> + +<p><strong><code>afterscriptexecute</code></strong> 事件在一个脚本执行完毕后触发。</p> + +<p>这是一个 Gecko（Firefox）特有的私有事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>是</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.afterscriptexecute_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><code><a href="/zh-CN/docs/Web/API/Element/beforescriptexecute_event">beforescriptexecute</a></code> 事件</li> +</ul> diff --git a/files/zh-cn/web/api/element/beforescriptexecute_event/index.html b/files/zh-cn/web/api/element/beforescriptexecute_event/index.html new file mode 100644 index 0000000000..0097f13ce6 --- /dev/null +++ b/files/zh-cn/web/api/element/beforescriptexecute_event/index.html @@ -0,0 +1,58 @@ +--- +title: Element：beforescriptexecute 事件 +slug: Web/API/Element/beforescriptexecute_event +tags: + - DOM + - 参考 + - 非标准 +translation_of: Web/API/Element/beforescriptexecute_event +original_slug: Web/Events/beforescriptexecute +--- +<div>{{APIRef}}</div> + +<div>{{Non-standard_header}}</div> + +<div class="warning"> +<p>此事件是早期版本的规范中的一个提案。不要依赖它。</p> +</div> + +<p><strong><code>beforescriptexecute</code></strong> 事件在一个脚本被执行前触发，取消此事件可以阻止该脚本的执行。</p> + +<p>这是一个 Gecko（Firefox）特有的私有事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>是</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.beforescriptexecute_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><code><a href="/zh-CN/docs/Web/API/Element/afterscriptexecute_event">afterscriptexecute</a></code> 事件</li> +</ul> diff --git a/files/zh-cn/web/api/element/blur_event/index.html b/files/zh-cn/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..a072ec452b --- /dev/null +++ b/files/zh-cn/web/api/element/blur_event/index.html @@ -0,0 +1,151 @@ +--- +title: blur (event) +slug: Web/API/Element/blur_event +translation_of: Web/API/Element/blur_event +original_slug: Web/Events/blur +--- +<p>当一个元素失去焦点的时候 blur 事件被触发。它和 <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> 事件的主要区别是 focusout 支持冒泡。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> + <dd style="margin: 0 0 0 120px;">元素（Element）</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<p>{{NoteStart}}{{domxref("Document.activeElement")}} 的值随浏览器的不同而不同 ({{bug(452307)}}): IE10把值设为焦点将要移向的对象 , 而Firefox和Chrome 往往把值设为<code>body</code> .{{NoteEnd}}</p> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否冒泡.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否可取消默认行为.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM 元素)</td> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="事件代理">事件代理</h2> + +<p>有两种方法来为这个事件实现事件代理：在支持 <code>focusout</code> 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 方法的第三个参数 "useCapture" 为 <code>true：</code></p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush:html;"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">var form = document.getElementById("form"); +form.addEventListener("focus", function( event ) { + event.target.style.background = "pink"; +}, true); +form.addEventListener("blur", function( event ) { + event.target.style.background = ""; +}, true);</pre> + +<p>{{EmbedLiveSample('Event_delegation')}}</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>6</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>53</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 Gecko 24 {{geckoRelease(24)}} 之前，事件的接口为 {{domxref("Event")}}，而不是 {{domxref("FocusEvent")}}。参考 ({{bug(855741)}}).</p> + +<h2 id="相关的事件">相关的事件</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/compositionend_event/index.html b/files/zh-cn/web/api/element/compositionend_event/index.html new file mode 100644 index 0000000000..a6f99fdb23 --- /dev/null +++ b/files/zh-cn/web/api/element/compositionend_event/index.html @@ -0,0 +1,147 @@ +--- +title: compositionend +slug: Web/API/Element/compositionend_event +tags: + - 事件 +translation_of: Web/API/Element/compositionend_event +original_slug: Web/Events/compositionend +--- +<p>当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。</p> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("TouchEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>聚焦元素处理成分</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>事件是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>是否可以取消该事件</td> + </tr> + <tr> + <td><code>view</code> {{ReadOnlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("Document.defaultView")}} (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{ReadOnlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>data </code>{{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>正在编辑的原始字符串, 否则为空字符串。只读。</td> + </tr> + <tr> + <td><code>locale</code></td> + <td>{{domxref("DOMString")}} (string)</td> + <td>组合事件的语言代码 (如果可用);否则, 为空字符串。只读。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 该事件是在9.0 之前的Gecko版本中已经可以使用, 但没有 DOM 级3属性和方法。Gecko还不支持给受信任事件的locale属性设置值。但是, 当创建不受信任的事件时，此值可以通过<code>initCompositionEvent()</code> 设置。</p> + +<h2 id="Related_events">Related events</h2> + +<ul> + <li>{{Event("compositionstart")}}</li> + <li>{{Event("compositionupdate")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.html b/files/zh-cn/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..3997c0b7b1 --- /dev/null +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -0,0 +1,153 @@ +--- +title: compositionstart +slug: Web/API/Element/compositionstart_event +tags: + - Element + - Event + - Input method + - compositionstart + - 事件 + - 参考 +translation_of: Web/API/Element/compositionstart_event +original_slug: Web/Events/compositionstart +--- +<p>文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 <strong><code>compositionstart</code></strong> 事件。</p> + +<p>例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>Bubbles</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Cancelable</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Interface</strong></td> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <td><strong>Event handler property</strong></td> + <td> + <table> + <tbody> + <tr> + <td>None</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre>const inputElement = document.querySelector('input[type="text"]'); + +inputElement.addEventListener('compositionstart', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> + +<h3 id="动态演示">动态演示</h3> + +<h4 id="HTML">HTML</h4> + +<pre><div class="control"> + <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre>body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> + +<h4 id="JS">JS</h4> + +<pre>const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="180px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/compositionstart_event$samples/Live_example?revision=1606277" width="100%"></iframe></p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-compositionstart')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.compositionstart_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关事件：{{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/element/compositionupdate_event/index.html b/files/zh-cn/web/api/element/compositionupdate_event/index.html new file mode 100644 index 0000000000..af46b6cfdb --- /dev/null +++ b/files/zh-cn/web/api/element/compositionupdate_event/index.html @@ -0,0 +1,146 @@ +--- +title: compositionupdate +slug: Web/API/Element/compositionupdate_event +translation_of: Web/API/Element/compositionupdate_event +original_slug: Web/Events/compositionupdate +--- +<p><strong><code>compositionupdate</code></strong> 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）</p> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("TouchEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>焦点所在的，处理文字输入的元素。</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>Does the event normally bubble?</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>Is it possible to cancel the event?</td> + </tr> + <tr> + <td><code>view</code> {{ReadOnlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("Document.defaultView")}} (the <code>window</code> of the document).</td> + </tr> + <tr> + <td><code>detail</code> {{ReadOnlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>data </code>{{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。</td> + </tr> + <tr> + <td><code>locale </code>{{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>输入事件的语言代号，或者空字符串。只读。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 <code>compositionstart</code> 事件之后不会立即执行。</p> + +<p>[2] <code>compositionupdate</code> 事件在编辑器里的内容改变之前就会触发。自从 Gecko 12.0 {{geckoRelease("12.0")}} 开始 <code>input</code> 事件在输入过程中、内容变化后就触发。使用它可以在输入过程中就获得新的内容。</p> + +<p>Gecko 在可信事件（trusted events）中还不支持 <code>locale</code> 属性。但是开发者可以在使用 <code>initCompositionEvent()</code> 创建不可信事件时指定一个值。</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{Event("compositionstart")}}</li> + <li>{{Event("compositionupdate")}}</li> + <li>{{Event("compositionend")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/copy_event/index.html b/files/zh-cn/web/api/element/copy_event/index.html new file mode 100644 index 0000000000..9c705e1de4 --- /dev/null +++ b/files/zh-cn/web/api/element/copy_event/index.html @@ -0,0 +1,165 @@ +--- +title: copy +slug: Web/API/Element/copy_event +tags: + - Clipboard API + - Event + - Reference +translation_of: Web/API/Element/copy_event +original_slug: Web/Events/copy +--- +<p>当用户通过浏览器UI（例如，使用 <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>C</kbd> 键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发<code>copy</code>事件。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}：获得焦点的元素（如{{domxref("HTMLElement.contentEditable","contentEditable")}}内容能编辑或者可以选中的元素），或{{HTMLElement("body")}}。</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">见下文。</dd> +</dl> + +<p>调用{{domxref("DataTransfer.setData","setData(format, data)")}}可以修改{{domxref("ClipboardEvent.clipboardData")}}事件的默认行为：</p> + +<pre class="brush: js">document.addEventListener('copy', function(e){ + e.clipboardData.setData('text/plain', 'Hello, world!'); + e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); + e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard +});</pre> + +<p>不能使用{{domxref("DataTransfer.getData", "clipboardData.getData()")}}在事件处理函数中获取剪切板数据。</p> + +<p>事件的默认行为与事件的来源和事件处理函数相关：</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">synthetic</a> copy事件没有默认行为，除非：</li> + <li>如果默认事件没有取消，就复制到选区（如果有选中内容）到剪切板；</li> + <li>如果取消了默认事件，但是调用了<code>setData()</code>方法：就复制<code>clipboardData</code>的内容到到剪切板；</li> + <li>如果取消了默认行为，而且没有调用<code>setData()</code>方法，就没有任何行为。</li> +</ul> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(22) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(22) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("HTMLElement.oncopy")}}</li> + <li>Related events + <ul> + <li>{{event("cut")}}</li> + <li>{{event("paste")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/cut_event/index.html b/files/zh-cn/web/api/element/cut_event/index.html new file mode 100644 index 0000000000..ea59997633 --- /dev/null +++ b/files/zh-cn/web/api/element/cut_event/index.html @@ -0,0 +1,160 @@ +--- +title: cut +slug: Web/API/Element/cut_event +tags: + - 事件 + - 剪贴板API + - 参考 +translation_of: Web/API/Element/cut_event +original_slug: Web/Events/cut +--- +<div class="warning"> +<p>This page needs to be updated to match the currently specified behaviour. In the meantime please refer to the specification: <a href="https://www.w3.org/TR/clipboard-apis/#the-paste-action">https://www.w3.org/TR/clipboard-apis/#the-cut-action</a></p> +</div> + +<p><span class="seoSummary"><strong><code>cut</code></strong> 事件在将选中内容从文档中删除并将其添加到剪贴板后触发。</span></p> + +<p><font><font>如果用户尝试对不可编辑内容执行剪切操作，则</font></font><code>cut</code><font><font>事件仍会触发，但事件对象不包含任何数据。</font></font></p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("DefaultView")}}, {{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件对象（DOM树的顶层对象）。</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件的类型。</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否冒泡。</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可以取消。</td> + </tr> + <tr> + <td>clipboardData {{readonlyInline}}</td> + <td>{{domxref("DataTransfer")}}</td> + <td><font>剪贴板的内容。</font><font>不仅仅是文本，还有文件和图片。</font></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(22) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{compatChrome(58)}}</td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{compatChrome(58)}}</td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(22) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{domxref("HTMLElement.oncut")}}</li> + <li>Related events + <ul> + <li>{{event("copy")}}</li> + <li>{{event("paste")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/activate_event/index.html b/files/zh-cn/web/api/element/domactivate_event/index.html index 3185540e78..b0f129f8cc 100644 --- a/files/zh-cn/web/api/element/activate_event/index.html +++ b/files/zh-cn/web/api/element/domactivate_event/index.html @@ -1,11 +1,12 @@ --- title: 'Element: DOMActivate event' -slug: Web/API/Element/Activate_event +slug: Web/API/Element/DOMActivate_event tags: - API - 事件 - 参考 translation_of: Web/API/Element/DOMActivate_event +original_slug: Web/API/Element/Activate_event --- <p>{{APIRef}}</p> diff --git a/files/zh-cn/web/api/element/error_event/index.html b/files/zh-cn/web/api/element/error_event/index.html new file mode 100644 index 0000000000..3d14efef34 --- /dev/null +++ b/files/zh-cn/web/api/element/error_event/index.html @@ -0,0 +1,136 @@ +--- +title: error +slug: Web/API/Element/error_event +translation_of: Web/API/Element/error_event +original_slug: Web/Events/error +--- +<div>{{APIRef}}</div> + +<p>当一个资源加载失败或无法使用时，会在{{domxref("Element")}}对象上触发<code>error</code>事件。例如当脚本执行错误、或图片无法找到或图片无效时。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles（支持冒泡）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable（可撤销）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface（接口）</th> + <td>{{domxref("Event")}} 或{{domxref("UIEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property（事件处理程序属性）</th> + <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<p>如果事件对象是从用户界面元素生成的，则它是一个{{domxref("UIEvent")}}实例;反之，它是一个{{domxref("Event")}}实例。</p> + +<h2 id="示例">示例</h2> + +<h3 id="在线示例"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/blur_event#%E5%9C%A8%E7%BA%BF%E7%A4%BA%E4%BE%8B">在线示例</a></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="controls"> + <button id="img-error" type="button">生成图像error</button> + <img class="bad-img" /> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +button { + height: 2rem; + margin: .5rem; +} + +img { + width: 0; + height: 0; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents'); + +const badImg = document.querySelector('.bad-img'); +badImg.addEventListener('error', (event) => { + log.textContent = log.textContent + `${event.type}: Loading image\n`; + console.log(event) +}); + +const imgError = document.querySelector('#img-error'); +imgError.addEventListener('click', () => { + badImg.setAttribute('src', 'i-dont-exist'); +}); +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-error')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送请求请求。</div> + +<p>{{Compat("api.Element.error_event")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>This event on <code>Window</code> targets: {{domxref("Window/error_event", "error")}} event</li> +</ul> diff --git a/files/zh-cn/web/api/element/focus_event/index.html b/files/zh-cn/web/api/element/focus_event/index.html new file mode 100644 index 0000000000..ff4ebf6447 --- /dev/null +++ b/files/zh-cn/web/api/element/focus_event/index.html @@ -0,0 +1,138 @@ +--- +title: focus +slug: Web/API/Element/focus_event +translation_of: Web/API/Element/focus_event +original_slug: Web/Events/focus +--- +<p>focus事件在元素获取焦点时触发. 这个事件和 <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a> 最大的区别仅仅在于后者会事件冒泡.</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">能否取消默认</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">事件目标</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无.</dd> +</dl> + +<div class="note">注释: 这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target (DOM element)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>null</td> + </tr> + </tbody> +</table> + +<h2 id="事件委托">事件委托</h2> + +<p>此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 <code>focusin</code> 事件 (除了Firefox之外的所有浏览器), 或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 的参数"useCapture" 值为true:</p> + +<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p> + +<p>(Sample code from <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Featrue</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/focusout_event/index.html b/files/zh-cn/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..defd92146f --- /dev/null +++ b/files/zh-cn/web/api/element/focusout_event/index.html @@ -0,0 +1,126 @@ +--- +title: focusout +slug: Web/API/Element/focusout_event +translation_of: Web/API/Element/focusout_event +original_slug: Web/Events/focusout +--- +<p>当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/blur">blur</a> 事件之间的主要区别在于后者不会冒泡。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target losing focus.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>Event target receiving focus.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/mousewheel_event/index.html b/files/zh-cn/web/api/element/mousewheel_event/index.html new file mode 100644 index 0000000000..26649814ed --- /dev/null +++ b/files/zh-cn/web/api/element/mousewheel_event/index.html @@ -0,0 +1,182 @@ +--- +title: mousewheel +slug: Web/API/Element/mousewheel_event +translation_of: Web/API/Element/mousewheel_event +original_slug: Web/Events/mousewheel +--- +<p>{{ Non-standard_header() }}</p> + +<p>The <code>mousewheel</code> event is fired asynchronously when a mouse wheel or similar device is operated. It's represented by the {{ domxref("MouseWheelEvent") }} interface.</p> + +<div class="note"> +<p><strong>Do not use this wheel event.</strong></p> + +<p>This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard <em>{{event("wheel")}} event.</em></p> +</div> + +<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;"> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Interface :</dfn>{{ domxref('MouseWheelEvent') }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Synchronicity :</dfn>asynchronous</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Bubbles :</dfn> yes (Though, MSDN documents "No")</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Target :</dfn> {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Cancelable :</dfn> yes (Though, MSDN documents "No")</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Default action :</dfn> Scroll, moving history, or zooming in/out</li> +</ul> + +<h2 id="Specification">Specification</h2> + +<p>The document in MSDN: {{ spec("http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx","onmousewheel event") }}</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</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatIE("6.0") }}</td> + <td>{{ CompatOpera("10.00") }}</td> + <td>{{ CompatSafari("3.0") }}</td> + </tr> + <tr> + <td><code>wheelDeltaX</code></td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatSafari("3.0") }}</td> + </tr> + <tr> + <td><code>wheelDeltaY</code></td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatSafari("3.0") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>wheelDeltaX</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>wheelDeltaY</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="detail_value">detail value</h2> + +<p>The <code>detail</code> attribute value is always 0 except Opera (Presto).</p> + +<p>Opera (Presto) sets almost the same value as Firefox (Gecko)'s <code>DOMMouseScroll</code> event's detail value which indicates the scroll amount by line. Negative value indicates to scroll to bottom or right. Positive value indicates to scroll to top or left.</p> + +<p>On Mac, the value is computed from accelerated scroll amount.</p> + +<p>On Linux, <code>2</code> or <code>-2</code> is set per native wheel event.</p> + +<h2 id="wheelDelta_wheelDeltaX_and_wheelDeltaY_value">wheelDelta, wheelDeltaX and wheelDeltaY value</h2> + +<p>The <code>wheelDelta</code> attribute value is an abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive, otherwise negative. This means that the delta value sign is different from DOM Level 3 Event's <code>wheel</code>. However, the meaning of the amount of these values is not the same between browsers. See following explanation for the detail.</p> + +<p>IE and Opera (Presto) only support <code>wheelDelta</code> attribute and do <strong>not</strong> support horizontal scroll.</p> + +<p>The <code>wheelDeltaX</code> attribute value indicates the <code>wheelDelta</code> attribute value along the horizontal axis. When a user operates the device for scrolling to right, the value is negative. Otherwise, i.e., if it's to left, the value is positive.</p> + +<p>The <code>wheelDeltaY</code> attribute value indicates the <code>wheelDelta</code> attribute value along the vertical axis. The sign of the value is the same as the <code>wheelDelta</code> attribute value.</p> + +<h3 id="IE">IE</h3> + +<p>The value is the same as the delta value of <code>WM_MOUSEWHEEL</code> or <code>WM_MOUSEHWHEEL</code>. It means that if the mouse wheel doesn't support high resolution scroll, the value is 120 per notch. The value isn't changed even if the scroll amount of system settings is page scroll.</p> + +<h3 id="Chrome">Chrome</h3> + +<p>On Windows, the value is the same as the delta value of <code>WM_MOUSEWHEEL</code> or <code>WM_MOUSEHWHEEL</code>. And also, the value isn't changed even if the scroll amount of system settings is page scroll, i.e., the value is the same as IE on Windows.</p> + +<p>On Linux, the value is <code>120</code> or <code>-120</code> per native wheel event. This makes the same behavior as IE and Chrome for Windows.</p> + +<p>On Mac, the value is complicated. The value is changed if the <strong>device</strong> that causes the native wheel event supports continuous scroll.</p> + +<p>If the device supports continuous scroll (e.g., trackpad of MacBook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount. In this case, the value is the same as Safari.</p> + +<p>If the device does <strong>not</strong> support continuous scroll (typically, old mouse wheel which cannot be turned smoothly), the value is computed from non-accelerated scroll amount (120 per notch). In this case, the value is different from Safari.</p> + +<p>This difference makes a serious issue for web application developers. That is, web developers cannot know if <code>mousewheel</code> event is caused by which device.</p> + +<p>See <code>WebInputEventFactory::mouseWheelEvent</code> of the <a href="http://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/web/WebInputEventFactoryMac.mm" title="http://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/web/mac/WebInputEventFactory.mm">Chromium's source code</a> for the detail.</p> + +<h3 id="Safari">Safari</h3> + +<p>The value is always computed from accelerated scroll amount. This is really different from other browsers except Chrome with continuous scroll supported device.</p> + +<p>Note: tested with the Windows package, the earliest available version was Safari 3.0 from 2007. It could be that earlier versions (on Mac) support the properties too.</p> + +<h3 id="Opera_(Presto)">Opera (Presto)</h3> + +<p>The value is always the <code>detail</code> attribute value ✕ <code>40</code>.</p> + +<p>On Windows, since the <code>detail</code> attribute value is computed from actual scroll amount, the value is different from other browsers except the scroll amount per notch is 3 lines in system settings or a page.</p> + +<p>On Linux, the value is <code>80</code> or <code>-80</code> per native wheel event. This is different from other browsers.</p> + +<p>On Mac, the <code>detail</code> attribute value is computed from accelerated scroll amout of native event. The value is usually much bigger than Safari's or Chrome's value.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("MouseWheelEvent") }}</li> + <li>Gecko's legacy mouse wheel events: <code>DOMMouseScroll</code>, <code>MozMousePixelScroll</code></li> + <li>Standardized wheel event: <code>wheel</code></li> +</ul> diff --git a/files/zh-cn/web/api/element/name/index.html b/files/zh-cn/web/api/element/name/index.html deleted file mode 100644 index f1a247fd70..0000000000 --- a/files/zh-cn/web/api/element/name/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -<p>{{ APIRef() }}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><strong>name</strong> 获取或设置一个 DOM 对象的 <code>name</code> 属性；它只能应用于下列元素：{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p>需要注意的是，<code>name</code> 属性在其他类型元素上不存在。它不是 {{domxref("Element")}} 或 {{domxref("HTMLElement")}} 接口的一个属性。</p> -</div> - -<p>Name 可被使用于 {{ domxref("document.getElementsByName()") }} 方法，<a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> 以及 the form <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elements</a> collection。当使用于表单（form）或表单元素（form elements collection）时，可能返回一个单独的元素或一个元素集合。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // 获取表单中第一个元素的引用 - var formElement = document.forms['formA'].elements[0]; - - // 设置一个 name - formElement.name = 'inputA'; - - // 显示 input 的 value 值 - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p>在 IE6 中，使用 {{domxref("document.createElement()")}} 方法创建的 DOM 对象的 name 属性不能被更改。</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<p>W3C DOM 2 HTML Specification:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/zh-cn/web/api/element/ongotpointercapture/index.html b/files/zh-cn/web/api/element/ongotpointercapture/index.html deleted file mode 100644 index 2ff983926f..0000000000 --- a/files/zh-cn/web/api/element/ongotpointercapture/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Element.ongotpointercapture -slug: Web/API/Element/ongotpointercapture -tags: - - API - - DOM - - Element - - Event Handler - - Pointer Events - - Property - - Reference - - 事件句柄 - - 元素 - - 属性 - - 引用 - - 指针事件 -translation_of: Web/API/GlobalEventHandlers/ongotpointercapture -translation_of_original: Web/API/Element/ongotpointercapture ---- -<p>{{ ApiRef("DOM") }}</p> - -<p><code>ongotpointercapture</code> 是一个{{domxref("Element")}} 接口的{{domxref("EventHandler")}} 属性，返回一个{{event("gotpointercapture")}} 事件类型的事件句柄 (function) .</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">var gotCaptureHandler = target.ongotpointercapture; -</pre> - -<h3 id="Return_Value" name="Return_Value">Return value</h3> - -<dl> - <dt><code>gotCaptureHandler</code></dt> - <dd>元素 <code>target</code> 的gotpointercapture 事件句柄。 .</dd> -</dl> - -<h2 id="Example">Example</h2> - -<pre class="brush: js"><html> -<script> -function overHandler(ev) { - // Determine the target event's gotpointercapture handler - var gotCaptureHandler = ev.target.ongotpointercapture; -} -function init() { - var el=document.getElementById("target"); - el.onpointerover = overHandler; -} -</script> -<body onload="init();"> -<div id="target"> Touch me ... </div> -</body> -</html> -</pre> - -<h2 id="Specifications" name="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('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>无稳定版</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="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>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> - <td>{{CompatIE("10")}}</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>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatIE("10")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementation withdrawn. See {{Bug("1166347")}}.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{ event("gotpointercapture") }}</li> -</ul> diff --git a/files/zh-cn/web/api/element/paste_event/index.html b/files/zh-cn/web/api/element/paste_event/index.html new file mode 100644 index 0000000000..e303cd4697 --- /dev/null +++ b/files/zh-cn/web/api/element/paste_event/index.html @@ -0,0 +1,104 @@ +--- +title: 'Element: paste事件' +slug: Web/API/Element/paste_event +tags: + - Clipboard API + - Event + - Reference +translation_of: Web/API/Element/paste_event +original_slug: Web/Events/paste +--- +<p> {{APIRef}}</p> + +<p>当用户在浏览器用户界面发起“粘贴”操作时，会触发<strong><code>paste</code></strong>事件。</p> + +<pre class="syntaxbox"><strong>冒泡</strong> 是 + +<strong>可取消</strong> 是 + +<strong>接口</strong> {{domxref("ClipboardEvent")}} + +<strong>事件处理属性</strong> {{domxref("HTMLElement/onpaste", "onpaste")}} +</pre> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">如果光标位于可编辑的上下文中（例如，在 {{HTMLElement("textarea")}} 或者 </span><code style="font-style: normal; font-size: 1rem; letter-spacing: -0.00278rem;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 属性设置为 </span><code style="font-style: normal; font-size: 1rem; letter-spacing: -0.00278rem;">true的元素</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">），则默认操作是将剪贴板的内容插入光标所在位置的文档中。</span></p> + +<p>事件处理程序可以通过调用事件的 <code>clipboardData</code> 属性上的 {{domxref("DataTransfer/getData", "getData()")}}访问剪贴板内容。</p> + +<p>要覆盖默认行为（例如，插入一些不同的数据或转换剪贴板的内容），事件处理程序必须使用 {{domxref("Event/preventDefault", "event.preventDefault()")}}，取消默认操作，然后手动插入想要的数据。</p> + +<p>可以构造和分派<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events">合成的</a><code>paste</code>事件，但这不会影响文档内容。</p> + +<h2 id="举例">举例</h2> + +<h3 id="Live_example">Live example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="source" contenteditable="true">Try copying text from this box...</div> +<div class="target" contenteditable="true">...and pasting it into this one</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +</pre> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const target = document.querySelector('div.target'); + +target.addEventListener('paste', (event) => { + let paste = (event.clipboardData || window.clipboardData).getData('text'); + paste = paste.toUpperCase(); + + const selection = window.getSelection(); + if (!selection.rangeCount) return false; + selection.deleteFromDocument(); + selection.getRangeAt(0).insertNode(document.createTextNode(paste)); + + event.preventDefault(); +}); +</pre> + +<h4 id="Result">Result</h4> + +<p> {{EmbedLiveSample('Live_example', '100%', '100px')}}</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td> + <td>{{Spec2('Clipboard API')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Element.paste_event")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>Related events: {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}</li> + <li>This event on {{domxref("Document")}} targets: {{domxref("Document/paste_event", "paste")}}</li> + <li>This event on {{domxref("Window")}} targets: {{domxref("Window/paste_event", "paste")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/style/index.html b/files/zh-cn/web/api/elementcssinlinestyle/style/index.html index 2b825c80cc..28248babe1 100644 --- a/files/zh-cn/web/api/htmlelement/style/index.html +++ b/files/zh-cn/web/api/elementcssinlinestyle/style/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.style -slug: Web/API/HTMLElement/style +slug: Web/API/ElementCSSInlineStyle/style translation_of: Web/API/ElementCSSInlineStyle/style +original_slug: Web/API/HTMLElement/style --- <div>{{ APIRef("HTML DOM") }}</div> diff --git a/files/zh-cn/web/api/entity/index.html b/files/zh-cn/web/api/entity/index.html deleted file mode 100644 index 2e05365217..0000000000 --- a/files/zh-cn/web/api/entity/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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/web/api/event.altkey/index.html b/files/zh-cn/web/api/event.altkey/index.html deleted file mode 100644 index fb69717e99..0000000000 --- a/files/zh-cn/web/api/event.altkey/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: event.altKey -slug: Web/API/event.altKey -translation_of: Web/API/MouseEvent/altKey -translation_of_original: Web/API/event.altKey ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>表明当事件触发时,ALT键是否处于按下的状态.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">event.altKey -</pre> -<h3 id="例子">例子</h3> -<pre><code><em>var bool</em> = event.altKey;</code> -</pre> -<p>如果当事件触发时,ALT键处于按下的状态,<code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">则bool</code>的值为<code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">true,否则为</code><code style="font-family: 'Courier New','Andale Mono',monospace; font-style: normal; font-variant: normal; font-size: 100%; line-height: normal; color: inherit; font-weight: inherit;">false</code>.</p> -<pre class="brush: html"><html> -<head> -<title>altKey 示例</title> - -<script type="text/javascript"> - -function showChar(e){ - alert( - "按下的键: " + String.fromCharCode(e.charCode) + "\n" - + "charCode: " + e.charCode + "\n" - + "是否按下ALT键: " + e.altKey + "\n" - ); -} - -</script> -</head> - -<body onkeypress="showChar(event);"> -<p> -按下一个字符键,尝试同时按下ALT键.<br /> -你也可以同时按下SHIFT键和ALT键. -</p> -</body> -</html> -</pre> -<h3 id="规范">规范</h3> -<p>DOM Level 2 Events - property of MouseEvent object</p> -<p>{{ languages( { "ja": "ja/DOM/event.altKey", "pl": "pl/DOM/event.altKey", "en": "en/DOM/event.altKey" } ) }}</p> diff --git a/files/zh-cn/web/api/event.button/index.html b/files/zh-cn/web/api/event.button/index.html deleted file mode 100644 index c75916a287..0000000000 --- a/files/zh-cn/web/api/event.button/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: event.button -slug: Web/API/event.button -translation_of: Web/API/MouseEvent/button -translation_of_original: Web/API/event.button ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>表明当前事件是由鼠标的哪个按键触发的.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre>event.button -</pre> -<h3 id="例子">例子</h3> -<pre>var buttonCode = event.button; -</pre> -<p>该属性返回一个整数值,代表触发当前事件的鼠标按键.在通常情况下,对应关系如下:</p> -<ul> - <li>0 为 左键点击.</li> - <li>1 为 中键点击.</li> - <li>2 为 右键点击.</li> -</ul> -<div class="note"> - <strong>注意:</strong> IE不遵守 See <a class="external" href="http://www.quirksmode.org/js/events_properties.html#button" title="http://www.quirksmode.org/js/events_properties.html#button">QuirksMode for details</a>.</div> -<p>The order of buttons may be different depending on how the pointing device has been configured.</p> -<h3 id="Example" name="Example">例子</h3> -<pre class="brush: html"><script> -var whichButton = function (e) { - // 处理不同的事件模型 - var e = e || window.event; - var btnCode; - - if ('object' === typeof e) { - btnCode = e.button; - - switch (btnCode) { - case 0: - alert('你按了左键.'); - break; - case 1: - alert('你按了中键.'); - break; - case 2: - alert('你按了右键.'); - break; - default: - alert('未知按键: ' + btnCode); - } - } -} -</script> - -<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">请点击鼠标...</button> -</pre> -<h3 id="Notes" name="Notes">备注</h3> -<p>Because mouse clicks are frequently intercepted by the user interface, it may be difficult to detect buttons other than those for a standard mouse click (usually the left button) in some circumstances.</p> -<p>Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.</p> -<h3 id="Specification" name="Specification">规范</h3> -<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> -<h3 id="浏览器兼容性">浏览器兼容性</h3> -<p>Based on Jan Wolter's <a class="external" href="http://unixpapa.com/js/mouse.html">JavaScript Madness: Mouse Events</a>.</p> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Gecko</th> - <th>Webkit</th> - <th>Internet Explorer</th> - <th>Opera</th> - </tr> - <tr> - <td>Basic support</td> - <td>1</td> - <td>523</td> - <td>9</td> - <td>8</td> - </tr> - </tbody> - </table> -</div> -<p>{{ languages( { "ja": "ja/DOM/event.button", "pl": "pl/DOM/event.button" ,"en": "en/DOM/event.button" } ) }}</p> diff --git a/files/zh-cn/web/api/event.relatedtarget/index.html b/files/zh-cn/web/api/event.relatedtarget/index.html deleted file mode 100644 index a334f4b2eb..0000000000 --- a/files/zh-cn/web/api/event.relatedtarget/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: event.relatedTarget -slug: Web/API/event.relatedTarget -translation_of: Web/API/MouseEvent/relatedTarget -translation_of_original: Web/API/event.relatedTarget ---- -<h2 id="Summary" name="Summary"> </h2> - -<p>{{APIRef("DOM")}}</p> - -<h2 id="Summary" name="Summary">简要</h2> - -<p>为事件标识第二目标</p> - -<h2 id="Summary" name="Summary">描述</h2> - -<p><code>relatedTarget</code> 属性用于在一个事件中查找另外一个元素。有些事件比如 <code>mouseover</code> 通常侧重处理一个特定的目标，而有些有也可能会涉及到第二目标，比如当目标退出第一目标的 <code>mouseover</code> 事件.</p> - -<h2 id="事件">事件</h2> - -<p>只有 <code>MouseEvent</code>s 有这个属性，而且这些些只在特定的 <code>MouseEvent</code>s 事件中有效：</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">事件名</td> - <td class="header"><code>relatedTarget</code> role</td> - </tr> - <tr> - <td>focusin</td> - <td>哪个 {{domxref("EventTarget")}} 失去焦点</td> - </tr> - <tr> - <td>focusout</td> - <td>哪个 {{domxref("EventTarget")}} 获得焦点</td> - </tr> - <tr> - <td>mouseenter</td> - <td>鼠标从哪个 {{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>mouseleave</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - <tr> - <td>mouseout</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - <tr> - <td>mouseover</td> - <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>dragenter</td> - <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td> - </tr> - <tr> - <td>dragexit</td> - <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td> - </tr> - </tbody> -</table> - -<h2 id="Example" name="Example">示例</h2> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - -<style> -div > div { - height: 128px; - width: 128px; -} -#top { background-color: red; } -#bottom { background-color: blue; } -</style> - -<script> -function outListener(event) { - console.log("exited " + event.target.id + " for " + event.relatedTarget.id); -} - -function overListener(event) { - console.log("entered " + event.target.id + " from " + event.relatedTarget.id); -} - -function loadListener() { - var top = document.getElementById("top"), - bottom = document.getElementById("bottom"); - - top.addEventListener("mouseover", overListener); - top.addEventListener("mouseout", outListener); - bottom.addEventListener("mouseover", overListener); - bottom.addEventListener("mouseout", outListener); -} -</script> - -</head> - -<body onload="loadListener();"> - -<div id="outer"> - <div id="top"></div> - <div id="bottom"></div> -</div> - -</body> -</html> -</pre> - -<p><a href="https://jsfiddle.net/uTe99">在JSFiddle中查看</a></p> - -<h2 id="Specification" name="Specification">Specification</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-relatedTarget">DOM Level 2 Events: MouseEvent.relatedTarget</a></li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/DOM/event/Comparison_of_Event_Targets" title="DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> -</ul> diff --git a/files/zh-cn/web/api/event.shiftkey/index.html b/files/zh-cn/web/api/event.shiftkey/index.html deleted file mode 100644 index e01246caca..0000000000 --- a/files/zh-cn/web/api/event.shiftkey/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: event.shiftKey -slug: Web/API/event.shiftKey -translation_of: Web/API/MouseEvent/shiftKey -translation_of_original: Web/API/event.shiftKey ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>表明当事件触发时,SHIFT键是否处于按下状态.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval"><em>var bool</em> = event.shiftKey; -</pre> -<p><code>bool</code> 的值为 <code>true</code> 或 <code>false</code></p> -<h3 id="Example" name="Example">例子</h3> -<pre><html> -<head> -<title>shiftKey example</title> - -<script type="text/javascript"> - -function showChar(e){ - alert( - "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" - + "charCode: " + e.charCode + "\n" - + "SHIFT key pressed: " + e.shiftKey + "\n" - + "ALT key pressed: " + e.altKey + "\n" - ); -} - -</script> -</head> - -<body onkeypress="showChar(event);"> -<p><span>按下一个字符键,尝试同时按下</span>SHIFT<span>键.</span><br /> -<span>你也可以同时按下SHIFT键和ALT键.</span></p> -</body> -</html> -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MouseEvent-shiftKey">shiftKey </a></p> -<p>{{ languages( { "pl": "pl/DOM/event.shiftKey" ,"en": "en/DOM/event.shiftKey" } ) }}</p> diff --git a/files/zh-cn/web/api/event/禁用时间冒泡/index.html b/files/zh-cn/web/api/event/cancelbubble/index.html index c228d329d6..e87685b269 100644 --- a/files/zh-cn/web/api/event/禁用时间冒泡/index.html +++ b/files/zh-cn/web/api/event/cancelbubble/index.html @@ -1,9 +1,10 @@ --- title: Event.cancelBubble -slug: Web/API/Event/禁用时间冒泡 +slug: Web/API/Event/cancelBubble tags: - 事件 translation_of: Web/API/Event/cancelBubble +original_slug: Web/API/Event/禁用时间冒泡 --- <p>{{APIRef("DOM Events")}} </p> diff --git a/files/zh-cn/web/api/event/createevent/index.html b/files/zh-cn/web/api/event/createevent/index.html deleted file mode 100644 index 8b9c249c71..0000000000 --- a/files/zh-cn/web/api/event/createevent/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -tags: - - DOM - - Event - - JavaScript - - Method -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -<p>{{APIRef("DOM")}}</p> - -<p>创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。</p> - -<h3 id="语法">语法</h3> - -<pre><code>document.createEvent(type) </code></pre> - -<dl> - <dt><code>type</code></dt> - <dd>指明待创建事件对象的类型的字符串</dd> -</dl> - -<p>此方法返回一个新的特定类型的 DOM {{ domxref("Event") }} 对象，此对象在使用前必须经过初始化（init）。</p> - -<h3 id="示例">示例</h3> - -<pre>var newEvent = document.createEvent("UIEvents");</pre> - -<h3 id="规范">规范</h3> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> -</ul> diff --git a/files/zh-cn/web/api/event/deeppath/index.html b/files/zh-cn/web/api/event/deeppath/index.html deleted file mode 100644 index 61bfdf1366..0000000000 --- a/files/zh-cn/web/api/event/deeppath/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Event.deepPath -slug: Web/API/Event/deepPath -translation_of: Web/API/Event/composedPath -translation_of_original: Web/API/Event/deepPath ---- -<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p> - -<p><span class="seoSummary">{{domxref("Event")}}的<strong><code>deepPath</code></strong> 属性返回事件冒泡过程所有经过的节点所构成的{{jsxref("Array")}}数组</span></p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">var <em>nodes</em>[] = Event.deepPath</pre> - -<h3 id="返回值">返回值</h3> - -<p>一组节点 构成的{{jsxref("Array")}}数组</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规格</th> - <th scope="col">状态</th> - <th scope="col">评语</th> - </tr> - <tr> - <td>{{SpecName('Shadow DOM','#widl-Event-deepPath-sequence-EventTarget','deepPath')}}</td> - <td>{{Spec2('Shadow DOM')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(53.0)}}</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>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>{{CompatChrome(53.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(53.0)}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/zh-cn/web/api/eventsource/close/index.html b/files/zh-cn/web/api/eventsource/close/index.html new file mode 100644 index 0000000000..424e609656 --- /dev/null +++ b/files/zh-cn/web/api/eventsource/close/index.html @@ -0,0 +1,139 @@ +--- +title: EventSource.close() +slug: Web/API/EventSource/close +translation_of: Web/API/EventSource/close +original_slug: Server-sent_events/EventSource/close +--- +<div>{{APIRef('WebSockets API')}}</div> + +<div> </div> + +<p>{{domxref("EventSource")}} 的方法<code><strong>close()</strong></code>用于关闭当前的连接，如果调用了此方法，则会将{{domxref("EventSource.readyState")}}这个属性值设置为 2 (closed)</p> + +<div class="note"> +<p><strong>Note</strong>: 如果连接已经被关闭，此方法不会做任何事情</p> +</div> + +<h2 id="语法"><strong>语法</strong></h2> + +<pre class="syntaxbox">eventSource.close();</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>Void.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var button = document.querySelector('button'); +var evtSource = new EventSource('sse.php'); + +button.onclick = function() { + console.log('Connection closed'); + evtSource.close(); +} +</pre> + +<div class="note"> +<p><strong>Note</strong>: 你可以在Github上查看这整个例子： <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>EventSource support</td> + <td>6</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5</td> + </tr> + <tr> + <td>Available in shared and dedicated workers<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>EventSource support</td> + <td>4.4</td> + <td>45</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>4.1</td> + </tr> + <tr> + <td>Available in shared and dedicated workers<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("EventSource")}}</li> +</ul> diff --git a/files/zh-cn/web/api/eventsource/eventsource/index.html b/files/zh-cn/web/api/eventsource/eventsource/index.html new file mode 100644 index 0000000000..d228a4768d --- /dev/null +++ b/files/zh-cn/web/api/eventsource/eventsource/index.html @@ -0,0 +1,150 @@ +--- +title: EventSource() +slug: Web/API/EventSource/EventSource +tags: + - API + - EventSource + - Server-sent events +translation_of: Web/API/EventSource/EventSource +original_slug: Server-sent_events/EventSource/EventSource +--- +<p>{{APIRef('WebSockets API')}}</p> + +<p><code><strong>EventSource</strong></code><strong><code>()</code></strong> 构造函数返回一个新建的{{domxref("EventSource")}}，它代表了一个远程资源。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">pc = new EventSource(url, <em>configuration</em>);</pre> + +<h3 class="syntaxbox" id="参数">参数</h3> + +<dl> + <dt><code>url</code></dt> + <dd> 一个{{domxref("USVString")}} ，它代表远程资源的位置</dd> + <dt><code>configuration</code> {{optional_inline}}</dt> + <dd>为配置新连接提供选项。可选项是： + <ul> + <li><code>withCredentials</code>，默认为 <code>false</code>，指示 CORS 是否应包含凭据( credentials )。</li> + </ul> + </dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p> 一个新建的 {{domxref("EventSource")}} 对象，如果指定了<code>configuration</code>， 则按其配置；否则，配置为合适的基本默认值。</p> + + + +<h2 id="示例">示例</h2> + + + +<pre class="brush: js">var evtSource = new EventSource('sse.php'); +var eventList = document.querySelector('ul'); + +evtSource.onmessage = function(e) { + var newElement = document.createElement("li"); + + newElement.textContent = "message: " + e.data; + eventList.appendChild(newElement); +}</pre> + +<div class="note"> +<p><strong>笔记</strong>: 你可以在 GitHub 查看完整示例 — 请查看 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> +</div> + + + + + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "comms.html#dom-eventsource", "EventSource()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<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>9</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>11</td> + <td>5</td> + </tr> + <tr> + <td>CORS support (<code>withCredentials</code>)</td> + <td>26</td> + <td>{{ CompatGeckoDesktop("11.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>12</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatAndroid("4.4") }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>CORS support (<code>withCredentials</code>)</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("11.0") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("EventSource")}}</li> +</ul> diff --git a/files/zh-cn/web/api/eventsource/index.html b/files/zh-cn/web/api/eventsource/index.html new file mode 100644 index 0000000000..55a81c56ef --- /dev/null +++ b/files/zh-cn/web/api/eventsource/index.html @@ -0,0 +1,156 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Server-sent events + - 参考 +translation_of: Web/API/EventSource +original_slug: Server-sent_events/EventSource +--- +<p>{{APIRef("Websockets API")}}</p> + +<p class="summary"><code><strong>EventSource</strong></code> 是服务器推送的一个网络事件接口。一个EventSource实例会对HTTP服务开启一个持久化的连接，以<code>text/event-stream</code> 格式发送事件, 会一直保持开启直到被要求关闭。</p> + +<p>一旦连接开启，来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段，触发的事件与事件字段的值相同。如果没有事件字段存在，则将触发通用事件。</p> + +<p>与 <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>,不同的是，服务端推送是单向的。数据信息被单向从服务端到客户端分发. 当不需要以消息形式将数据从客户端发送到服务器时，这使它们成为绝佳的选择。例如，对于处理社交媒体状态更新，新闻提要或将数据传递到客户端存储机制（如IndexedDB或Web存储）之类的，EventSource无疑是一个有效方案。</p> + +<h2 id="构造函数">构造函数</h2> + +<dl> + <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt> + <dd>以指定的 {{domxref("USVString")}} 创建一个新的 <code>EventSource</code>。</dd> +</dl> + +<h2 id="属性">属性</h2> + +<p><em>此接口从其父接口 {{domxref("EventTarget")}} 继承属性。</em></p> + +<dl> + <dt>{{domxref("EventSource.onerror")}}</dt> + <dd>是一个 {{domxref("EventHandler")}}，当发生错误时被调用，并且在此对象上派发 {{event("error")}} 事件。</dd> + <dt>{{domxref("EventSource.onmessage")}}</dt> + <dd>是一个 {{domxref("EventHandler")}}，当收到一个 {{event("message")}} 事件，即消息来自源头时被调用。</dd> + <dt>{{domxref("EventSource.onopen")}}</dt> + <dd>是一个 {{domxref("EventHandler")}}，当收到一个 {{event(" open ")}} 事件，即连接刚打开时被调用。</dd> + <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt> + <dd>一个 <code>unsigned </code> <code> short</code> 值，代表连接状态。可能值是 <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), 或者 <code>CLOSED</code> (<code>2</code>)。</dd> + <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt> + <dd>一个{{domxref("DOMString")}}，代表事件源的 URL。</dd> +</dl> + +<h3 id="事件接收器">事件接收器</h3> + +<dl> + <dt>{{domxref("EventSource.onerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} called when an error occurs and the {{domxref("EventSource/error_event", "error")}} event is dispatched on an <code>EventSource</code> object.</dd> + <dt>{{domxref("EventSource.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} called when a {{domxref("EventSource/message_event", "message")}} event is received, that is when a message is coming from the source.</dd> + <dt>{{domxref("EventSource.onopen")}}</dt> + <dd>Is an {{domxref("EventHandler")}} called when an {{domxref("EventSource/open_event", "open")}} event is received, that is when the connection was just opened.</dd> +</dl> + +<h2 id="方法">方法</h2> + +<p><em>此接口从其父接口 {{domxref("EventTarget")}} 继承方法。</em></p> + +<dl> + <dt>{{domxref("EventSource.close()")}}</dt> + <dd>如果存在，则关闭连接，并且设置 <code>readyState</code> 属性为 <code>CLOSED</code>。如果连接已经被关闭，此方法不会再进行任何操作。</dd> +</dl> + +<h2 id="事件">事件</h2> + +<dl> + <dt>{{domxref("EventSource/error_event", "error")}}</dt> + <dd>Fired when a connection to an event source failed to open.</dd> + <dt>{{domxref("EventSource/message_event", "message")}}</dt> + <dd>Fired when data is received from an event source.</dd> + <dt>{{domxref("EventSource/open_event", "open")}}</dt> + <dd>Fired when a connection to an event source has opened.</dd> +</dl> + +<p>Additionally, the event source itself may send messages with an event field, which will create ad-hoc events keyed to that value.</p> + +<h2 id="示例">示例</h2> + +<p>In this basic example, an <code>EventSource</code> is created to receive unnamed events from the server; a page with the name <code>sse.php</code> is responsible for generating the events.</p> + +<pre class="brush: js">var evtSource = new EventSource('sse.php'); +var eventList = document.querySelector('ul'); + +evtSource.onmessage = function(e) { + var newElement = document.createElement("li"); + + newElement.textContent = "message: " + e.data; + eventList.appendChild(newElement); +}</pre> + +<p>Each received event causes our <code>EventSource</code> object's <code>onmessage</code> event handler to be run. It, in turn, creates a new {{HTMLElement("li")}} element and writes the message's data into it, then appends the new element to the list element already in the document.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find a full example on GitHub — see <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> +</div> + +<p>To listen to named events, you'll require a listener for each type of event sent.</p> + +<pre class="brush: js"> const sse = new EventSource('/api/v1/sse'); + + /* This will listen only for events + * similar to the following: + * + * event: notice + * data: useful data + * id: someid + * + */ + sse.addEventListener("notice", function(e) { + console.log(e.data) + }) + + /* Similarly, this will listen for events + * with the field `event: update` + */ + sse.addEventListener("update", function(e) { + console.log(e.data) + }) + + /* The event "message" is a special case, as it + * will capture events without an event field + * as well as events that have the specific type + * `event: message` It will not trigger on any + * other event type. + */ + sse.addEventListener("message", function(e) { + console.log(e.data) + }) + </pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.EventSource")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Server-sent_events">Server-sent events</a></li> + <li><a href="/zh-CN/Server-sent_events/Using_server-sent_events">使用 Server-sent events</a></li> +</ul> diff --git a/files/zh-cn/web/api/eventsource/onerror/index.html b/files/zh-cn/web/api/eventsource/onerror/index.html new file mode 100644 index 0000000000..dbc9dc3e2c --- /dev/null +++ b/files/zh-cn/web/api/eventsource/onerror/index.html @@ -0,0 +1,123 @@ +--- +title: EventSource.onerror +slug: Web/API/EventSource/onerror +translation_of: Web/API/EventSource/onerror +original_slug: Server-sent_events/EventSource/onerror +--- +<div>{{APIRef('WebSockets API')}}</div> + +<div> </div> + + +<p>{{domxref("EventSource")}} 的属性 <code><strong>onerror</strong></code> 是当发生错误且这个错误事件（{{event("error")}} ）被EventSource触发时调用的一个事件处理函数（{{domxref("EventHandler")}}）</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">eventSource.onerror = function</pre> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">evtSource.onerror = function() { + console.log("EventSource failed."); +};</pre> + +<div class="note"> +<p><strong>Note</strong>: 你可以在Github上查看这个完整例子： <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>EventSource support</td> + <td>6</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5</td> + </tr> + <tr> + <td>Available in shared and dedicated workers<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>EventSource support</td> + <td>4.4</td> + <td>45</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>4.1</td> + </tr> + <tr> + <td>Available in shared and dedicated workers<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("EventSource")}}</li> +</ul> diff --git a/files/zh-cn/web/api/eventsource/onopen/index.html b/files/zh-cn/web/api/eventsource/onopen/index.html new file mode 100644 index 0000000000..9a4668264a --- /dev/null +++ b/files/zh-cn/web/api/eventsource/onopen/index.html @@ -0,0 +1,124 @@ +--- +title: EventSource.onopen +slug: Web/API/EventSource/onopen +tags: + - API + - Event Handler + - EventSource +translation_of: Web/API/EventSource/onopen +original_slug: Server-sent_events/EventSource/onopen +--- +<div>{{APIRef('WebSockets API')}}</div> + +<p>{{domxref("EventSource")}}接口的 <code><strong>onopen</strong></code> 属性是一个 {{domxref("EventHandler")}} ，它在收到{{event("open")}} 事件时被调用，在那时，连接刚被打开。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">eventSource.onopen = function</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">evtSource.onopen = function() { + console.log("Connection to server opened."); +};</pre> + +<div class="note"> +<p><strong>注意</strong> ：你可以在 GitHub 上看到一个完整的示例— 请看 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">使用php的SSE(服务器发送事件)demo。</a></p> +</div> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<ul> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>支持EventSource</td> + <td>6</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5</td> + </tr> + <tr> + <td>在共享和专用的 workers上可用<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>支持EventSource</td> + <td>4.4</td> + <td>45</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>4.1</td> + </tr> + <tr> + <td>在共享和专用的 workers上可用 <sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("53.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 但 <a href="https://github.com/w3c/ServiceWorker/issues/947">目前不能在service workers上使用</a>.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("EventSource")}}</li> +</ul> diff --git a/files/zh-cn/web/api/eventtarget/attachevent/index.html b/files/zh-cn/web/api/eventtarget/attachevent/index.html deleted file mode 100644 index f637813381..0000000000 --- a/files/zh-cn/web/api/eventtarget/attachevent/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 为这个EventTarget附加事件. -slug: Web/API/EventTarget/attachEvent -tags: - - Junk -translation_of: Web/API/EventTarget/addEventListener -translation_of_original: Web/API/EventTarget/attachEvent ---- -<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/zh-cn/web/api/eventtarget/detachevent/index.html b/files/zh-cn/web/api/eventtarget/detachevent/index.html deleted file mode 100644 index 3b4cbcfd90..0000000000 --- a/files/zh-cn/web/api/eventtarget/detachevent/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: EventTarget.detachEvent() -slug: Web/API/EventTarget/detachEvent -tags: - - API - - DOM - - Method - - Non-standard -translation_of: Web/API/EventTarget/removeEventListener -translation_of_original: Web/API/EventTarget/detachEvent ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="简介">简介</h2> - -<p>这是Microsoft Internet Explorer专有的用于替代标准的 {{domxref("EventTarget.removeEventListener()")}} 的方法。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>将要移除事件的DOM节点</dd> - <dt>eventNameWithOn</dt> - <dd>将要移除的事件名，以“on”为前缀（例如它是一个事件处理程序）。 例如，您可以使用“onclick”移除点击事件的事件处理程序。</dd> - <dt>callback</dt> - <dd>注销事件后的回调函数</dd> -</dl> - -<h2 id="详细">详细</h2> - -<p>任何规范没有此部分。</p> - -<p>微软在 <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">MSDN</a> 上有相关描述。</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 至 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特征</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: <code>detachEvent()</code> 在 IE11+ 中不再支持。 {{domxref("EventTarget.removeEventListener()")}} 在 IE9+ 中支持。</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ domxref("EventTarget.attachEvent()") }}</li> - <li>{{ domxref("EventTarget.fireEvent()") }}</li> -</ul> diff --git a/files/zh-cn/web/api/eventtarget/fireevent/index.html b/files/zh-cn/web/api/eventtarget/fireevent/index.html deleted file mode 100644 index edc74b2306..0000000000 --- a/files/zh-cn/web/api/eventtarget/fireevent/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: EventTarget.fireEvent() -slug: Web/API/EventTarget/fireEvent -translation_of: Web/API/EventTarget/dispatchEvent -translation_of_original: Web/API/EventTarget/fireEvent ---- -<p>{{APIRef("DOM Events")}}</p> - -<p>{{ Non-standard_header() }}</p> - -<h2 id="概述">概述</h2> - -<p>这是微软IE浏览器用以替代{{domxref("EventTarget.dispatchEvent()")}}的私有方法，与{{domxref("EventTarget.dispatchEvent()")}}不同的是通过<code>fireEvent()</code> 触发的事件不会触发事件的默认行为，例如，通过fireEvent()触发<input type="checkbox">的点击事件并不会切换checkbox的选中状态</p> - -<p>语法</p> - -<pre class="syntaxbox"><em>cancelled</em> = <em>target</em>.fireEvent(<em>eventNameWithOn</em>, <em>event</em>) -</pre> - -<dl> - <dt>target</dt> - <dd>要触发事件的元素</dd> - <dt>eventNameWithOn</dt> - <dd>要触发事件的名字，前缀为“on”，例如，可以用过"onclick"来触发点击事件</dd> - <dt>event</dt> - <dd>要触发的事件对象</dd> - <dt>cancelled</dt> - <dd>布尔值，事件是否被事件句柄取消</dd> -</dl> - -<h2 id="规范">规范</h2> - -<p>无此部分的规范</p> - -<p>微软的描述： <a href="https://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx">has a description on MSDN</a>.</p> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>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>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6 到 10 [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1]: fireEvent()在IE11+已经不再支持，{{domxref("EventTarget.dispatchEvent()")}}在IE9+已经支持</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li><a href="http://help.dottoro.com/ljvtddtm.php">Dottoro Web Reference article</a></li> -</ul> diff --git a/files/zh-cn/web/api/fetchobserver/index.html b/files/zh-cn/web/api/fetchobserver/index.html deleted file mode 100644 index 9bd7699388..0000000000 --- a/files/zh-cn/web/api/fetchobserver/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -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/web/api/file_and_directory_entries_api/introduction/index.html b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html new file mode 100644 index 0000000000..1dac673d6c --- /dev/null +++ b/files/zh-cn/web/api/file_and_directory_entries_api/introduction/index.html @@ -0,0 +1,211 @@ +--- +title: 文件系统API的基本概念 +slug: Web/API/File_and_Directory_Entries_API/Introduction +translation_of: Web/API/File_and_Directory_Entries_API/Introduction +original_slug: WebGuide/API/File_System/Introduction +--- +<p>本文是对<a href="https://developer.mozilla.org/en-US/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API" title="https://developer.mozilla.org/en-US/docs/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Basic_Concepts_About_the_Filesystem_API</a>一文的译文。</p> + +<p>文件系统API（File System API）模拟网络应用程序可以导航到的本地文件系统。你可以开发应用在一个沙盒的虚拟文件系统中读、写、创建以及索引文件。</p> + +<p>该文件系统API与其他相关的API交互。它基于文件写入API（File Writer API），而后者又基于文件API（File API）。每一个API都具有不同的功能。这些API对于网络应用而言是一个巨大的进化飞跃，使得它们能够缓存和处理大量级的数据。</p> + +<h2 id="关于这篇文档">关于这篇文档</h2> + +<p>这篇介绍讨论了文件系统API中的基本概念和术语。它将给出一个大致的蓝图并引导你理解其中的 <a href="#concepts">关键概念</a>. 它也描述了一些<a href="#restrictions">限制</a>，如果你忽略了它们将额能产生安全错误。关于该API中使用的更多术语，查看<a href="#definitions">定义</a>部分. </p> + +<p>关于文件系统API的引用文献部分，查看<a href="/en/DOM/File_API/File_System_API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">引用</a> 的登陆页及其子页.</p> + +<p>该规范仍然在定义中并可能会变更.</p> + +<h2 id="概要">概要</h2> + +<p>文件系统API包括<a href="/en/DOM/File_API/File_System_API#Asynchronous_APIs" title="en/DOM/File_API/File_System_API#Asynchronous_APIs">异步</a>和<a href="/en/DOM/File_API/File_System_API#Synchronous_APIs" title="en/DOM/File_API/File_System_API#Synchronous_APIs">同步</a>两种接口。异步API可以应用于当你不想操作锁定UI的情况。另一方面，同步API允许简单的程序模型，但它必须和<a href="/En/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers一起使用</a>. </p> + +<h3 id="该API的用途">该API的用途</h3> + +<p>文件系统API的重要性体现在以下方面：</p> + +<ul> + <li>它允许应用拥有涉及二进制大对象（blob）的线下和存储的特性。</li> + <li>它能通过在后台预取资源并本地缓存从而优化应用的表现。</li> + <li>它使你网络应用的用户能够直接编辑本地文件目录中的二进制文件。</li> + <li>它提供了一种你的用户已经熟悉的存储API，正如他们所习惯的文件系统。</li> +</ul> + +<p>关于你用该api能够创建的特性示例，查看 <a href="/#samples" title="#samples">使用示例</a> 部分. </p> + +<h3 id="文件系统API和其他存储API">文件系统API和其他存储API</h3> + +<p>文件系统API是一些其他存储API，例如 <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic_Concepts_Behind_IndexedDB">IndexedDB</a>, WebSQL(已于2010年9月18日起弃用)，以及AppCache等的替代品。该API对于那些处理blob的应用而言是一种更好的选择，因为：</p> + +<ul> + <li>文件系统API提供客户端存储以应对不在数据库中存储的应用场景。如果你需要大型可变的数据块，比数据库而言它就是一种更有效率的存储解决方案。</li> + <li>尽 管Firefox支持IndexedDB的blob存储，但是目前Chrome并非如此（Chrome仍然在对IndexedDB的blob存储做实现支 持开发中）。如果你的应用面向Chrome并且你需要存储blobs, 那么文件系统API和App Cache将是你唯一的选择。然而，AppCache存储并不是本地可变的，并且不支持细粒度的客户端管理。</li> + <li>在Chrome中，你可以使用文件系统API和配额管理API <a class="external" href="http://code.google.com/chrome/whitepapers/storage.html" title="http://code.google.com/chrome/whitepapers/storage.html">Quota Management API</a>, 后者允许你请求更多的存储以及管理你的存储配额。</li> +</ul> + +<h3 id="示例使用场景">示例使用场景</h3> + +<p>下面是关于你可以如何使用文件系统API的几个示例：</p> + +<ul> + <li>有上传器的应用 + <ul> + <li>当你选择一个文件或目录进行上传时，你可以赋值文件到一个本地沙盒并一次上传一个块。</li> + <li>应用可以在一次中断后重新上传，中断可能包括浏览器被关闭或崩溃，连接中断，或电脑被关闭。</li> + </ul> + </li> + <li>视频游戏或其他使用大量媒体资源的应用 + <ul> + <li>应用下载一个或多个大压缩包并在本地将他们解压到一个文件目录中。</li> + <li>应用能在后台预取资源，从而让用户能够进入下一项工作或游戏等级，而不需要等待下载。</li> + </ul> + </li> + <li>音频或照片编辑器使用线下访问或本地缓存（有助于表现和速度） + <ul> + <li>应用可以分段写入文件（例如只覆盖ID3/EXIF标签而不是整个文件）。</li> + </ul> + </li> + <li>线下视频浏览 + <ul> + <li>应用可以下载大文件（>1GB）用于以后浏览。</li> + <li>应用可以访问只下载了部分的文件（因此你可以查看你的DVD的第一章，即使应用仍在下载剩余部分，或者当你需要取赶火车而没有完成下载时）。</li> + </ul> + </li> + <li>线下网络邮件客户端 + <ul> + <li>客户端下载附件并在本地存储它们。</li> + <li>客户端缓存附件用于稍后的上传。</li> + </ul> + </li> +</ul> + +<h2 id="主要概念">主要概念</h2> + +<p>在开始使用文件系统API之前，你需要理解几个概念：</p> + +<ul> + <li><a href="#virtual">文件系统API是一个文件系统的虚拟表现形式</a></li> + <li><a href="#storage">文件系统API可以使用不同的存储类型</a></li> + <li><a href="#quota">浏览器限定存储的配额</a></li> + <li><a href="#versions">文件系统API拥有异步和同步两种版本</a></li> + <li><a href="#errorcallbacks">当使用异步API时，务必使用错误回调</a></li> + <li><a href="#interfaces">文件系统API与其他API交互</a></li> + <li><a href="#case">文件系统API区分大小写</a></li> +</ul> + +<h3 id="文件系统API是一个文件系统的虚拟表现形式">文件系统API是一个文件系统的虚拟表现形式</h3> + +<p>该API不会使你能够访问本地文件系统，该沙盒也并不是文件系统的一部分。相反，它是一个虚拟的文件系统，对于网络应用而言它就像是一个成熟的文件系统。它不需要在浏览器之外与本地文件系统产生任何关系。</p> + +<p>这 就意味着，一个网络应用和一个桌面应用不能在同时共享同一个文件。该API不能使你的网络应用脱离浏览器接触到文件，而桌面应用可以。然而，你可以从一个 网络应用中导出一个文件到桌面应用。例如，你可以使用文件API，创建blob, 重定向一个iframe指向该blob, 并调用下载管理器。</p> + +<h3 id="文件系统API可以使用不同的存储类型">文件系统API可以使用不同的存储类型</h3> + +<p>一个应用可能需要临时或固定的存储。临时存储相对容易获得，因为浏览器已经提供了；但它是受到限制并可能在空间耗尽时被浏览器删除。另一方面，固定存储可以为你提供更大的空间并只能被用户删除，但它需要用户获得你的许可。</p> + +<p>使用临时存储进行缓存，而用固定存储来保存那些你希望你的应用保存的类似用户产生的或独特的数据。</p> + +<h3 id="浏览器限定存储的配额">浏览器限定存储的配额</h3> + +<p>为了防止一个网络应用占用整个磁盘，浏览器可能会给每一个应用限定配额并分配存储。</p> + +<p>存储空间如何分配以及你可以如何管理存储是浏览器的特性，因此你需要查阅浏览器各自的文档。例如，Google Chrome在规范中允许超过5MB的临时存储并支持配额管理API. 了解更多关于Chrome的实现，查看<a class="external" href="http://code.google.com/chrome/whitepapers/storage.html">管理HTML5线下存储</a>.</p> + +<h3 id="文件系统API拥有异步和同步两种版本">文件系统API拥有异步和同步两种版本</h3> + +<p>文件系统API拥有异步和同步两种版本。两种版本的API提供相同的功能和特性。事实上，它们基本相同，除了几个不同点以外。</p> + +<ul> + <li><strong>WebWorkers.</strong> 异步的API可以在文档或<a href="/En/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a> 上下文中使用, 而同步API只能用于WebWorkers. </li> + <li><strong>Callbacks</strong>. 异步API不会将数据作为返回值；作为替代，你需要传递一个回调函数。你在操作中发送请求，并在回调时得到通知。相反，同步API不使用回调函数，因为API方法返回值。</li> + <li><strong>异步和同步API的全局方法</strong>. 异步API拥有这些全局方法：<code>requestFileSystem()</code> 和 <code>resolveLocalFileSystemURL()</code>. 这些方法同时是window对象和worker全局作用域的成员。另一方面，同步API使用如下方法：<code>requestFileSystemSync()</code> 和 <code>resolveLocalFileSystemSyncURL()</code>. 这些同步方法只是worker全局作用域的成员，而非window对象的。</li> +</ul> + +<p>对于一些任务而言同步API可能更简单一些。它直接的，顺序编程的模块可以让代码更易于阅读。其缺点在于它必须与Web Worker交互，而后者有一些限制。</p> + +<h3 id="当使用异步API时，务必使用错误回调">当使用异步API时，务必使用错误回调</h3> + +<p>当使用异步API时，务必总是使用错误回调。虽然对于相关的方法而言错误回调是可选参数，但是明智的做法是把它们当成必选的。至少，通过处理错误得到的错误信息，你可以知道发生了什么。</p> + +<h3 id="文件系统API与其他API交互">文件系统API与其他API交互</h3> + +<p>文件系统API被设计用于在网络平台上与其他API以及元素交互。例如，你可能使用到如下内容之一：</p> + +<ul> + <li>XMLHttpRequest（例如传递file和blob对象的send()方法）</li> + <li>Drag & Drop API</li> + <li>Web Workers (对于同步版的文件系统API)</li> + <li><code>input</code> 元素(用于从该元素编程得到文件列表)</li> +</ul> + +<h3 id="文件系统API区分大小写">文件系统API区分大小写</h3> + +<div>文件系统API区分大小写并保留大小写。</div> + +<p> </p> + +<h2 id="限制">限制</h2> + +<p>出于安全的原因，浏览器对于文件的访问施加了一些限制。如果你忽略它们，将会产生安全错误。</p> + +<ul> + <li><a href="#origin">文件系统API坚持同源策略</a></li> + <li><a href="#execute">文件系统API不允许创建或重命名可执行文件</a></li> + <li><a href="#sandbox">文件系统是沙盒的</a></li> + <li><a href="#file">不能通过file://来运行你的应用</a></li> +</ul> + +<h3 id="文件系统API坚持同源策略">文件系统API坚持同源策略</h3> + +<p>一个源是脚本执行的文档的URL的域，应用层协议和端口。每一个源拥有它自己关联的一组文件系统</p> + +<p>文件系统上作出的安全限定阻止应用访问不同源的数据。这保护了私有数据以防被访问或删除。例如，当一个应用或页面在<a href="http://www.example.com/app/" title="http://www.example.com/app/">http://www.example.com/app/</a>上时，它能访问位于<a href="http://www.example.com/dir/" title="http://www.example.com/dir/">http://www.example.com/dir/</a>上的文件，因为它们拥有相同的源，它不能得到位于<a href="http://www.example.com:8080/dir/" title="http://www.example.com:8080/dir/">http://www.example.com:8080/dir/</a> （不同端口）或<a href="https://www.example.com/dir/" title="https://www.example.com/dir/">https://www.example.com/dir/</a> （不同协议）上的文件。</p> + +<h3 id="文件系统API不允许创建或重命名可执行文件">文件系统API不允许创建或重命名可执行文件</h3> + +<p>为防止恶意的应用运行可执行文件，你不能在文件系统API的沙盒中创建可执行文件。</p> + +<h3 id="文件系统是沙盒的">文件系统是沙盒的</h3> + +<p>因为文件系统是沙盒的，一个网络应用不能访问另一个应用的文件。你也不能读写用户硬盘中任意文件夹中的文件。</p> + +<h3 id="不能通过file来运行你的应用">不能通过file://来运行你的应用</h3> + +<p>你不能在本地通过file://来运行你的应用。如果你那么做了，浏览器将抛出错误，或者你的应用会静默地失败。这一限制也同样针对许多其他的文件API，包括BlobBuilder和FileReader。</p> + +<p>出于测试的目的，你可以在Chrome中通过在启动时添加<code>--allow-file-access-from-files参数来绕开这一限制，这一参数仅用于这个目的。</code></p> + +<h2 id="定义">定义</h2> + +<p>这一部分定义和解释了文件系统API中使用的术语.</p> + +<dl> + <dt><a>blob</a></dt> + <dd>代表二进制大对象。一个blob是存储在单一对象中的一组二进制数据。这是在网络应用中引用二进制数据的通用方法。一个blob可以是一个图片或音频文件。</dd> + <dt><a>Blob</a></dt> + <dd>Blob（以大写B开头的）是一个不可变的数据结构，这意味着一个blob引用的二进制数据不能被直接修改。这使得当Blobs传入到异步API时它们的行为将是可预见的。</dd> + <dt><a>persistent storage</a> | 固定存储</dt> + <dd>固定存储是一种在浏览器中长期存在的的存储，除非用户永久删除它或应用删除它。</dd> + <dt><a>temporary storage | 临时存储</a></dt> + <dd>临时存储是任何网络应用都拥有的。它是自动而不需要请求的，但浏览器可以没有任何警告地删除这些存储。</dd> +</dl> + +<h2 id="其他">其他</h2> + +<p>规范:http://dev.w3.org/2009/dap/file-system/pub/FileSystem/</p> + +<p>引用: <a href="/en/DOM/File_API/File_System_API" title="en/DOM/File_API/File_System_API">File System API Reference</a></p> + +<p>相关文档:</p> + +<ul> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/filesystem/" title="http://www.html5rocks.com/en/tutorials/file/filesystem/">Exploring the FileSystem APIs</a></li> + <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/filesystem-sync/" title="http://www.html5rocks.com/en/tutorials/file/filesystem-sync/">The Synchronous FileSystem API for Workers</a> + <dl><br> + <br> + + </dl> + </li> +</ul> diff --git a/files/zh-cn/web/api/filereader/中止事件(abort)/index.html b/files/zh-cn/web/api/filereader/abort_event/index.html index 8e36dbb3dd..e6a2040602 100644 --- a/files/zh-cn/web/api/filereader/中止事件(abort)/index.html +++ b/files/zh-cn/web/api/filereader/abort_event/index.html @@ -1,6 +1,6 @@ --- title: 'FileReader: 中止事件(abort)' -slug: Web/API/FileReader/中止事件(abort) +slug: Web/API/FileReader/abort_event tags: - API - FileReader @@ -11,6 +11,7 @@ tags: - 中止 - 事件 translation_of: Web/API/FileReader/abort_event +original_slug: Web/API/FileReader/中止事件(abort) --- <div>{{APIRef}}</div> diff --git a/files/zh-cn/web/api/formdata/删除/index.html b/files/zh-cn/web/api/formdata/delete/index.html index 9d38b4e20a..2841460298 100644 --- a/files/zh-cn/web/api/formdata/删除/index.html +++ b/files/zh-cn/web/api/formdata/delete/index.html @@ -1,9 +1,10 @@ --- title: FormData.delete() -slug: Web/API/FormData/删除 +slug: Web/API/FormData/delete tags: - 删除 translation_of: Web/API/FormData/delete +original_slug: Web/API/FormData/删除 --- <p>{{APIRef("XMLHttpRequest")}}</p> diff --git a/files/zh-cn/web/api/fullscreen_api/指南/index.html b/files/zh-cn/web/api/fullscreen_api/guide/index.html index b2d2d36f3a..02ba338c48 100644 --- a/files/zh-cn/web/api/fullscreen_api/指南/index.html +++ b/files/zh-cn/web/api/fullscreen_api/guide/index.html @@ -1,6 +1,6 @@ --- title: 全屏指南 -slug: Web/API/Fullscreen_API/指南 +slug: Web/API/Fullscreen_API/Guide tags: - API - 全屏 @@ -12,6 +12,7 @@ tags: - 显示 - 游戏 translation_of: Web/API/Fullscreen_API/Guide +original_slug: Web/API/Fullscreen_API/指南 --- <div>{{DefaultAPISidebar("Fullscreen API")}}</div> diff --git a/files/zh-cn/web/api/geolocation/using_geolocation/index.html b/files/zh-cn/web/api/geolocation_api/index.html index 54d8665516..1618172faf 100644 --- a/files/zh-cn/web/api/geolocation/using_geolocation/index.html +++ b/files/zh-cn/web/api/geolocation_api/index.html @@ -1,10 +1,11 @@ --- title: 使用地理位置定位 -slug: Web/API/Geolocation/Using_geolocation +slug: Web/API/Geolocation_API tags: - 地理位置 API - 指南 translation_of: Web/API/Geolocation_API +original_slug: Web/API/Geolocation/Using_geolocation --- <p><strong>地理位置 API</strong> 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。</p> diff --git a/files/zh-cn/web/api/geolocationposition/获取该位置时的时间戳/index.html b/files/zh-cn/web/api/geolocationposition/timestamp/index.html index e4c731f868..faa4a6a3da 100644 --- a/files/zh-cn/web/api/geolocationposition/获取该位置时的时间戳/index.html +++ b/files/zh-cn/web/api/geolocationposition/timestamp/index.html @@ -1,7 +1,8 @@ --- title: GeolocationPosition.timestamp -slug: Web/API/GeolocationPosition/获取该位置时的时间戳 +slug: Web/API/GeolocationPosition/timestamp translation_of: Web/API/GeolocationPosition/timestamp +original_slug: Web/API/GeolocationPosition/获取该位置时的时间戳 --- <div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> diff --git a/files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html b/files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html deleted file mode 100644 index 3bbf3d5ce4..0000000000 --- a/files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: GlobalEventHandlers.ontouchmove -slug: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove -translation_of: Web/API/GlobalEventHandlers/ontouchmove -translation_of_original: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</p> - -<div class="note"> -<p><strong>注意：这个属性还没有正式的标准。它在 </strong>{{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 说明书里被规定且不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性没有被广泛应用。</p> -</div> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="eval">var moveHandler = someElement.ontouchmove; -</pre> - -<h3 id="Return_Value" name="Return_Value">Return value</h3> - -<dl> - <dt><code>moveHandler</code></dt> - <dd>The <em>touchmove</em> event handler for element <code>someElement</code>.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>This example shows two ways to use <em>ontouchmove</em> to set an element's <em>touchmove</em> event handler.</p> - -<pre class="brush: js"><html> -<script> -function moveTouch(ev) { - // Process the event -} -function init() { - var el=document.getElementById("target1"); - el.ontouchmove = moveTouch; -} -</script> -<body onload="init();"> -<div id="target1"> Touch me ... </div> -<div id="target2" ontouchmove="moveTouch(event)"> Touch me ... </div> -</body> -</html> -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}</td> - <td>{{Spec2('Touch Events 2')}}</td> - <td>Non-stable version.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </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>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ event("touchmove") }}</li> -</ul> diff --git a/files/zh-cn/web/api/globaleventhandlers/时长改变/index.html b/files/zh-cn/web/api/globaleventhandlers/ondurationchange/index.html index 2c3923fca9..fad4e30ac8 100644 --- a/files/zh-cn/web/api/globaleventhandlers/时长改变/index.html +++ b/files/zh-cn/web/api/globaleventhandlers/ondurationchange/index.html @@ -1,11 +1,12 @@ --- title: GlobalEventHandlers.ondurationchange -slug: Web/API/GlobalEventHandlers/时长改变 +slug: Web/API/GlobalEventHandlers/ondurationchange tags: - API - Audio - Video translation_of: Web/API/GlobalEventHandlers/ondurationchange +original_slug: Web/API/GlobalEventHandlers/时长改变 --- <div>{{ ApiRef("HTML DOM") }}</div> diff --git a/files/zh-cn/web/api/htmlanchorelement/referrer/index.html b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html index b3e30b3fe2..a4ed4b000d 100644 --- a/files/zh-cn/web/api/htmlanchorelement/referrer/index.html +++ b/files/zh-cn/web/api/htmlanchorelement/referrerpolicy/index.html @@ -1,7 +1,8 @@ --- title: HTMLAnchorElement.referrer -slug: Web/API/HTMLAnchorElement/referrer +slug: Web/API/HTMLAnchorElement/referrerPolicy translation_of: Web/API/HTMLAnchorElement/referrerPolicy +original_slug: Web/API/HTMLAnchorElement/referrer --- <div>{{APIRef}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/htmlcanvaselement/捕获流/index.html b/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html index 999485b6f6..a0fdca7df3 100644 --- a/files/zh-cn/web/api/htmlcanvaselement/捕获流/index.html +++ b/files/zh-cn/web/api/htmlcanvaselement/capturestream/index.html @@ -1,7 +1,8 @@ --- title: HTMLCanvasElement.captureStream() -slug: Web/API/HTMLCanvasElement/捕获流 +slug: Web/API/HTMLCanvasElement/captureStream translation_of: Web/API/HTMLCanvasElement/captureStream +original_slug: Web/API/HTMLCanvasElement/捕获流 --- <div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/element/accesskey/index.html b/files/zh-cn/web/api/htmlelement/accesskey/index.html index 4f76e7f784..832396ac33 100644 --- a/files/zh-cn/web/api/element/accesskey/index.html +++ b/files/zh-cn/web/api/htmlelement/accesskey/index.html @@ -1,12 +1,13 @@ --- title: Element.accessKey -slug: Web/API/Element/accessKey +slug: Web/API/HTMLElement/accessKey tags: - API接口 - 属性 - 需要丰富内容 translation_of: Web/API/HTMLElement/accessKey translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey --- <div>{{APIRef("DOM")}}</div> diff --git a/files/zh-cn/web/api/htmlelement/animationend_event/index.html b/files/zh-cn/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..85c1303f28 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,93 @@ +--- +title: animationend +slug: Web/API/HTMLElement/animationend_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS3 Animations + - Event + - Reference + - animationend +translation_of: Web/API/HTMLElement/animationend_event +original_slug: Web/Events/animationend +--- +<p><code>animationend</code> 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;">{{SpecName("CSS3 Animations")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("AnimationEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">事件可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Window")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性表">属性表</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件目标（DOM 顶层目标）。</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>事件是否正常冒泡？</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>可否取消该事件？</td> + </tr> + <tr> + <td><code>animationName</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>与该动画相关的 CSS 属性值。</td> + </tr> + <tr> + <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> + <td><code>Float</code></td> + <td>动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。应等于 {{cssxref("animation-iteration-count")}} 乘以 {{cssxref("animation-duration")}} 的积，动画总活动的时长。</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{Event("animationstart")}}</li> + <li>{{Event("animationiteration")}}</li> + <li>{{Event("animationcancel")}}</li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("GlobalEventHandlers.onanimationstart")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/animationstart_event/index.html b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html new file mode 100644 index 0000000000..3f2092239a --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/animationstart_event/index.html @@ -0,0 +1,90 @@ +--- +title: animationstart +slug: Web/API/HTMLElement/animationstart_event +tags: + - Animation + - AnimationEvent + - CSS Animations + - CSS3 Animations + - Event + - Reference + - animationstart +translation_of: Web/API/HTMLElement/animationstart_event +original_slug: Web/Events/animationstart +--- +<p><code>animationstart</code> 事件会在 CSS 动画开始时触发。 如果有 <code>animation-delay</code> 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 <code>elapsedTime</code> 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规格</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">事件可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性表">属性表</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件来源（DOM 顶层目标）。</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>事件是否正常冒泡？</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>可否取消该事件？</td> + </tr> + <tr> + <td><code>animationName</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>与该动画相关的 CSS 属性值。</td> + </tr> + <tr> + <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> + <td><code>Float</code></td> + <td>动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 <code>animation-delay</code> 是一个负值，这种情况下此值为 (-1 * {{cssxref("animation-delay")}})，并且动画将直接从此值后的序列开始播放。</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{Event("animationstart")}}</li> + <li>{{Event("animationend")}}</li> + <li>{{Event("animationiteration")}}</li> +</ul> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/change_event/index.html b/files/zh-cn/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..d1e5766eeb --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/change_event/index.html @@ -0,0 +1,125 @@ +--- +title: change +slug: Web/API/HTMLElement/change_event +tags: + - Change + - HTML + - HTML DOM + - HTMLElement + - change vs. input + - 事件 + - 参考 +translation_of: Web/API/HTMLElement/change_event +original_slug: Web/Events/change +--- +<p>{{APIRef}}</p> + +<p>当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时，<code>change</code> 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样，<code>change</code> 事件并不是每次元素的 <code>value</code> 改变时都会触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">可取消</th> + <td>否</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理程序属性</th> + <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td> + </tr> + </tbody> +</table> + +<p>基于表单元素的类型和用户对标签的操作的不同，<code>change</code> 事件触发的时机也不同：</p> + +<ul> + <li>当元素是 <code>:checked</code> 状态时（通过点击或者使用键盘），见于 <code>{{HTMLElement('input/radio', '<input type="radio">')}}</code> 和 <code>{{HTMLElement('input/checkbox', '<input type="checkbox">')}}</code>；</li> + <li>当用户显式提交改变时（例如：点击了 {{HTMLElement("select")}}中的一个选项，从 <code>{{HTMLElement('input/date', '<input type="date">')}}</code> 标签选择了一个日期，通过 <code>{{HTMLElement('input/file', '<input type="file">')}}</code> 标签上传了一个文件等）；</li> + <li>当标签的值被修改并且失去焦点后，但未提交时（例如：对{{HTMLElement("textarea")}} 或者 <code>{{HTMLElement('input/text', '<input type="text">')}}</code>的值进行编辑后）。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="<select>_元素"><select> 元素</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="notranslate"><label>Choose an ice cream flavor: + <select class="ice-cream" name="ice-cream"> + <option value="">Select One …</option> + <option value="chocolate">Chocolate</option> + <option value="sardine">Sardine</option> + <option value="vanilla">Vanilla</option> + </select> +</label> + +<div class="result"></div></pre> + +<pre class="notranslate">body { + display: grid; + grid-template-areas: "select result"; +} + +select { + grid-area: select; +} + +.result { + grid-area: result; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="notranslate">const selectElement = document.querySelector('.ice-cream'); + +selectElement.addEventListener('change', (event) => { + const result = document.querySelector('.result'); + result.textContent = `You like ${event.target.value}`; +}); +</pre> + +<h4 id="结果">结果</h4> + + + +<h3 id="文本输入元素">文本输入元素</h3> + +<p>对于一些元素，包括 <code><input type="text"></code>，<code>change</code> 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="notranslate"><input placeholder="Enter some text" name="name"/> +<p id="log"></p></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="notranslate">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.addEventListener('change', updateValue); + +function updateValue(e) { + log.textContent = e.target.value; +}</pre> + +<h4 id="结果_2">结果</h4> + + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p> + +<p>对于一些特定类型的交互是否要触发 <code>change</code> 事件，不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 <code>change</code> 事件，直到用户按下 Enter 键或将焦点从 <code><select></code> 上移走（参见 {{bug("126379")}}）。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。</p> + +<h2 id="参见">参见</h2> + +<p>{{domxref("NetworkInformation.connection")}} fires the <code>change</code> event when the connection information changes.</p> diff --git a/files/zh-cn/web/api/node/innertext/index.html b/files/zh-cn/web/api/htmlelement/innertext/index.html index 3062dda65f..723d09779e 100644 --- a/files/zh-cn/web/api/node/innertext/index.html +++ b/files/zh-cn/web/api/htmlelement/innertext/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.innerText -slug: Web/API/Node/innerText +slug: Web/API/HTMLElement/innerText tags: - API - DOM @@ -10,6 +10,7 @@ tags: - 参考 - 属性 translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/innerText --- <div>{{APIRef("DOM")}}</div> diff --git a/files/zh-cn/web/api/htmlelement/input_event/index.html b/files/zh-cn/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..12164b4ed4 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/input_event/index.html @@ -0,0 +1,158 @@ +--- +title: input +slug: Web/API/HTMLElement/input_event +tags: + - HTML DOM + - HTMLElement + - Input + - 事件 + - 参考 + - 表单 + - 输入 +translation_of: Web/API/HTMLElement/input_event +original_slug: Web/Events/input +--- +<p>{{APIRef}}</p> + +<p>当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 被修改时，会触发 <strong><code>input</code></strong> 事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{DOMxRef("InputEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.oninput")}}</td> + </tr> + </tbody> +</table> + +<p><strong><code>input</code></strong> 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在<code>contenteditable</code> 和 <code>designMode</code> 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。</p> + +<p>对于 <code>type=checkbox</code> 或 <code>type=radio</code> 的 <code>input</code> 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5规范</a>），<code>input</code> 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong> 每当元素的 <code>value</code> 改变，<code>input</code> 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。</p> +</div> + +<h2 id="示例">示例</h2> + +<p>每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><code><input placeholder="Enter some text" name="name"/> +<p id="values"></p></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js"><code>const input = document.querySelector('input'); +const log = document.getElementById('values'); + +input.addEventListener('input', updateValue); + +function updateValue(e) { + log.textContent = e.srcElement.value; +}</code> +</pre> + +<h3 id="结果">结果</h3> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.HTMLElement.input_event")}}</p> + +<div id="compat-desktop"></div> + +<p>[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。</p> + +<p>[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).</p> + +<p>[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。</p> + +<p>[4] 事件 target 是光标所在的最内侧的元素。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> + <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li> + <li>{{domxref("HTMLElement/change_event", "change")}}</li> + <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li> +</ul> + +<p>此外，还有一个类似的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change">change</a></code> 事件。change 触发的频率低于 <code>input</code> - 它只会在用户提交更改时触发。</p> + +<p> + <audio style="display: none;"></audio> +</p> diff --git a/files/zh-cn/web/api/htmlelement/transitionend_event/index.html b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..a89b39de86 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,133 @@ +--- +title: transitionend +slug: Web/API/HTMLElement/transitionend_event +translation_of: Web/API/HTMLElement/transitionend_event +original_slug: Web/Events/transitionend +--- +<div>{{APIRef}}</div> + +<p><code>transitionend</code> 事件会在 <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> 结束后触发. 当transition完成前移除transition时，比如移除css的{{cssxref("transition-property")}} 属性，事件将不会被触发.如在transition完成前设置 {{cssxref("display")}} 为"<code>none"</code>，事件同样不会被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>是</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td> + </tr> + </tbody> +</table> + +<p><code>transitionend</code> 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明， 则不发生过渡，并且任何过渡事件都不会触发。如果触发了 <code>transitioncancel</code> 事件，则<code>transitionend</code> 事件不会触发。</p> + +<h2 id="例">例</h2> + +<pre class="brush: js">/* + * 在指定的元素上监听transitionend事件, 例如#slidingMenu + * 然后指定一个函数, 例如 showMessage() + */ +function showMessage() { + console.log('Transition 已完成'); +} + +var element = document.getElementById("slidingMenu"); +element.addEventListener("transitionend", showMessage, false); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup><br> + 36</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.5<sup>[2]</sup><br> + 12<br> + 12.10<br> + 23</td> + <td>3.2<sup>[1]</sup><br> + 7.0.6</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10<sup>[2]</sup><br> + 12<br> + 12.10</td> + <td>3.2<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 <code>webkitTransitionEnd</code>. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 <code>transitionend</code>.</p> + +<p>[2] 在 Opera 10.5 上实现<code>oTransitionEnd</code>，从版本12开始实现 <code>otransitionend，</code> 从版本12.10开始实现 <code>transitionend.</code></p> + +<h2 id="参考">参考</h2> + +<ul> + <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li> + <li>{{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/urlutils/hash/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/hash/index.html index 5d8cc21f43..afb17d505e 100644 --- a/files/zh-cn/web/api/urlutils/hash/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/hash/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.hash -slug: Web/API/URLUtils/hash +slug: Web/API/HTMLHyperlinkElementUtils/hash tags: - HTMLHyperlinkElementUtils.hash translation_of: Web/API/HTMLHyperlinkElementUtils/hash +original_slug: Web/API/URLUtils/hash --- <p>{{ APIRef("URLUtils") }}</p> diff --git a/files/zh-cn/web/api/urlutils/href/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/href/index.html index cff669766d..dd9cbd64f3 100644 --- a/files/zh-cn/web/api/urlutils/href/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/href/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.href -slug: Web/API/URLUtils/href +slug: Web/API/HTMLHyperlinkElementUtils/href tags: - HTMLHyperlinkElementUtils.href translation_of: Web/API/HTMLHyperlinkElementUtils/href +original_slug: Web/API/URLUtils/href --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/urlutils/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/index.html index e8d6c719d9..d6d93674e3 100644 --- a/files/zh-cn/web/api/urlutils/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/index.html @@ -1,7 +1,8 @@ --- title: URLUtils -slug: Web/API/URLUtils +slug: Web/API/HTMLHyperlinkElementUtils translation_of: Web/API/HTMLHyperlinkElementUtils +original_slug: Web/API/URLUtils --- <p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p> diff --git a/files/zh-cn/web/api/urlutils/origin/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/origin/index.html index d0f8d926ec..6b1eb90cda 100644 --- a/files/zh-cn/web/api/urlutils/origin/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/origin/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.origin -slug: Web/API/URLUtils/origin +slug: Web/API/HTMLHyperlinkElementUtils/origin tags: - HTMLHyperlinkElementUtils.origin translation_of: Web/API/HTMLHyperlinkElementUtils/origin +original_slug: Web/API/URLUtils/origin --- <p>{{APIRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/urlutils/password/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/password/index.html index 99e9944875..0358323ce9 100644 --- a/files/zh-cn/web/api/urlutils/password/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/password/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.password -slug: Web/API/URLUtils/password +slug: Web/API/HTMLHyperlinkElementUtils/password tags: - HTMLHyperlinkElementUtils.password translation_of: Web/API/HTMLHyperlinkElementUtils/password +original_slug: Web/API/URLUtils/password --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/urlutils/pathname/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/pathname/index.html index 203da5393a..95ceda3636 100644 --- a/files/zh-cn/web/api/urlutils/pathname/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/pathname/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.pathname -slug: Web/API/URLUtils/pathname +slug: Web/API/HTMLHyperlinkElementUtils/pathname tags: - HTMLHyperlinkElementUtils.pathname translation_of: Web/API/HTMLHyperlinkElementUtils/pathname +original_slug: Web/API/URLUtils/pathname --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/urlutils/search/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/search/index.html index 4c9c8ae554..1fc142cc1f 100644 --- a/files/zh-cn/web/api/urlutils/search/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/search/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.search -slug: Web/API/URLUtils/search +slug: Web/API/HTMLHyperlinkElementUtils/search tags: - HTMLHyperlinkElementUtils.search translation_of: Web/API/HTMLHyperlinkElementUtils/search +original_slug: Web/API/URLUtils/search --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/urlutils/tostring/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/tostring/index.html index 172ffda98b..1bffe5100b 100644 --- a/files/zh-cn/web/api/urlutils/tostring/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/tostring/index.html @@ -1,10 +1,11 @@ --- title: HTMLHyperlinkElementUtils.toString() -slug: Web/API/URLUtils/toString +slug: Web/API/HTMLHyperlinkElementUtils/toString tags: - HTMLHyperlinkElementUtils.toString() - URL API translation_of: Web/API/HTMLHyperlinkElementUtils/toString +original_slug: Web/API/URLUtils/toString --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/urlutils/username/index.html b/files/zh-cn/web/api/htmlhyperlinkelementutils/username/index.html index 2e7a101f9f..f7a9df9f66 100644 --- a/files/zh-cn/web/api/urlutils/username/index.html +++ b/files/zh-cn/web/api/htmlhyperlinkelementutils/username/index.html @@ -1,9 +1,10 @@ --- title: HTMLHyperlinkElementUtils.username -slug: Web/API/URLUtils/username +slug: Web/API/HTMLHyperlinkElementUtils/username tags: - HTMLHyperlinkElementUtils.username translation_of: Web/API/HTMLHyperlinkElementUtils/username +original_slug: Web/API/URLUtils/username --- <p>{{ApiRef("URL API")}}</p> diff --git a/files/zh-cn/web/api/htmlinputelement/mozsetfilenamearray/index.html b/files/zh-cn/web/api/htmlinputelement/mozsetfilenamearray/index.html deleted file mode 100644 index 0cccf89889..0000000000 --- a/files/zh-cn/web/api/htmlinputelement/mozsetfilenamearray/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: HTMLInputElement.mozSetFileNameArray -slug: Web/API/HTMLInputElement/mozSetFileNameArray -translation_of: Web/API/HTMLInputElement -translation_of_original: Web/API/HTMLInputElement/mozSetFileNameArray ---- -<div> -<div> -<div> -<div>{{APIRef("HTML DOM")}}</div> -</div> -</div> -{{gecko_minversion_header("1.9.2")}}</div> - -<h3 id="Summary" name="Summary">概述</h3> - -<p>设置一个HTML <code>input</code>元素中选中的若干文件的路径以及文件名.</p> - -<div class="note"><strong>注:</strong> 该方法是Gecko私有的方法,在其他浏览器中不可用,且是个特权方法,不能在普通网页中使用.</div> - -<h3 id="Syntax" name="Syntax">语法</h3> - -<pre class="eval">inputElement.mozSetFileNameArray(<em>aFileNames, </em><em>aLength</em>); -</pre> - -<h3 id="Parameters" name="Parameters">参数</h3> - -<ul> - <li><code>aFileNames</code> 指定给该元素的若干个文件的文件名路径以及文件名.</li> - <li><code>aLength </code>需要指定文件的个数(<code>通常是</code>数组<code>aFileNames</code>的长度).</li> -</ul> - -<h3 id="Example" name="Example">示例</h3> - -<pre class="brush: js">var fileArray = {"/foo/bar.txt", "/foo/foosball.txt"}; - -inputElement.mozSetFileNameArray(fileArray, fileArray.length); -</pre> - -<h3 id="Specification" name="Specification">规范</h3> - -<p>非标准,Mozilla私有方法.</p> - -<h3 id="相关链接">相关链接</h3> - -<ul> - <li><a href="/zh-CN/DOM/Input" title="zh-CN/DOM/Input"><code>Input</code></a></li> - <li><a href="/zh-CN/DOM/Input.mozGetFileNameArray" title="zh-CN/DOM/Input.mozGetFileNameArray"><code>Input.mozGetFileNameArray</code></a></li> -</ul> diff --git a/files/zh-cn/web/api/htmlelement/blur/index.html b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html index 96452abcc0..a8a3f46e58 100644 --- a/files/zh-cn/web/api/htmlelement/blur/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.blur() -slug: Web/API/HTMLElement/blur +slug: Web/API/HTMLOrForeignElement/blur tags: - API - HTML DOM @@ -8,6 +8,7 @@ tags: - Method - Reference translation_of: Web/API/HTMLOrForeignElement/blur +original_slug: Web/API/HTMLElement/blur --- <p>{{ APIRef() }}</p> <h3 id="Summary" name="Summary">概述</h3> diff --git a/files/zh-cn/web/api/htmlelement/dataset/index.html b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html index 63ab5f48e8..bb7e0977e7 100644 --- a/files/zh-cn/web/api/htmlelement/dataset/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html @@ -1,9 +1,10 @@ --- title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset +slug: Web/API/HTMLOrForeignElement/dataset tags: - HTMLElement.dataset translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLElement/dataset --- <p>{{ APIRef }}</p> diff --git a/files/zh-cn/web/api/htmlelement/focus/index.html b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html index eb47aff613..cc8e3f72d9 100644 --- a/files/zh-cn/web/api/htmlelement/focus/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html @@ -1,12 +1,13 @@ --- title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus +slug: Web/API/HTMLOrForeignElement/focus tags: - API - 参考 - 方法 - 焦点 translation_of: Web/API/HTMLOrForeignElement/focus +original_slug: Web/API/HTMLElement/focus --- <div>{{ APIRef("HTML DOM") }}</div> diff --git a/files/zh-cn/web/api/htmlelement/nonce/index.html b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html index b2c6c829b1..07e113a5bb 100644 --- a/files/zh-cn/web/api/htmlelement/nonce/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html @@ -1,6 +1,6 @@ --- title: HTMLElement.nonce -slug: Web/API/HTMLElement/nonce +slug: Web/API/HTMLOrForeignElement/nonce tags: - API - nonce @@ -8,6 +8,7 @@ tags: - 实验性 - 属性 translation_of: Web/API/HTMLOrForeignElement/nonce +original_slug: Web/API/HTMLElement/nonce --- <p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/htmlelement/tabindex/index.html b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html index 516c659c2a..1e842c0ff4 100644 --- a/files/zh-cn/web/api/htmlelement/tabindex/index.html +++ b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html @@ -1,7 +1,8 @@ --- title: HTMLElement.tabIndex -slug: Web/API/HTMLElement/tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex translation_of: Web/API/HTMLOrForeignElement/tabIndex +original_slug: Web/API/HTMLElement/tabIndex --- <div> <div>{{ APIRef("HTML DOM") }}</div> diff --git a/files/zh-cn/web/api/指数/index.html b/files/zh-cn/web/api/index/index.html index 9993a0a959..e910b907d2 100644 --- a/files/zh-cn/web/api/指数/index.html +++ b/files/zh-cn/web/api/index/index.html @@ -1,6 +1,7 @@ --- title: 指数 -slug: Web/API/指数 +slug: Web/API/Index translation_of: Web/API/Index +original_slug: Web/API/指数 --- <p>{{Index("/zh-CN/docs/Web/API")}}</p> diff --git a/files/zh-cn/web/api/intersection_observer_api/点观察者api的时序元素可见性/index.html b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html index 24446a0141..37c36f7c23 100644 --- a/files/zh-cn/web/api/intersection_observer_api/点观察者api的时序元素可见性/index.html +++ b/files/zh-cn/web/api/intersection_observer_api/timing_element_visibility/index.html @@ -1,7 +1,8 @@ --- title: Timing element visibility with the Intersection Observer API -slug: Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 +slug: Web/API/Intersection_Observer_API/Timing_element_visibility translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility +original_slug: Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 --- <div>{{APIRef("Intersection Observer API")}}</div> diff --git a/files/zh-cn/web/api/mediastream.addtrack/index.html b/files/zh-cn/web/api/mediastream/addtrack/index.html index ffb8052af5..e99a0a017e 100644 --- a/files/zh-cn/web/api/mediastream.addtrack/index.html +++ b/files/zh-cn/web/api/mediastream/addtrack/index.html @@ -1,7 +1,8 @@ --- title: MediaStream.addTrack() -slug: Web/API/MediaStream.addTrack +slug: Web/API/MediaStream/addTrack translation_of: Web/API/MediaStream/addTrack +original_slug: Web/API/MediaStream.addTrack --- <p>{{APIRef("Media Capture and Streams")}}</p> diff --git a/files/zh-cn/web/api/msselection/index.html b/files/zh-cn/web/api/msselection/index.html deleted file mode 100644 index 5760848324..0000000000 --- a/files/zh-cn/web/api/msselection/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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/web/api/namelist/index.html b/files/zh-cn/web/api/namelist/index.html deleted file mode 100644 index 8506bc5266..0000000000 --- a/files/zh-cn/web/api/namelist/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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/web/api/navigatorgeolocation/index.html b/files/zh-cn/web/api/navigatorgeolocation/index.html deleted file mode 100644 index f5432039ba..0000000000 --- a/files/zh-cn/web/api/navigatorgeolocation/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation ---- -<p>{{APIRef("Geolocation API")}}</p> - -<p><code><strong>NavigatorGeolocation</strong></code> contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p> - -<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</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>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation. </a></li> -</ul> - -<p> </p> diff --git a/files/zh-cn/web/api/navigatorplugins/测试滕盖/index.html b/files/zh-cn/web/api/navigatorplugins/测试滕盖/index.html deleted file mode 100644 index 3f9c09d768..0000000000 --- a/files/zh-cn/web/api/navigatorplugins/测试滕盖/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -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/web/api/node/baseuriobject/index.html b/files/zh-cn/web/api/node/baseuriobject/index.html deleted file mode 100644 index ad04356656..0000000000 --- a/files/zh-cn/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Node.baseURIObject -slug: Web/API/Node/baseURIObject -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject ---- -<div> - {{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p><code>baseURIObject</code>属性返回一个代表当前节点(通常是文档节点或元素节点)的基URL的{{Interface("nsIURI")}}对象.该属性类似与{{domxref("Node.baseURI")}},只是它返回的是一个包含更多信息的nsIURI对象,而不只是一个URL字符串.</p> -<p>该属性在所有类型的节点上都可用(HTML,XUL,SVG,MathML等),但脚本本身必须要有 UniversalXPConnect权限(XUL默认有这个权限,HTML没有).</p> -<p>查看{{domxref("Node.baseURI")}}了解基URL(base URL)是什么.</p> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject -</pre> -<h2 id="Notes" name="Notes">附注</h2> -<p>该属性只读,尝试为它赋值会抛出异常. 此外,这个属性只能从特权代码中访问.</p> -<h2 id="Specification" name="Specification">规范</h2> -<p>不属于任何规范,mozilla私有属性.</p> diff --git a/files/zh-cn/web/api/node/nodeprincipal/index.html b/files/zh-cn/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 58844aef2e..0000000000 --- a/files/zh-cn/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -<div> - {{APIRef}}{{Fx_minversion_header(3)}}{{Non-standard_header}} - <p>The <code><strong>Node.nodePrincipal</strong></code> read-only property returns the {{Interface("nsIPrincipal")}} object representing current security context of the node.</p> - <p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> - <h2 id="Syntax" name="Syntax">Syntax</h2> - <pre class="syntaxbox"><i>principalObj</i> = element.nodePrincipal -</pre> - <h2 id="Notes" name="Notes">Notes</h2> - <p>This property is read-only; attempting to write to it will throw an exception. In addition, this property may only be accessed from privileged code.</p> - <h2 id="Specification" name="Specification">Specification</h2> - <p>Not in any specification.</p> -</div> -<p> </p> diff --git a/files/zh-cn/web/api/node/outertext/index.html b/files/zh-cn/web/api/node/outertext/index.html deleted file mode 100644 index 01de770af7..0000000000 --- a/files/zh-cn/web/api/node/outertext/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Node.outerText -slug: Web/API/Node/outerText -tags: - - Node.outerText -translation_of: Web/API/HTMLElement/outerText -translation_of_original: Web/API/Node/outerText ---- -<p>请参阅 {{domxref("HTMLElement.outerText")}}</p> diff --git a/files/zh-cn/web/api/node/rootnode/index.html b/files/zh-cn/web/api/node/rootnode/index.html deleted file mode 100644 index 6291ef7fd6..0000000000 --- a/files/zh-cn/web/api/node/rootnode/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Node.rootNode -slug: Web/API/Node/rootNode -tags: - - API - - DOM - - Node - - Property - - Reference - - rootNode -translation_of: Web/API/Node/getRootNode -translation_of_original: Web/API/Node/rootNode ---- -<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> - -<p><code><strong>Node.rootNode</strong></code> 是 {{domxref("Node")}} 的一个只读属性, 返回该节点所在 DOM 数的根节点(最高节点). 此属性是通过 {{domxref("Node.parentNode")}} 属性循环查找直到找到根节点.</p> - -<div class="warning"> -<p><strong>注意</strong>: 由于某种原因, 此属性已经被 {{domxref("Node.getRootNode()")}} 方法替代.</p> -</div> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre><var>rootNode</var> = <em>node</em>.rootNode; -</pre> - -<h3 id="返回值"> 返回值</h3> - -<p>返回 {{domxref("Node")}} 对象.</p> - -<h2 id="Example" name="Example">样例</h2> - -<p>下面是输出<code>body</code>的根节点样例:</p> - -<pre class="brush: js">console.log(document.body.rootNode);</pre> - -<h2 id="Notes" name="Notes">参考</h2> - -<p></p><p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 - <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, - 而不是使用者所预期得到的节点.</p> - - <p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> - 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p><p></p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 此属性已经废弃, 使用{{domxref("Node.getRootNode()")}} 方法替代.</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">样式</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初始定义</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/web/api/notification/sound/index.html b/files/zh-cn/web/api/notification/sound/index.html deleted file mode 100644 index ffe90b4955..0000000000 --- a/files/zh-cn/web/api/notification/sound/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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/web/api/notification/using_web_notifications/index.html b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html index 40bbb3848b..36f12c0ed4 100644 --- a/files/zh-cn/web/api/notification/using_web_notifications/index.html +++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.html @@ -1,12 +1,13 @@ --- title: 使用 Web Notifications -slug: Web/API/notification/Using_Web_Notifications +slug: Web/API/Notifications_API/Using_the_Notifications_API tags: - Firefox OS - Notifications - Using the Notifications API - 通知 translation_of: Web/API/Notifications_API/Using_the_Notifications_API +original_slug: Web/API/notification/Using_Web_Notifications --- <p>{{APIRef("Web Notifications")}}</p> diff --git a/files/zh-cn/web/api/offlineaudiocontext/complete/index.html b/files/zh-cn/web/api/offlineaudiocontext/complete_event/index.html index 74bdb5f3ff..139b6d9030 100644 --- a/files/zh-cn/web/api/offlineaudiocontext/complete/index.html +++ b/files/zh-cn/web/api/offlineaudiocontext/complete_event/index.html @@ -1,7 +1,8 @@ --- title: 'OfflineAudioContext: complete event' -slug: Web/API/OfflineAudioContext/complete +slug: Web/API/OfflineAudioContext/complete_event translation_of: Web/API/OfflineAudioContext/complete_event +original_slug: Web/API/OfflineAudioContext/complete --- <p><font><font>{{DefaultAPISidebar("Web Audio API")}}</font></font></p> diff --git a/files/zh-cn/web/api/支付_请求_接口/concepts/index.html b/files/zh-cn/web/api/payment_request_api/concepts/index.html index a6772dc5be..30e58235f5 100644 --- a/files/zh-cn/web/api/支付_请求_接口/concepts/index.html +++ b/files/zh-cn/web/api/payment_request_api/concepts/index.html @@ -1,6 +1,6 @@ --- title: 交易过程的基本概念 -slug: Web/API/支付_请求_接口/Concepts +slug: Web/API/Payment_Request_API/Concepts tags: - API - Apple Pay @@ -15,6 +15,7 @@ tags: - 收款方 - 贸易 translation_of: Web/API/Payment_Request_API/Concepts +original_slug: Web/API/支付_请求_接口/Concepts --- <p>{{securecontext_header}}{{DefaultAPISidebar("Payment Request API")}}{{draft}}</p> diff --git a/files/zh-cn/web/api/支付_请求_接口/index.html b/files/zh-cn/web/api/payment_request_api/index.html index 0df4261062..1d3db1feaa 100644 --- a/files/zh-cn/web/api/支付_请求_接口/index.html +++ b/files/zh-cn/web/api/payment_request_api/index.html @@ -1,6 +1,6 @@ --- title: 支付请求接口 -slug: Web/API/支付_请求_接口 +slug: Web/API/Payment_Request_API tags: - 中间状态 - 信用卡 @@ -13,6 +13,7 @@ tags: - 概述 - 贸易 translation_of: Web/API/Payment_Request_API +original_slug: Web/API/支付_请求_接口 --- <div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div> diff --git a/files/zh-cn/web/api/performance/内存/index.html b/files/zh-cn/web/api/performance/memory/index.html index e9f5047d4e..074295f951 100644 --- a/files/zh-cn/web/api/performance/内存/index.html +++ b/files/zh-cn/web/api/performance/memory/index.html @@ -1,7 +1,8 @@ --- title: Performance.memory -slug: Web/API/Performance/内存 +slug: Web/API/Performance/memory translation_of: Web/API/Performance/memory +original_slug: Web/API/Performance/内存 --- <p>{{APIRef}}</p> diff --git a/files/zh-cn/web/api/pointer_lock_api/index.html b/files/zh-cn/web/api/pointer_lock_api/index.html new file mode 100644 index 0000000000..fac9eb5122 --- /dev/null +++ b/files/zh-cn/web/api/pointer_lock_api/index.html @@ -0,0 +1,268 @@ +--- +title: Pointer Lock API +slug: Web/API/Pointer_Lock_API +translation_of: Web/API/Pointer_Lock_API +original_slug: API/Pointer_Lock_API +--- +<p>{{ SeeCompatTable() }}</p> + +<p><strong>指针锁定</strong>(以前叫做鼠标锁定) 提供了一种输入方法，这种方法是基于鼠标随着时间推移的运动的（也就是，deltas），而不仅是鼠标光标的绝对位置。通过它可以访问原始的鼠标运动，把鼠标事件的目标锁定到一个单独的元素，这就消除了鼠标在一个单独的方向上到底可以移动多远这方面的限制，并从视图中删去光标。</p> + +<p>这个 API 对于需要大量的鼠标输入来控制运动，旋转物体，以及更改项目的应用程序来说非常有用。对高度视觉化的应用程序尤其重要，例如那些使用第一人称视角的应用程序，以及 3D 视图和建模。</p> + +<p>举例来说，你可以创建让你的用户简单地通过移动鼠标而不需要点击任何按钮就可以控制视角的应用。那么这些按钮就可以被用作其他动作。这类鼠标输入对于查看地图，卫星图像，或者第一人称场景（例如在一个游戏中或者一个全景视频中）是非常方便使用的。</p> + +<p>即使在光标移到浏览器或者屏幕区域之外，指针锁定也能够让你访问鼠标事件。例如，你的用户可以通过不断地移动鼠标来持续旋转或操纵一个 3D 模型。如果没有指针锁定的话，这些旋转或操纵会在指针到达浏览器或者屏幕边缘的那一刻停止。尤其是游戏玩家将会因为此功能而兴奋不已，因为他们可以疯狂地点击按钮，来回地滑动鼠标光标，而不必担心离开了游戏区域，进而不小心误点到另外一个应用程序上，结果将鼠标焦点移离了游戏。杯具了！</p> + +<h2 id="basics" name="basics">基本概念</h2> + +<p>指针锁定和<a href="/en/DOM/element.setCapture" title="element.setCapture">鼠标捕获</a>有关。鼠标捕获在一个鼠标被拖曳时可以向一个目标元素持续传递有关事件，但是当鼠标按钮被放开时就会停止。指针锁定和鼠标捕获在以下方面有所不同：</p> + +<ul> + <li>它是持久性的。指针锁定不释放鼠标，直到作出一个显式的 API 调用或是用户使用一个专门的释放手势。</li> + <li>它不局限于浏览器或者屏幕边界。</li> + <li>它持续发送事件，而不管鼠标按钮状态如何。</li> + <li>它隐藏光标。</li> +</ul> + +<h2 id="example" name="example">示例</h2> + +<p>下面是一个如何在你的网页中设置指针锁定的示例。</p> + +<pre class="brush: js notranslate"><button onclick="lockPointer();">锁住它!</button> +<div id="pointer-lock-element"></div> +<script> +// 注意: 截止本文撰写时, 仅有 Mozilla 和 WebKit 支持指针锁定。 + +// 我们将要使之全屏并指针锁定的元素。 +var elem; + +document.addEventListener("mousemove", function(e) { + var movementX = e.movementX || + e.mozMovementX || + e.webkitMovementX || + 0, + movementY = e.movementY || + e.mozMovementY || + e.webkitMovementY || + 0; + + // 打印鼠标移动的增量值。 + console.log("movementX=" + movementX, "movementY=" + movementY); +}, false); + +function fullscreenChange() { + if (document.webkitFullscreenElement === elem || + document.mozFullscreenElement === elem || + document.mozFullScreenElement === elem) { // 较旧的 API 大写 'S'. + // 元素进入全屏模式了，现在我们可以请求指针锁定。 + elem.requestPointerLock = elem.requestPointerLock || + elem.mozRequestPointerLock || + elem.webkitRequestPointerLock; + elem.requestPointerLock(); + } +} + +document.addEventListener('fullscreenchange', fullscreenChange, false); +document.addEventListener('mozfullscreenchange', fullscreenChange, false); +document.addEventListener('webkitfullscreenchange', fullscreenChange, false); + +function pointerLockChange() { + if (document.mozPointerLockElement === elem || + document.webkitPointerLockElement === elem) { + console.log("指针锁定成功了。"); + } else { + console.log("指针锁定已丢失。"); + } +} + +document.addEventListener('pointerlockchange', pointerLockChange, false); +document.addEventListener('mozpointerlockchange', pointerLockChange, false); +document.addEventListener('webkitpointerlockchange', pointerLockChange, false); + +function pointerLockError() { + console.log("锁定指针时出错。"); +} + +document.addEventListener('pointerlockerror', pointerLockError, false); +document.addEventListener('mozpointerlockerror', pointerLockError, false); +document.addEventListener('webkitpointerlockerror', pointerLockError, false); + +function lockPointer() { + elem = document.getElementById("pointer-lock-element"); + // 开始于使元素进入全屏模式。目前的实现 + // 要求元素在请求指针锁定前要处于全屏模式下 + // -- 这在以后可能会发生改变。 + elem.requestFullscreen = elem.requestFullscreen || + elem.mozRequestFullscreen || + elem.mozRequestFullScreen || // 较旧的 API 把 ‘S’ 大写 + elem.webkitRequestFullscreen; + elem.requestFullscreen(); +} +</script> +</pre> + +<h2 id="method_overview" name="method_overview">方法/属性 概述</h2> + +<p>Pointer lock API, 和 Fullscreen API 类似，通过添加新方法来扩展 DOM 元素, <code>requestPointerLock</code>, 目前还是厂商前缀。按下面这样来写：</p> + +<pre class="brush: js notranslate"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">element.webkitRequestPointerLock(); // Chrome</span></span> + +element.mozRequestPointerLock(); // Firefox +</pre> + +<p>目前 <code>requestPointerLock</code> 的实现还是和 <code>requestFullScreen</code> 以及 Fullscreen API 紧紧地绑在一起的。一个元素在能够被指针锁定之前，必须首先进入全屏模式。就像上面演示的那样，锁定指针的过程是异步的，使用 (<code>pointerlockchange</code>, <code>pointerlockerror</code>) 事件来表明请求是成功还是失败了。这和 Fullscreen API 的工作方式是一致的，它使用 <code>requestFullScreen</code> 方法，以及 <code>fullscreenchange</code> 和 <code>fullscreenerror</code> 事件。</p> + +<p>Pointer lock API 还扩展了 <code>document</code> 接口，添加了一个新的属性和一个新的方法。新的属性被用于访问当前被锁定的元素（如果有的话），并被命名为 <code>pointerLockElement</code>，目前也使用厂商前缀。 <code>document</code> 添加的新方法是 <code>exitPointerLock</code> ，顾名思义，它是用来退出指针锁定的。</p> + +<p><code>pointerLockElement</code> 属性适用于确定当前是否有被指针锁定的元素（例如，用来做一个布尔检查），以及当有元素被锁定时获取该元素的一个引用。下面是这两种用法的一个例子：</p> + +<pre class="brush: js notranslate"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement;</span></span> + +// 1) 用于布尔检查--我们被指针锁定了吗？ +if (!!document.pointerLockElement) { + // 指针被锁定 +} else { + // 指针未被锁定 +} + +// 2) 用于访问指针锁定的元素 +if (document.pointerLockElement === someElement) { + // someElement 当前被指针锁定 +} +</pre> + +<p><code>document</code> 的 <code>exitPointerLock</code> 方法被用来退出指针锁定，而且和 requestPointerLock 一样，使用 <code>pointerlockchange</code> 和 <code>pointerlockerror</code>事件以异步方式工作：</p> + +<pre class="brush: js notranslate"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.exitPointerLock = document.exitPointerLock || + document.mozExitPointerLock || + document.webkitExitPointerLock;</span></span> + +function pointerLockChange() { + <span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement;</span></span> + + if (!!document.pointerLockElement) { + console.log("目前还是被锁定。"); + } else { + console.log("已经退出锁定。"); + } +} + +document.addEventListener('pointerlockchange', pointerLockChange, false); +document.addEventListener('mozpointerlockchange', pointerLockChange, false); +document.addEventListener('webkitpointerlockchange', pointerLockChange, false); + +// 试图解除锁定 +document.exitPointerLock(); +</pre> + +<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange 事件</h2> + +<p>当指针锁定状态改变时 - 例如，当调用 <code>requestPointerLock</code>, <code>exitPointerLock</code>，用户按下 ESC 键，等等。— <code>pointerlockchange</code> 事件被分发到 <code>document</code>。 这是一个简单事件所以不包含任何的额外数据。</p> + +<div class="note">该事件目前在 Firefox 中使用前缀的格式是 <code>mozpointerlockchange</code> ，在 Chrome 中是 <code>webkitpointerlockchange</code>。 </div> + +<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror 事件</h2> + +<p>当调用 <code>requestPointerLock</code> 或 <code>exitPointerLock</code>而引发错误时， <code>pointerlockerror</code> 事件被分发到 <code>document</code>。这是一个简单事件所以不包含任何的额外数据。</p> + +<div class="note">该事件目前在 Firefox 中被加上前缀为 <code>mozpointerlockerror</code> ，在 Chrome 中为 <code>webkitpointerlockerror</code>。 </div> + +<h2 id="extensions" name="extensions">鼠标事件扩展</h2> + +<p>Pointer lock API 使用 movement 属性扩展了标准的 <code>MouseEvent</code>。</p> + +<pre class="idl notranslate"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> { +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span> +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span> +};</span></pre> + +<div class="note">movement 属性目前在 Firefox 中被加上前缀为 <code>.mozMovementX</code> 和 <code>.mozMovementY</code> , 在 Chrome 中为<code>.webkitMovementX</code> 和 <code>.webkitMovementY</code>。</div> + +<p>鼠标事件的两个新参数—<code>movementX</code> 和 <code>movementY</code>—提供了鼠标位置的变化情况。这两个参数的值，等于两个<a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent"><code>MouseEvent</code></a> 属性（ <code>screenX</code> 和 <code>screenY）</code>之间值的变化程度，这些 MouseEvent 属性被存储在两个连续的鼠标移动事件（ <code>eNow</code> 和 <code>ePrevious</code>）中。换言之，指针锁定参数 <code>movementX = eNow.screenX - ePrevious.screenX</code>。（译注：不存在名为 eNow 或 ePrevious 的事件或属性，eNow 代指当前的鼠标移动事件，ePrevious 代指前一个鼠标移动事件）</p> + +<h3 id="locked_state" name="locked_state">锁定状态</h3> + +<p>当指针锁定被启动之后，正常的 <code>MouseEvent</code> 属性 <code>clientX</code>, <code>clientY</code>, <code>screenX</code>, 和 <code>screenY</code> ，保持不变，就像鼠标没有在移动一样。 <code>movementX</code> 和 <code>movementY</code> 属性持续提供鼠标的位置变化。如果鼠标在一个方向上持续移动，<code>movementX</code> 和 <code>movementY</code>的值是没有限制的。不存在鼠标光标的概念，而且光标无法移到窗口之外，而且也不会被屏幕边缘所固定。</p> + +<h3 id="unlocked_state" name="unlocked_state">未锁定状态</h3> + +<p>无论鼠标锁定状态是怎样的， <code>movementX</code> 和 <code>movementY</code> 参数一直有效，并且为了方便起见，甚至在未锁定状态也是有效的。</p> + +<p>当鼠标被解除锁定，系统光标可以退出并重新进入浏览器窗口。如果发生这种情况，<code>movementX</code> 和 <code>movementY</code> 可能会被设置成0。</p> + +<h2 id="iframe_的限制">iframe 的限制</h2> + +<p>指针锁定一次只能锁定一个 iframe。如果你锁定了一个 iframe，你不能试图锁定另外一个 iframe 然后把目标转移到这个 iframe 上；指针锁定将会出错。为了避免这一问题，首先解锁那个锁定的 iframe，然后再锁定另外一个。</p> + +<p>在 iframe 默认的情况下， "sandboxed" iframes 会阻止指针锁定。避免这种限制的能力，即以属性/值 <code><iframe sandbox="allow-pointer-lock"></code> 组合的形式 , 有望很快在 Chrome 中出现。</p> + +<h2 id="Browser_compatibiltiy" name="Browser_compatibiltiy">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td> + <p>目标是 23{{ property_prefix("webkit") }}*</p> + + <p>参见<a class="external" href="http://code.google.com/p/chromium/issues/detail?id=72754" title="http://code.google.com/p/chromium/issues/detail?id=72754"> CR/72574</a></p> + </td> + <td> + <p>{{ CompatGeckoDesktop("14.0") }}</p> + + <p>{{bug("633602") }}</p> + </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>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>* 在 <code>about:flags</code> 中要求这些特性被启用或是使用 <code>--enable-pointer-lock</code> 标记启动 Chrome。</p> + +<h2 id="See_also" name="See_also">参见</h2> + +<p>{{ spec("http://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html", "W3C Pointer Lock API Specification", "ED") }}</p> + +<p><a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent">MouseEvent</a></p> diff --git a/files/zh-cn/web/api/push_api/using_the_push_api/index.html b/files/zh-cn/web/api/push_api/using_the_push_api/index.html deleted file mode 100644 index e616d4e12d..0000000000 --- a/files/zh-cn/web/api/push_api/using_the_push_api/index.html +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: Using the Push API -slug: Web/API/Push_API/Using_the_Push_API -tags: - - Push - - Push API - - Service Workers - - Using the Push API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API ---- -<p class="summary"><span>W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> </span>为开发人员在Web应用程序中提供了一些令人兴奋的新功能：本文提供了一个简单的演示，以获取Push通知的设置和运行。</p> - -<p>在任何时候——不论这一应用是否处于激活状态——从服务器向客户端推送消息或者通知的能力，是一种原生应用已经享受了一段时间的能力。现在 Web 应用也拥有了这一能力。桌面系统上的 Firefox 43+ 和 Chrome 42+ 已经支持 Push 的大部分功能，移动平台也很可能在不久的将来提供支持。 {{domxref("PushMessageData")}} 当前只在 Firefox Nightly (44+) 中提供实验性的支持，并且这一实现也可能会变更。</p> - -<div class="note"> -<p><strong>Note</strong>: Firefox OS 的早期版本使用了这一 API 的一个 proprietary 版本，叫做 <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a> ，现在已经被 Push API 标准废弃。</p> -</div> - -<h2 id="Demo_the_basis_of_a_simple_chat_server_app">Demo: the basis of a simple chat server app</h2> - -<p>我们创建的这一 demo 是一个简单的聊天应用。它提供了一个表单，用来输入聊天内容，还有一个按钮，用来订阅（subscribe）推送的消息。按下按钮后，你将订阅这一消息推送服务，服务器会记录你的信息，同时当前所有的订阅者会收到一个推送消息，告诉他们有人订阅。</p> - -<p>此时，新订阅者的名字会出现在订阅者列表上，同时界面上会出现一个文本域和一个提交按钮，允许订阅者发送消息。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>要运行这一 demo，请参阅 <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>。请注意，想要在 Chrome 中使用这一应用并且以一个更合理的方式运行，服务器端还需要大量的工作。然而，推送的细节解释起来特别麻烦，我们先概览这个推送接口是怎么运作的，然后再回来详细了解。</p> - -<h2 id="Technology_overview">Technology overview</h2> - -<p>这一部分提供了这一例子中用到的技术的概览。</p> - -<p>Web Push 消息是 <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> 技术族的一部分；特别的，一个service worker想要接收消息，就必须在一个页面上被激活。 在 service worker 接收到推送的消息后，你可以决定如何显示这一消息。你可以：</p> - -<ul> - <li>发送一个 <a href="/en-US/docs/Web/API/Notifications_API">Web notification</a> ，弹出一个系统通知提醒用户。这一操作需要发送推送消息的权限。</li> - <li>通过 {{domxref("MessageChannel")}} 将消息送回主页面。</li> -</ul> - -<p>通常这两者可以结合使用，下面的 demo 显示了两者的特点。</p> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>注：</strong>你需要在服务器端部署某种形式的代码来处理endpoint数据的加密和发送推送消息的请求。</span> 在我们的Demo里，我们把那些代码放进了一个快速、劣质的服务器代码（a quick-and-dirty server ）里，部署在 <a href="https://nodejs.org/">NodeJS</a> 上。</p> -</div> - -<p>service worker 需要订阅推送消息服务。在订阅服务时，每一个会话会有一个独立的端点（endpoint）。订阅对象的属性({{domxref("PushSubscription.endpoint")}}) 即为端点值。将端点发送给服务器后，服务器用这一值来发送消息给会话的激活的 service worker。不同浏览器需要用不同的推送消息服务器。</p> - -<h3 id="加密（Encryption）">加密（Encryption）</h3> - -<div class="note"> -<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>在通过推送消息发送数据时，数据需要进行加密。数据加密需要通过 {{domxref("PushSubscription.getKey()")}} 方法产生的一个公钥。这一方法在服务器端运行，通过复杂的密码学机制来生成公钥，详情可参阅 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 。以后可能会有更多用于处理推送消息加密的库出现，在这一 demo 中，我们使用 Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Push_workflow_summary">Push workflow summary</h3> - -<p>这里我们总结一下推送消息的实现。在之后的章节中你可以找到这一 demo 代码的更多细节。</p> - -<ol> - <li>请求 web 通知及你所使用的其他功能的权限。</li> - <li>调用 {{domxref("ServiceWorkerContainer.register()")}} ，注册一个 service worker。</li> - <li>使用 {{domxref("PushManager.subscribe()")}} 订阅推送消息。</li> - <li>取得与订阅相关联的 endpoint （{{domxref("PushSubscription.endpoint")}}），并且生成一个客户公钥（{{domxref("PushSubscription.getKey()")}}） 。注意 <code>getKey()</code> 是试验性的，只在 Firefox 有效。</li> - <li>将详细信息发送给服务器，服务器可以用这些信息来发送推送消息。这一 demo 使用 {{domxref("XMLHttpRequest")}} ，但你也可以使用 <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 。</li> - <li>如果你使用 <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> 来和 service worker 通信，则创建一个新的 message channel ({{domxref("MessageChannel.MessageChannel()")}}) ，并且在 service worker 调用 {{domxref("Worker.postMessage()")}} ，将 <code>port2</code> 发送给 service worker ，以建立 communication channel 。你应该设置一个 listener 来响应从 service worker 发来的消息。</li> - <li>在服务器端，存储端点以及其他在发送推送消息给订阅者时需要的信息（我们使用一个简单的文本文件，但你可以使用数据库，或者其他你喜欢的方式）。在生产环境中，请保护好这些信息，以防恶意的攻击者用这些信息给订阅者推送垃圾消息。</li> - <li>要发送一个推送消息，你需要向端点 URL 发送一个 HTTP <code>POST</code> 。这一请求需要包括一个 TTL 头，用来规定用户离线时消息队列的最大长度。要在请求中包括数据，你需要使用客户公钥进行加密。在我们的 demo 中，我们使用 <a href="https://github.com/marco-c/web-push">web-push</a> 模块来处理困难的部分。</li> - <li>在你的 service worker 中，设置一个 <code>push</code> 事件句柄来响应接收到的推送消息。 - <ol> - <li>如果你想要将一个信道消息发送回主 context（看第6步），你需要先取得之前发送给 service worker 的 <code>port2</code> 的引用 ({{domxref("MessagePort")}}) 。这个可以通过传给 <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}) 的{{domxref("MessageEvent")}} 对象取得。 具体地说，是 <code>ports</code> 属性的索引 0 。 之后你可以用 {{domxref("MessagePort.postMessage()")}} 来向 <code>port1</code> 发送消息 。</li> - <li>如果你想要使用系统通知，可以调用 {{domxref("ServiceWorkerRegistration.showNotification()")}} 。注意，在我们的代码中，我们将其运行在一个 {{domxref("ExtendableEvent.waitUntil()")}} 方法中——这样做将事件的 生命周期（lifetime）扩展到了通知被处理后，使得我们可以确认事情像我们期望的那样进行。<span id="cke_bm_307E" style="display: none;"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Building_up_the_demo">Building up the demo</h2> - -<p>让我们浏览一下 demo 的代码，理解一下它是如何工作的。</p> - -<h3 id="The_HTML_and_CSS">The HTML and CSS</h3> - -<p>这个 demo 的 HTML 和 CSS 没有什么需要特别留意的地方。初始化时，HTML包含一个简单的表单、一个按钮和两个列表。按钮用来订阅，两个列表分别显示订阅者和聊天消息。订阅之后，会出现用来输入聊天消息的控件。</p> - -<p>为了对不干扰 Push API 的理解，CSS被设计得非常简单。</p> - -<h3 id="The_main_JavaScript_file">The main JavaScript file</h3> - -<p>JavaScript 明显更加重要。让我们看看主 JS 文件。</p> - -<h4 id="Variables_and_initial_setup">Variables and initial setup</h4> - -<p>开始时，我们声明一些需要使用的变量：</p> - -<pre class="brush: js">var isPushEnabled = false; -var useNotifications = false; - -var subBtn = document.querySelector('.subscribe'); -var sendBtn; -var sendInput; - -var controlsBlock = document.querySelector('.controls'); -var subscribersList = document.querySelector('.subscribers ul'); -var messagesList = document.querySelector('.messages ul'); - -var nameForm = document.querySelector('#form'); -var nameInput = document.querySelector('#name-input'); -nameForm.onsubmit = function(e) { - e.preventDefault() -}; -nameInput.value = 'Bob';</pre> - -<p>首先，是两个布尔变量，一个用来记录 Push 是否被订阅，一个用来记录是否有通知的权限。</p> - -<p>其次，是订阅/取消订阅 {{htmlelement("button")}} 的引用，以及发送消息按钮的引用和输入的引用（订阅成功之后按钮和输入才会创建）。</p> - -<p>接下来，是页面上的三个{{htmlelement("div")}} 元素的引用，在需要插入元素时会用到（比如创建 <em>Send Chat Message</em> 按钮，或者 <em>Messages </em>列表中增加聊天消息时）。</p> - -<p>最后，是 name selection 表单和 {{htmlelement("input")}} 元素的引用。我们给 input 一个默认值，并且使用 <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 方法，让按下回车时不会自动提交表单。</p> - -<p>之后，我们通过 {{domxref("Notification.requestPermission","requestPermission()")}} 请求发送web通知的权限：</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>在 <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> 时我们运行一段代码，让应用开始初次加载时的初始化过程。首先我们给 subscribe/unsubscribe 按钮添加 click event listener ，让这一按钮在已经订阅（<code>isPushEnabled为真）</code>时执行 <code>unsubscribe()</code> 函数，否则执行 <code>subscribe()</code> ：</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>之后，我们检查 service workers 是否被支持。如果支持，则用 {{domxref("ServiceWorkerContainer.register()")}} 注册一个 service worker 并且运行 <code>initialiseState()</code> 函数。若不支持，则向控制台输出一条错误信息。</p> - -<pre class="brush: js"> // Check that service workers are supported, if so, progressively - // enhance and add push messaging support, otherwise continue without it. - if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('sw.js').then(function(reg) { - if(reg.installing) { - console.log('Service worker installing'); - } else if(reg.waiting) { - console.log('Service worker installed'); - } else if(reg.active) { - console.log('Service worker active'); - } - - initialiseState(reg); - }); - } else { - console.log('Service workers aren\'t supported in this browser.'); - } -}); -</pre> - -<p>接下来是 <code>initialiseState()</code> 函数。查看 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> 可获得有注释的完整源码（简洁起见，此处省略）。</p> - -<p><code>initialiseState()</code> 首先检查 service workers 是否支持 notifications ，如果支持则将 <code>useNotifications</code> 变量设为真。之后检查用户是否允许 said notifications ， push messages 是否支持，并分别进行设置。</p> - -<p>最后，使用 {{domxref("ServiceWorkerContainer.ready()")}} 来检测 service worker 是否被激活并开始运行，会返回一个Promise对象。当这一 promise 对象 resolve 时，我们访问 {{domxref("ServiceWorkerRegistration.pushManager")}} 属性，得到一个 {{domxref("PushManager")}} 对象，再调用该对象的 {{domxref("PushManager.getSubscription()")}}方法，最终获得用来推送消息的订阅对象。当第二个 promise 对象 resolve 时，我们启用 subscribe/unsubscribe 按钮（<code>subBtn.disabled = false;）</code>，并确认订阅对象。</p> - -<p>这样做了之后，订阅的准备工作已经完成了。即使这一应用并没有在浏览器中打开， service worker 也依然可能在后台处于激活状态。如果我们已经订阅，则对UI进行更新，修改按钮的标签，之后将 <code>isPushEnabled 设为真，通过 </code>{{domxref("PushSubscription.endpoint")}} 取得订阅的端点，通过 {{domxref("PushSubscription.getKey()")}} 生成一个公钥，调用<code> updateStatus()</code> 方法与服务器进行通信。</p> - -<p>此外，我们通过 {{domxref("MessageChannel.MessageChannel()")}} 得到一个新的 {{domxref("MessageChannel")}} 对象，并通过 {{domxref("ServiceworkerRegistration.active")}} 得到一个激活的 service worker 的引用，然后通过 {{domxref("Worker.postMessage()")}} 在主浏览器 context 和 service worker 间建立起一个信道。浏览器 context 接收 {{domxref("MessageChannel.port1")}} 中的消息。当有消息到来时，我们使用 <code>handleChannelMessage()</code> 方法来决定如何处理数据（参阅{{anch("Handling channel messages sent from the service worker")}}）。</p> - -<h4 id="订阅和取消订阅（Subscribing_and_unsubscribing）">订阅和取消订阅（Subscribing and unsubscribing）</h4> - -<p>现在把我们的注意力转到 <code>subscribe()</code> 和 <code>unsubscribe()</code> 函数上，它们用来订阅或取消订阅 来自服务器的通知。</p> - -<p>在订阅的时候，我们使用 {{domxref("ServiceWorkerContainer.ready()")}}方法再一次确认service worker处于激活状态并且可以使用了。当 promise 成功执行，我们用{{domxref("PushManager.subscribe()")}}方法订阅服务。如果订阅成功，我们会得到一个 {{domxref("PushSubscription")}} 对象，它携带了endpoint信息 ，并且可以产生（generate）一个公钥的方法 (再多说一点，{{domxref("PushSubscription.endpoint")}}属性和{{domxref("PushSubscription.getKey()")}}方法)，我们要把这两个信息传递给<code>updateStatus()</code> 函数，同时还要传递第三个信息——更新状态的类型（订阅还是不订阅），让它能够把这些必要的细节传递给服务器。</p> - -<p>我们也需要更新我们应用的状态 (设置 <code>isPushEnabled</code> 为<code>true</code>) 和 UI (激活<strong>订阅</strong>或者不订阅的按钮，同时改变标签的显示状态，让用户下一次点击按钮的时候变成<strong>不订阅</strong>的状态或者订阅的状态。)</p> - -<p><code><font face="Open Sans, Arial, sans-serif">不订阅 </font>unsubscribe()</code> 函数在结构上和订阅函数相识，然而基本上它们做的是完全相反的事； 最值得注意的不同是得到当前订阅对象是使用{{domxref("PushManager.getSubscription()")}}方法，而且使用{{domxref("PushSubscription.unsubscribe()")}}方法获得的promise对象。</p> - -<p>在两个函数中也提供了适当的错误处理函数。</p> - -<p><code><font face="Open Sans, Arial, sans-serif">为了节省时间，我们只在下面展示</font>subscribe()的代码；</code>查看全部请点击 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">function subscribe() { - // Disable the button so it can't be changed while - // we process the permission request - - subBtn.disabled = true; - - navigator.serviceWorker.ready.then(function(reg) { - reg.pushManager.subscribe({userVisibleOnly: true}) - .then(function(subscription) { - // The subscription was successful - isPushEnabled = true; - subBtn.textContent = 'Unsubscribe from Push Messaging'; - subBtn.disabled = false; - - // Update status to subscribe current user on server, and to let - // other users know this user has subscribed - var endpoint = subscription.endpoint; - var key = subscription.getKey('p256dh'); - updateStatus(endpoint,key,'subscribe'); - }) - .catch(function(e) { - if (Notification.permission === 'denied') { - // The user denied the notification permission which - // means we failed to subscribe and the user will need - // to manually change the notification permission to - // subscribe to push messages - console.log('Permission for Notifications was denied'); - - } else { - // A problem occurred with the subscription, this can - // often be down to an issue or lack of the gcm_sender_id - // and / or gcm_user_visible_only - console.log('Unable to subscribe to push.', e); - subBtn.disabled = false; - subBtn.textContent = 'Subscribe to Push Messaging'; - } - }); - }); -}</pre> - -<h4 id="更新应用和服务器的状态">更新应用和服务器的状态</h4> - -<p><code><font face="Open Sans, Arial, sans-serif">接下来的一个主要的JavaScript函数就是</font>updateStatus()，当订阅和取消订阅的时候，它负责更新UI中与服务器沟通的信息并发送状态更新的请求给服务器。</code></p> - -<p>这个函数做了三件事当中的哪一件事，取决于下面赋值给statusType的类型：</p> - -<ul> - <li><code>subscribe</code>: 一个按钮和和一个聊天信息的input输入框被创建后，就被插入到UI界面里面，然后通过XHR请求发送了一个包含状态信息的字面量对象给服务器，包含了statusType（subscribe）、订阅者的名字（ username of the subscriber）、订阅终端（subscription endpoint）和客户端公钥（client public key）。</li> - <li><code>unsubscribe</code>: 这个和订阅基本上是相反的——聊天的按钮和输入框被移除，同时又一个字面量对象被发送给服务器，告诉它取消订阅。</li> - <li><code>init</code>: 当应用被第一次载入或者安装的时候会运行——它创建与服务器沟通的UI,并且发送一个对象告诉服务器是哪一个用户初始化（重新载入）了。</li> -</ul> - -<p>再多说一句，为了简介这里不会展示全部的代码。检查全部代码点击： <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="处理在service_worker中发送过来的channel_message">处理在service worker中发送过来的channel message</h4> - -<p>正如刚才我们提到的，当我们接收到从service worker发送的<a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> 时，我们的 <code>handleChannelMessage()</code> 函数才会去执行它。 我们用{{domxref("channel.port1.onmessage")}}事件处理函数去处理{{event("message")}} event, :</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>这个函数会在service worker中发送信息给页面的时候在页面中执行（This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>）。</p> - -<p> <code>handleChannelMessage()</code> 函数如下：</p> - -<pre class="brush: js">function handleChannelMessage(data) { - if(data.action === 'subscribe' || data.action === 'init') { - var listItem = document.createElement('li'); - listItem.textContent = data.name; - subscribersList.appendChild(listItem); - } else if(data.action === 'unsubscribe') { - for(i = 0; i < subscribersList.children.length; i++) { - if(subscribersList.children[i].textContent === data.name) { - subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); - } - } - nameInput.disabled = false; - } else if(data.action === 'chatMsg') { - var listItem = document.createElement('li'); - listItem.textContent = data.name + ": " + data.msg; - messagesList.appendChild(listItem); - sendInput.value = ''; - } -}</pre> - -<p>这个函数会做什么取决于传入的action参数的赋值：</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (在启动和重启的时候,我们需要在这个示例中做同样的事情):一个{{htmlelement("li")}} 元素被创建，它的text content 被设置为 <code>data.name</code> (订阅者的名字),然后它被添加到订阅者的列表里(一个简单的 {{htmlelement("ul")}}元素里)，所以这里是订阅者（再次）加入聊天的一个视觉反馈。</li> - <li><code>unsubscribe</code>: 我们循环遍历订阅者的列表，查找谁的 text content 和<code>data.name</code> (取消订阅者的名字)相同，然后删除这个节点以提供一个视觉反馈表示有人取消订阅了。</li> - <li><code>chatMsg</code>: 和第一个表现的形式类似, 一个 {{htmlelement("li")}}被创建，它的text content设置为<code>data.name + ": " + data.msg</code> (例如： "Chris: This is my message"), 然后它被添加到每一个用户UI的聊天列表里。</li> -</ul> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>注: </strong></span> 我们需要在更新DOM之前传递需要的数据给主页面（main context）， 因为service worker不能操作DOM。你在使用前一定要知道service worker的一些限制。阅读 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> 获取更多细节.</p> -</div> - -<h4 id="发送聊天信息">发送聊天信息</h4> - -<p>当‘<em>Send Chat Message‘ </em>按钮被点击后，相关联的文本域的内容就作为聊天内容被发送出去。这个由 <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> </a>函数处理(再多说一句,为了简洁就不展示了). 这个和 <code>updateStatus()</code> 的不同之处也是差不多的。 (查看 {{anch("Updating the status in the app and server")}}) — 我们获得 endpoint 和 public key 是来自一个 {{domxref("PushSubscription")}} 对象, 这个对象又是来自于 {{domxref("ServiceWorkerContainer.ready()")}} 方法和{{domxref("PushManager.subscribe()")}}方法。它们（endpoint、public key）被传递进一个字面量对象里面（ in a message object），同时含有订阅用户的名字，聊天信息，和chatMsg的statusType，然后通过{{domxref("XMLHttpRequest")}}对象发送出去的，。</p> - -<h3 id="服务端（The_Server）">服务端（The Server）</h3> - -<p>正如我们上面提到的，我们需要一个服务端的容器去存储订阅者的信息，并且还要在状态更新时发送推送消息给客户端。 我们已经用一种hack的方式把一些需要的东西放到了一个快速-劣质(quick-and-dirty)的<a href="http://nodejs.org/">NodeJS</a> 服务端上(<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>)，用于处理来自客户端JavaScript的异步请求。</p> - -<p>它用一个文本文件 (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>)去存储订阅者的信息；这个文件一开始是空的(empty)。 有四种不同类型的请求，分别由被传输过来的对象中的statusType决定；这些在客户端通俗易懂的的状态类型同样也适用于服务端，因为服务端也有相同的状态。下面是这四个个状态在服务端代表的各自的含义。</p> - -<ul> - <li><code>subscribe</code>: 服务器将会添加订阅者的信息到存储的容器里 (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>)，包括endpoint等，然后会推送给所有已经订阅了的订阅者一条消息，告诉每一个订阅者有新的订阅者加入了聊天。</li> - <li><code>unsubscribe</code>: 服务器在存储订阅信息的容器里找到发送该类型请求的订阅者的详情，并移除这个订阅者的信息，然后推送一条消息给所有依然订阅的用户，告诉他们这个人取消订阅了。</li> - <li><code>init</code>: 服务器从那个存储信息的文本中读取所有订阅者的信息，然后告诉他们有人初始化或者再次加入了这个聊天。</li> - <li><code>chatMsg</code>: 推送一条订阅者想发送的信息给所有的订阅者；服务器从存储容器里读取现在订阅者的信息，然后服务器给每一个人推送一条包含聊天信息的消息。</li> -</ul> - -<p>其他需要注意的东西：</p> - -<ul> - <li>我们使用的是Node.js的 <a href="https://nodejs.org/api/https.html">https 模块 </a> 去创建的服务器，因为出于安全考虑，service worker只允许工作在一个安全的连接里(https only)。这也就是为什么我们要在应用里包含了<code>.pfx</code> 安全证书，然后在Node代码里引用这个证书。</li> - <li>当你发送一条没有数据的推送消息的时候，只需要把它用http的post请求发送给对应订阅者的endpoint的URL。然而，当推送消息里包含数据的时候，你需要加密它，这个加密过程往往很复杂。随着时间的推移，一些出现的库文件（libraries）帮你做了这部分的工作。在这个demo里面我们用了 Marco Castelluccio的NodeJS库文件（<a href="https://github.com/marco-c/web-push">web-push library</a>)。查阅这些源代码了解更多加密过程是怎么完成的 (查阅 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 获取更多细节)。库文件让发送一条推送消息变得简单（ The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>）。</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>现在让我们来看看服务工作者代码（sw.js），它响应由{{Event("push")}}事件表示的推送消息。 这些通过（{{domxref("ServiceWorkerGlobalScope.onpush")}}）事件处理程序在服务工作人员的范围内处理; 它的工作就是为每个收到的消息做出回应。 我们首先通过调用{{domxref("PushMessageData.json()")}}将收到的消息转换回对象。然后，通过查看这个对象的action属性，就能知道这个推送消息的类型：</p> - -<ul> - <li><code>subscribe</code> 或者 <code>unsubscribe</code>: 我们发送一个系统通知是通过 <code>fireNotification()</code> 函数，但同时，也通过{{domxref("MessageChannel")}}把这个消息发送回函数的上下文环境（main context），以便我们相应地更新订阅者列表（subscriber list） (查看 {{anch("Handling channel messages sent from the service worker")}} 了解详细).</li> - <li><code>init</code> 或者 <code>chatMsg</code>: 我们只是发送一个消息回主要的上下文（main context）来处理 <code>init</code> 和 <code>chatMsg</code> 情况（这些不需要系统通知）.</li> -</ul> - -<pre class="brush: js">self.addEventListener('push', function(event) { - var obj = event.data.json(); - - if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { - fireNotification(obj, event); - port.postMessage(obj); - } else if(obj.action === 'init' || obj.action === 'chatMsg') { - port.postMessage(obj); - } -});</pre> - -<p>下一步， 让我们看看 <code>fireNotification()</code> 函数的代码 (它真的太他妈简单了).</p> - -<pre class="brush: js">function fireNotification(obj, event) { - var title = 'Subscription change'; - var body = obj.name + ' has ' + obj.action + 'd.'; - var icon = 'push-icon.png'; - var tag = 'push'; - - event.waitUntil(self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - })); -}</pre> - -<p>我们先在这里列出通知消息框所需要的资源：标题、主体内容、图标。然后我们通过 {{domxref("ServiceWorkerRegistration.showNotification()")}} 方法把这个通知发送出去，同时提供一个"push"给tag属性，表示这是一个推送消息，以便我们能够在全部的通知消息中找到（identify）这个推送消息。 当我们成功发送一条推送消息，它可能会在用户对应的电脑或者设备上展示一个系统通知对话框，在不同的设备上通知对话框的外观可能是不一样的（下面的这张图片展示的是Mac OSX系统上的通知对话框）。</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>注意，我们做的这些都包裹在{{domxref("ExtendableEvent.waitUntil()")}} 方法里；这是为了让ServiceWorker在发送通知消息的过程中依然保持活动，知道消息发送完成。 <code>waitUntil()</code> 会延长service worker的生命周期至（这个周期里）所有活动都已经完成。</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="处理推送订阅过早失效（Handling_premature_subscription_expiration）">处理推送订阅过早失效（Handling premature subscription expiration）</h2> - -<p>有时候，推送订阅会过早失效，而不会调用{{domxref("PushSubscription.unsubscribe()")}} 。例如，当服务器过载或长时间处于脱机状态时，可能会发生这种情况。这是高度依赖于服务器的，所以确切的行为很难预测。 在任何情况下，您都可以通过查看{{Event("pushsubscriptionchange")}} 事件来处理此问题，您可以通过提供{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} 事件处理程序来侦听此事件；这个事件只会在这种情况下才会被触发。</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something,一般来说都会在这里重新订阅， - // 并通过XHR或者Fetch发送新的订阅信息回服务器</span><span class="comment token"> -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>注意，我们在demo里没有覆盖这种情况，因为订阅端点（subscription ending）作为一个简单的聊天服务器并不是什么难事。但是对于更复杂的示例，您可能需要重新订阅（resubscribe ）用户。</p> - -<h2 id="（让Chrome支持的额外步骤）Extra_steps_for_Chrome_support">（让Chrome支持的额外步骤）Extra steps for Chrome support</h2> - -<p>为了让应用也能够在Chrome上面运行，我们需要一些额外的步骤，因为在Chrome上，现在需要依赖谷歌云消息推送（Google's Cloud Messaging） 服务才能正常工作。</p> - -<h3 id="配置谷歌云消息推送（Setting_up_Google_Cloud_Messaging）">配置谷歌云消息推送（Setting up Google Cloud Messaging）</h3> - -<p>按照以下步骤配置:</p> - -<ol> - <li>跳转到 <a href="https://console.developers.google.com">Google Developers Console</a> 然后创建一个新项目。</li> - <li>进入你项目主页(例如：我们的示例是在 <code>https://console.developers.google.com/project/push-project-978</code>), 然后 - <ol> - <li>在你的应用选项里打开<em> Google APIs </em>。</li> - <li>在下一屏，在移动API那一部分下面点击“<em>Cloud Messaging for Android</em>” 。</li> - <li>点击开启API按钮。</li> - </ol> - </li> - <li>现在你需要记下你的项目编号和API key,因为待会儿你会用到他们。 它们在这些地方: - <ol> - <li><strong>项目编号</strong>: 点击左侧的主页；项目编号在你的项目主页上方很容易看见的位置。</li> - <li><strong>API key</strong>: 点击左边菜单里的证书（<em>Credentials</em> ）；API key 能够在这个页面找到。</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>你需要在你的应用里包含Google应用风格的 <code>manifest.json</code> ，这里面的 <code>gcm_sender_id</code> 参数需要设置为你的项目编号。下面是一个简单的示例（<a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>）:</p> - -<pre class="brush: js">{ - "name": "Push Demo", - "short_name": "Push Demo", - "icons": [{ - "src": "push-icon.png", - "sizes": "111x111", - "type": "image/png" - }], - "start_url": "/index.html", - "display": "standalone", - "gcm_sender_id": "224273183921" -}</pre> - -<p>同时，你也需要在HTML文档用一个{{HTMLElement("link")}} 标签里指向你的manifest文件:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly参数">userVisibleOnly参数</h3> - -<p>Chrome 要求你在订阅推送服务的时候设置 <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly 参数</code></a> 为 <code>true</code> , 表示我们承诺每当收到推送通知时都会显示通知。这可以在我们的<a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127"> <code>subscribe()</code> 函数</a> 中看到。</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> diff --git a/files/zh-cn/web/api/randomsource/index.html b/files/zh-cn/web/api/randomsource/index.html deleted file mode 100644 index 1366009032..0000000000 --- a/files/zh-cn/web/api/randomsource/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> 代表密码学安全随机数的来源。它可以通过全局对象的 {{domxref("Crypto")}} 获取：网页中的 {{domxref("Window.crypto")}}，Workrt 里面的 {{domxref("WorkerGlobalScope.crypto")}}。</p> - -<p><code>RandomSource</code> 不是一个接口，这个类型的对象不可以被创建。</p> - -<h2 id="属性">属性</h2> - -<p><em><code>RandomSource</code> 既没有定义也没有属性。</em></p> - -<dl> -</dl> - -<h2 id="方法">方法</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>使用密码学可靠的随机值填充传递过来的 {{ domxref("ArrayBufferView") }}。</dd> -</dl> - -<h2 id="Specification" name="Specification">标准</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>通过 {{ domxref("Window.crypto") }} 获取一个 {{domxref("Crypto")}} 对象。</li> - <li>{{jsxref("Math.random")}}，一个非密码学安全来源的随机数。</li> -</ul> diff --git a/files/zh-cn/web/api/response/克隆/index.html b/files/zh-cn/web/api/response/clone/index.html index 0efccea0dc..f43e881bca 100644 --- a/files/zh-cn/web/api/response/克隆/index.html +++ b/files/zh-cn/web/api/response/clone/index.html @@ -1,6 +1,6 @@ --- title: Response.clone() -slug: Web/API/Response/克隆 +slug: Web/API/Response/clone tags: - API - Experimental @@ -10,6 +10,7 @@ tags: - Response - clone translation_of: Web/API/Response/clone +original_slug: Web/API/Response/克隆 --- <div>{{APIRef("Fetch")}}</div> diff --git a/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html new file mode 100644 index 0000000000..7e830adf3e --- /dev/null +++ b/files/zh-cn/web/api/rtcpeerconnection/icecandidate_event/index.html @@ -0,0 +1,136 @@ +--- +title: 'RTCPeerConnection: icecandidate event' +slug: Web/API/RTCPeerConnection/icecandidate_event +translation_of: Web/API/RTCPeerConnection/icecandidate_event +original_slug: Web/Events/icecandidate +--- +<p>{{SeeCompatTable}}</p> + +<p>当 {{domxref("RTCPeerConnection")}}通过{{domxref("RTCPeerConnection.setLocalDescription()")}}方法更改本地描述之后，该{{domxref("RTCPeerConnection")}}会抛出<strong><code>icecandidate</code></strong>事件。该事件的监听器需要将更改后的描述信息传送给远端{{domxref("RTCPeerConnection")}}，以更新远端的备选源。</p> + +<h2 id="使用指南">使用指南</h2> + +<p><code>icecandidate</code> 的类型为 {{domxref("RTCPeerIceCandidateEvent")}}, 在以下三种情况下会触发该事件：</p> + +<h3 id="分享新的源">分享新的源</h3> + +<p><code>触发icecandidate</code>事件的首要原因：当获得新的源之后，需要将该源的信息发送给远端信号服务器，并分发至其他端的{{domxref("RTCPeerConnection")}}。其他{{domxref("RTCPeerConnection")}}通过{{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}方法将新{{domxref("RTCPeerCandidateIceEvent.candidate", "candidate")}} 中携带的信息，将新的源描述信息添加进它的备选池中；</p> + +<pre>rtcPeerConnection.onicecandidate = (event) => { + if (event.candidate) { + sendCandidateToRemotePeer(event.candidate) + } +} +</pre> + + + +<h2 id="概述">概述</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;">{{ SpecName('WebRTC 1.0', '#event-mediastream-icecandidate', 'icecandidate') }}</dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("RTCPeerConnectionIceEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">事件冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">能否取消默认</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">事件目标</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("RTCPeerConnection")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<p><em>属性继承自{{domxref("RTCPeerConnectionIceEvent")}}.</em></p> + +<h2 id="方法">方法</h2> + +<p><em>方法继承自 {{domxref("RTCPeerConnectionIceEvent")}}.</em></p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><em>无</em></li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{ SpecName('WebRTC 1.0', '#event-mediastream-icecandidate', 'icecandidate') }}</td> + <td>{{Spec2('WebRTC 1.0')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="兼容性">兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> +</ul> diff --git a/files/zh-cn/web/api/screen_capture_api/使用屏幕捕获api/index.html b/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html index ff32263241..e98533ac97 100644 --- a/files/zh-cn/web/api/screen_capture_api/使用屏幕捕获api/index.html +++ b/files/zh-cn/web/api/screen_capture_api/using_screen_capture/index.html @@ -1,11 +1,12 @@ --- title: 使用屏幕捕获API -slug: Web/API/Screen_Capture_API/使用屏幕捕获API +slug: Web/API/Screen_Capture_API/Using_Screen_Capture tags: - API - 屏幕捕获 - 捕获 translation_of: Web/API/Screen_Capture_API/Using_Screen_Capture +original_slug: Web/API/Screen_Capture_API/使用屏幕捕获API --- <p>{{DefaultAPISidebar("使用屏幕捕获API")}}</p> diff --git a/files/zh-cn/web/api/selection/从document中删除/index.html b/files/zh-cn/web/api/selection/deletefromdocument/index.html index 5532bcf0fc..602c872134 100644 --- a/files/zh-cn/web/api/selection/从document中删除/index.html +++ b/files/zh-cn/web/api/selection/deletefromdocument/index.html @@ -1,7 +1,8 @@ --- title: Selection.deleteFromDocument() -slug: Web/API/Selection/从Document中删除 +slug: Web/API/Selection/deleteFromDocument translation_of: Web/API/Selection/deleteFromDocument +original_slug: Web/API/Selection/从Document中删除 --- <div> <div> diff --git a/files/zh-cn/web/api/server-sent_events/index.html b/files/zh-cn/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..a6e44fee83 --- /dev/null +++ b/files/zh-cn/web/api/server-sent_events/index.html @@ -0,0 +1,78 @@ +--- +title: Server-sent events +slug: Web/API/Server-sent_events +tags: + - API + - NeedsTranslation + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +original_slug: Server-sent_events +--- +<div>{{DefaultAPISidebar("Server Sent Events")}}</div> + +<p>一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。使用 server-sent 事件，服务器可以在任何时刻向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上作为 <em><a href="https://wiki.developer.mozilla.org/en-US/docs/DOM/event">Events</a> + data</em> 的形式来处理。</p> + +<h2 id="概念与使用">概念与使用</h2> + +<p>可以前往我们这篇文章 <a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">《使用 “server-sent events</a>”》 学习怎么使用 server-sent events。</p> + +<h2 id="接口">接口</h2> + +<dl> + <dt>{{domxref("EventSource")}}</dt> + <dd>Defines all the features that handle connecting to a server, receiving events/data, errors, closing a connection, etc.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<ul> + <li><a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP</a></li> +</ul> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#server-sent-events', 'Server-sent events')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="参见">参见</h2> + +<h3 id="Tools">Tools</h3> + +<ul> + <li><a href="https://github.com/EventSource/eventsource">EventSource polyfill for Node.js</a></li> + <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li> + <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li> + <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li> + <li>intercooler.js <a href="http://intercoolerjs.org/docs.html#sse">declarative SSE support</a></li> +</ul> + +<h3 id="相关话题">相关话题</h3> + +<ul> + <li><a href="/en-US/docs/AJAX">AJAX</a></li> + <li><a href="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/WebSockets">WebSockets</a></li> +</ul> + +<h3 id="其他资源">其他资源</h3> + +<ul> + <li>一个使用 server-sent events 的、类似 <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter</a> 的应用程序，代码存放在这里：<a href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline">Github</a>.</li> + <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 和 Server-sent events</a></li> + <li>使用<a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Asp.Net</a> 的 <a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events</a> 的指南</li> +</ul> diff --git a/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html new file mode 100644 index 0000000000..5665f55722 --- /dev/null +++ b/files/zh-cn/web/api/server-sent_events/using_server-sent_events/index.html @@ -0,0 +1,191 @@ +--- +title: 使用服务器发送事件 +slug: Web/API/Server-sent_events/Using_server-sent_events +tags: + - Advanced + - DOM + - Guide + - SSE + - Server Sent Events + - messaging + - 服务器发送事件 + - 通信 +translation_of: Web/API/Server-sent_events/Using_server-sent_events +original_slug: Server-sent_events/Using_server-sent_events +--- +<p>{{DefaultAPISidebar("Server Sent Events")}}</p> + +<p class="summary">开发一个使用服务器发送的事件的Web应用程序是很容易的。你需要在服务器上的一些代码将事件流传输到Web应用程序，但Web应用程序端的事情几乎完全相同，处理任何其他类型的事件。</p> + +<p>在Web应用程序中使用服务器发送事件很简单.在服务器端,只需要按照一定的格式返回事件流,在客户端中,只需要为一些事件类型绑定监听函数,和处理其他普通的事件没多大区别.</p> + +<h2 id="从服务器接受事件">从服务器接受事件</h2> + +<p>服务器发送事件API也就是<a href="/zh-CN/Server-sent_events/EventSource" title="zh-CN/Server-sent events/EventSource"><code>EventSource</code></a>接口,在你创建一个新的<a href="/zh-CN/Server-sent_events/EventSource" title="zh-CN/Server-sent events/EventSource"><code>EventSource</code></a>对象的同时,你可以指定一个接受事件的URI.例如:</p> + +<pre class="notranslate">const evtSource = new EventSource("ssedemo.php"); +</pre> + +<div class="note"><strong>注:</strong>从Firefox 11开始,<code>EventSource</code>开始支持<a href="/zh-CN/HTTP_access_control" title="zh-CN/HTTP_access_control">CORS</a>.虽然该特性目前并不是标准,但很快会成为标准.</div> + +<p>如果发送事件的脚本不同源，应该创建一个新的包含URL和options参数的<code>EventSource</code>对象。例如，假设客户端脚本在example.com上：</p> + +<pre class="notranslate">const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );</pre> + +<p>一旦你成功初始化了一个事件源,就可以对 {{event("message")}} 事件添加一个处理函数开始监听从服务器发出的消息了:</p> + +<pre class="brush: js notranslate">evtSource.onmessage = function(event) { + const newElement = document.createElement("li"); + const eventList = document.getElementById("list"); + + newElement.innerHTML = "message: " + event.data; + eventList.appendChild(newElement); +}</pre> + +<p>上面的代码监听了那些从服务器发送来的所有没有指定事件类型的消息(没有<code>event</code>字段的消息),然后把消息内容显示在页面文档中.</p> + +<p>你也可以使用<code>addEventListener()</code>方法来监听其他类型的事件:</p> + +<pre class="brush: js notranslate">evtSource.addEventListener("ping", function(event) { + const newElement = document.createElement("li"); + const time = JSON.parse(event.data).time; + newElement.innerHTML = "ping at " + time; + eventList.appendChild(newElement); +});</pre> + +<p>这段代码也类似,只是只有在服务器发送的消息中包含一个值为"ping"的<code>event</code>字段的时候才会触发对应的处理函数,也就是将<code>data</code>字段的字段值解析为JSON数据,然后在页面上显示出所需要的内容.</p> + +<div class="blockIndicator warning"> +<p>当<strong>不通过HTTP / 2使用时</strong>，SSE（server-sent events）会受到最大连接数的限制，这在打开各种选项卡时特别麻烦，因为该限制是针对每个浏览器的，并且被设置为一个非常低的数字（6）。该问题在 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=275955" rel="noreferrer">Chrome</a> 和 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=906896" rel="noreferrer">Firefox</a>中被标记为“无法解决”。此限制是针对每个浏览器+域的，因此这意味着您可以跨所有选项卡打开6个SSE连接到www.example1.com，并打开6个SSE连接到www.example2.com。 （来自 <a href="https://stackoverflow.com/a/5326159/1905229">Stackoverflow</a>）。使用HTTP / 2时，HTTP同一时间内的最大连接数由服务器和客户端之间协商（默认为100）。</p> +</div> + +<h2 id="服务器端如何发送事件流">服务器端如何发送事件流</h2> + +<p>服务器端发送的响应内容应该使用值为<code>text/event-stream</code>的MIME类型.每个通知以文本块形式发送，并以一对换行符结尾。有关事件流的格式的详细信息，请参见{{ anch("Event stream format") }}。</p> + +<p>演示的{{Glossary("PHP")}}代码如下:</p> + +<pre class="brush: php notranslate">date_default_timezone_set("America/New_York"); +header("Cache-Control: no-cache"); +header("Content-Type: text/event-stream"); + +$counter = rand(1, 10); +while (true) { + // Every second, send a "ping" event. + + echo "event: ping\n"; + $curDate = date(DATE_ISO8601); + echo 'data: {"time": "' . $curDate . '"}'; + echo "\n\n"; + + // Send a simple message at random intervals. + + $counter--; + + if (!$counter) { + echo 'data: This is a message at time ' . $curDate . "\n\n"; + $counter = rand(1, 10); + } + + ob_end_flush(); + flush(); + sleep(1); +}</pre> + +<p>上面的代码会让服务器每隔一秒生成一个事件流并返回,其中每条消息的事件类型为"ping",数据字段都使用了JSON格式,数组字段中包含了每个事件流生成时的 ISO 8601 时间戳.而且会随机返回一些无事件类型的消息.</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 您可以在github上找到以上代码的完整示例—参见<a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> +</div> + +<h2 id="错误处理">错误处理</h2> + +<p>当发生错误(例如请求超时或与<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">HTTP访问控制（CORS）</a>有关的问题), 会生成一个错误事件. 您可以通过在<code>EventSource</code>对象上使用<code>onerror</code>回调来对此采取措施：</p> + +<pre class="notranslate">evtSource.onerror = function(err) { + console.error("EventSource failed:", err); +};</pre> + +<h2 id="关闭事件流">关闭事件流</h2> + +<p>默认情况下，如果客户端和服务器之间的连接关闭，则连接将重新启动。可以使用<code>.close()</code>方法终止连接。</p> + +<pre class="notranslate">evtSource.close();</pre> + +<h2 id="事件流格式">事件流格式</h2> + +<p>事件流仅仅是一个简单的文本数据流,文本应该使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/UTF-8">UTF-8</a> 格式的编码.每条消息后面都由一个空行作为分隔符.以冒号开头的行为注释行,会被忽略.</p> + +<div class="note"><strong>注:</strong>注释行可以用来防止连接超时,服务器可以定期发送一条消息注释行,以保持连接不断.</div> + +<p>每条消息是由多个字段组成的,每个字段由字段名,一个冒号,以及字段值组成.</p> + +<h3 id="字段">字段</h3> + +<p>规范中规定了下面这些字段:</p> + +<dl> + <dt><code>event</code></dt> + <dd>事件类型.如果指定了该字段,则在客户端接收到该条消息时,会在当前的<code>EventSource</code>对象上触发一个事件,事件类型就是该字段的字段值,你可以使用<code>addEventListener()方法在当前EventSource</code>对象上监听任意类型的命名事件,如果该条消息没有<code>event</code>字段,则会触发<code>onmessage属性上的事件处理函数</code>.</dd> + <dt><code>data</code></dt> + <dd>消息的数据字段.如果该条消息包含多个<code>data</code>字段,则客户端会用换行符把它们连接成一个字符串来作为字段值.</dd> + <dt><code>id</code></dt> + <dd>事件ID,会成为当前<code>EventSource</code>对象的内部属性"最后一个事件ID"的属性值.</dd> + <dt><code>retry</code></dt> + <dd><span class="short_text" id="result_box" lang="zh-CN"><span>一个</span><span>整数值</span><span>,</span><span>指定了</span><span>重新连接的时间(</span><span>单位为毫秒),</span></span>如果该字段值不是整数,则会被忽略.</dd> +</dl> + +<p>除了上面规定的字段名,其他所有的字段名都会被忽略.</p> + +<div class="note"><strong>注:</strong> 如果一行文本中不包含冒号,则整行文本会被解析成为字段名,其字段值为空.</div> + +<h3 id="例子">例子</h3> + +<h4 id="未命名事件">未命名事件</h4> + +<p>下面的例子中发送了三条消息,第一条仅仅是个注释,因为它以冒号开头.第二条消息只包含了一个<code>data</code>字段,值为"some text".第三条消息包含的两个<code>data</code>字段会被解析成为一个字段,值为"another message\nwith two lines".其中每两条消息之间是以一个空行为分割符的.</p> + +<pre class="notranslate">: this is a test stream + +data: some text + +data: another message +data: with two lines +</pre> + +<h4 id="命名事件">命名事件</h4> + +<p>下面的事件流中包含了一些命名事件.每个事件的类型都是由<code>event</code>字段指定的,另外每个<code>data</code>字段的值可以使用JSON格式,当然也可以不是.</p> + +<pre class="notranslate">event: userconnect +data: {"username": "bobby", "time": "02:33:48"} + +event: usermessage +data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} + +event: userdisconnect +data: {"username": "bobby", "time": "02:34:23"} + +event: usermessage +data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."} +</pre> + +<h4 id="混合两种事件">混合两种事件</h4> + +<p>你可以在一个事件流中同时使用命名事件和未命名事件.</p> + +<pre class="notranslate">event: userconnect +data: {"username": "bobby", "time": "02:33:48"} + +data: Here's a system message of some kind that will get used +data: to accomplish some task. + +event: usermessage +data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."} +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.EventSource")}}</p> diff --git a/files/zh-cn/web/api/slotable/index.html b/files/zh-cn/web/api/slotable/index.html deleted file mode 100644 index 2a489d3b22..0000000000 --- a/files/zh-cn/web/api/slotable/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Slotable -slug: Web/API/Slotable -tags: - - API - - Web Components - - 参考 - - 接口 -translation_of: Web/API/Slottable -translation_of_original: Web/API/Slotable ---- -<p>{{APIRef("Shadow DOM")}}</p> - -<p><code>Slotable</code> mixin 定义了允许节点成为 {{htmlelement("slot")}} 元素的内容的特性——下面的特性被包含在 {{domxref("Element")}} 和 {{domxref("Text")}} API 之中。</p> - -<h2 id="属性">属性</h2> - -<dl> - <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> - <dd>返回节点所插入的 {{htmlelement("slot")}} 元素。</dd> -</dl> - -<h2 id="方法">方法</h2> - -<p>无。</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Slotable")}}</p> diff --git a/files/zh-cn/web/api/语音识别/index.html b/files/zh-cn/web/api/speechrecognition/index.html index 83e11e69e4..2f8bca2c84 100644 --- a/files/zh-cn/web/api/语音识别/index.html +++ b/files/zh-cn/web/api/speechrecognition/index.html @@ -1,7 +1,8 @@ --- title: 语音识别 -slug: Web/API/语音识别 +slug: Web/API/SpeechRecognition translation_of: Web/API/SpeechRecognition +original_slug: Web/API/语音识别 --- <p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p> diff --git a/files/zh-cn/web/api/语音识别/result_event/index.html b/files/zh-cn/web/api/speechrecognition/result_event/index.html index d6415441f3..ca9fcea3f3 100644 --- a/files/zh-cn/web/api/语音识别/result_event/index.html +++ b/files/zh-cn/web/api/speechrecognition/result_event/index.html @@ -1,7 +1,8 @@ --- title: 'SpeechRecognition: result event' -slug: Web/API/语音识别/result_event +slug: Web/API/SpeechRecognition/result_event translation_of: Web/API/SpeechRecognition/result_event +original_slug: Web/API/语音识别/result_event --- <div>{{APIRef("Web Speech API")}} {{SeeCompatTable}}</div> diff --git a/files/zh-cn/web/api/storage/localstorage/index.html b/files/zh-cn/web/api/storage/localstorage/index.html deleted file mode 100644 index 46384c660e..0000000000 --- a/files/zh-cn/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -tags: - - 存储API - - 离线 -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -<p><code>localStorage</code> 与<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code> 一样，都遵循同源策略，但是它是持续存在的。<code>localStorage</code> 首次出现于 Firefox 3.5。</p> - -<div class="note"><strong>Note:</strong> 当浏览器进入隐私浏览模式，会创建一个新的、临时的数据库来存储local storage的数据；当关闭隐私浏览模式时，该数据库将被清空并丢弃。</div> - -<pre class="brush:js" style="font-size: 14px;">// Save data to the current local store -localStorage.setItem("username", "John"); - -// Access some stored data -alert( "username = " + localStorage.getItem("username"));</pre> - -<p class="note">本地存储（<code>localStorage</code>）的持续存在对许多事情都有帮助，包括这个示例<a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>所演示的记录页面查看次数。</p> - -<h4 id="兼容性" style="line-height: 18px; font-size: 1.28571428571429rem;">兼容性</h4> - -<p><code>Storage</code> 对象最近才加入标准，因此可能并不被所有浏览器支持。你可以通过在你的scripts代码前加入以下两段代码中某一段来规避在不能原生支持的执行环境使用<code>localStorage</code>对象的问题。</p> - -<p>该算法借助于cookies，对localStorage对象进行了严谨的实现。</p> - -<pre class="brush: js" style="font-size: 14px;">if (!window.localStorage) { - Object.defineProperty(window, "localStorage", new (function () { - var aKeys = [], oStorage = {}; - Object.defineProperty(oStorage, "getItem", { - value: function (sKey) { return sKey ? this[sKey] : null; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "key", { - value: function (nKeyId) { return aKeys[nKeyId]; }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "setItem", { - value: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "length", { - get: function () { return aKeys.length; }, - configurable: false, - enumerable: false - }); - Object.defineProperty(oStorage, "removeItem", { - value: function (sKey) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - }, - writable: false, - configurable: false, - enumerable: false - }); - this.get = function () { - var iThisIndx; - for (var sKey in oStorage) { - iThisIndx = aKeys.indexOf(sKey); - if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } - else { aKeys.splice(iThisIndx, 1); } - delete oStorage[sKey]; - } - for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } - for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { - aCouple = aCouples[nIdx].split(/\s*=\s*/); - if (aCouple.length > 1) { - oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); - aKeys.push(iKey); - } - } - return oStorage; - }; - this.configurable = false; - this.enumerable = true; - })()); -} -</pre> - -<div class="note"><strong>注意：</strong>数据的最大大小是通过cookies来严格限制的。可以使用这样的算法实现，使用<code>localStorage.setItem()</code>和<code>localStorage.removeItem()</code>这两个函数进行添加、改变或删除一个键。使用方法为<code>localStorage.yourKey = yourValue;和delete localStorage.yourKey;</code>进行设置和删除一个键<strong>并不是安全的做法</strong>。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管<code>localStorage </code>这个对象。</div> - -<div class="note"><strong>注意：</strong>通过将字符串<code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> 改成<code style="background: rgb(204, 204, 204);">"; path=/"</code>（并且改变对象的名字），可以使得这个 <code>localStorage</code>的实现变为<code>sessionStorage</code>的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的<code>sessionStorage</code>实现会将储存键值访问权限限定在当前浏览上下文。</div> - -<p>下面是另一个，并不那么严谨的<code>localStorage</code>对象的实现。相比上一个方法，它更简单且能与旧的浏览器良好兼容，如Internet Explorer < 8 (甚至能在<strong> Internet Explorer 6 上正常工作</strong>)。它同样是使用cookies来实现的。</p> - -<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { - window.localStorage = { - getItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return null; } - return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); - }, - key: function (nKeyId) { - return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); - }, - setItem: function (sKey, sValue) { - if(!sKey) { return; } - document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; - this.length = document.cookie.match(/\=/g).length; - }, - length: 0, - removeItem: function (sKey) { - if (!sKey || !this.hasOwnProperty(sKey)) { return; } - document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; - this.length--; - }, - hasOwnProperty: function (sKey) { - return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - } - }; - window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; -} -</pre> - -<div class="note"><strong>注意：</strong>数据量的最大值是通过cookies来严格限制的。可以使用<code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>和<code>localStorage.removeItem()</code>等方法获取、设置或删除一个键。使用方法<code>localStorage.yourKey = yourValue;</code>获取、添加、改变或者删除一个键<strong>并不是安全的做法</strong>。您也可以改变它的名字和使用它仅仅去管理文档的cookies而不管<code>localStorage </code>这个对象。</div> - -<div class="note"><strong>注意：</strong>通过将字符串<code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> 改成<code style="background: rgb(204, 204, 204);">"; path=/"</code>（并且改变对象的名字），可以使得这个 <code>localStorage</code>的实现变为<code>sessionStorage</code>的实现。然而，这种实现方式会使储存键值可以跨标签和窗口访问（而且只会在浏览器窗口被关闭时销毁），完全兼容的sessionStorage实现会将储存键值限定在当前浏览环境上下文。</div> - -<h4 id="与globalStorage的兼容性及关系" style="line-height: 18px; font-size: 1.28571428571429rem;">与globalStorage的兼容性及关系</h4> - -<p class="note"><code>localStorage</code> 和 <code>globalStorage[location.hostname]</code> 是一样的, 除了作用域是在 HTML5 origin (结构 + 主机名 + 非标准的端口)， 并且 <code>localStorage</code> 是一个 <code>Storage</code> 实例 ，而<code>globalStorage[location.hostname]</code> 是一个 <code>StorageObsolete</code> 实例，下面将要讨论这个。 例如, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> 无法访问与 <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> 相同的 <code>localStorage</code> 对象 ，但是它们可以访问同一个 <code>globalStorage</code>. <code>localStorage</code> 是标准的接口，<code>globalStorage</code> 不是， 所以不要依赖于 <code>globalStorage</code> 。 </p> - -<p>请注意，给globalStorage[location.hostname]设置一个属性并不会影响到localStorage。拓展<code>Storage.prototype</code>也不会影响<code>globalStorage</code>对象，只有拓展<code>StorageObsolete.prototype</code>才会影响。</p> - -<h4 id="存储格式">存储格式</h4> - -<p><code>Storage</code>的键和值都是以每个字符占2个字节的UTF-16字符串(<a href="/zh-CN/docs/Web/API/DOMString">DOMString</a>)格式存储的。</p> diff --git a/files/zh-cn/web/api/streams_api/概念/index.html b/files/zh-cn/web/api/streams_api/concepts/index.html index 9c2d9f77ae..a634fb4f07 100644 --- a/files/zh-cn/web/api/streams_api/概念/index.html +++ b/files/zh-cn/web/api/streams_api/concepts/index.html @@ -1,10 +1,11 @@ --- title: Streams API 概念 -slug: Web/API/Streams_API/概念 +slug: Web/API/Streams_API/Concepts tags: - 概念 - 流 translation_of: Web/API/Streams_API/Concepts +original_slug: Web/API/Streams_API/概念 --- <div>{{apiref("Streams")}}</div> diff --git a/files/zh-cn/web/api/streams_api/使用可读文件流/index.html b/files/zh-cn/web/api/streams_api/using_readable_streams/index.html index 5313b80dc2..8d2df46ffb 100644 --- a/files/zh-cn/web/api/streams_api/使用可读文件流/index.html +++ b/files/zh-cn/web/api/streams_api/using_readable_streams/index.html @@ -1,7 +1,8 @@ --- title: 使用可读文件流 -slug: Web/API/Streams_API/使用可读文件流 +slug: Web/API/Streams_API/Using_readable_streams translation_of: Web/API/Streams_API/Using_readable_streams +original_slug: Web/API/Streams_API/使用可读文件流 --- <div>{{apiref("Streams")}}</div> diff --git a/files/zh-cn/web/api/textrange/text/index.html b/files/zh-cn/web/api/textrange/text/index.html deleted file mode 100644 index ae485dd58e..0000000000 --- a/files/zh-cn/web/api/textrange/text/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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/web/api/uievent/视图/index.html b/files/zh-cn/web/api/uievent/view/index.html index 66b72f2637..215789e0e9 100644 --- a/files/zh-cn/web/api/uievent/视图/index.html +++ b/files/zh-cn/web/api/uievent/view/index.html @@ -1,6 +1,6 @@ --- title: 用户界面项目视图 -slug: Web/API/UIEvent/视图 +slug: Web/API/UIEvent/view tags: - API - DOM @@ -9,6 +9,7 @@ tags: - 只读 - 属性 translation_of: Web/API/UIEvent/view +original_slug: Web/API/UIEvent/视图 --- <p>{{APIRef("DOM Events")}}</p> diff --git a/files/zh-cn/web/api/url/密码/index.html b/files/zh-cn/web/api/url/password/index.html index 1592676a9d..5490343afd 100644 --- a/files/zh-cn/web/api/url/密码/index.html +++ b/files/zh-cn/web/api/url/password/index.html @@ -1,7 +1,8 @@ --- title: URL.密码 -slug: Web/API/URL/密码 +slug: Web/API/URL/password translation_of: Web/API/URL/password +original_slug: Web/API/URL/密码 --- <div>{{ApiRef("URL API")}}</div> diff --git a/files/zh-cn/web/api/web_audio_api/最佳实践/index.html b/files/zh-cn/web/api/web_audio_api/best_practices/index.html index f0a241a557..5cc79ea155 100644 --- a/files/zh-cn/web/api/web_audio_api/最佳实践/index.html +++ b/files/zh-cn/web/api/web_audio_api/best_practices/index.html @@ -1,12 +1,13 @@ --- title: Web Audio API 最佳实践 -slug: Web/API/Web_Audio_API/最佳实践 +slug: Web/API/Web_Audio_API/Best_practices tags: - Web Audio API - 指导 - 最佳实践 - 音频 translation_of: Web/API/Web_Audio_API/Best_practices +original_slug: Web/API/Web_Audio_API/最佳实践 --- <div>{{apiref("Web Audio API")}}</div> diff --git a/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html new file mode 100644 index 0000000000..5f59c5f8a0 --- /dev/null +++ b/files/zh-cn/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -0,0 +1,109 @@ +--- +title: 结构化克隆算法 +slug: Web/API/Web_Workers_API/Structured_clone_algorithm +tags: + - DOM + - HTML5 + - 结构化克隆算法 +translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm +original_slug: Web/Guide/API/DOM/The_structured_clone_algorithm +--- +<p>结构化克隆算法是<a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data">由HTML5规范定义</a>的用于复制复杂JavaScript对象的算法。通过来自 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Workers</a>的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage" title="en/JavaScript/Reference/Global Objects/Error">postMessage()</a> </code>或使用 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IndexedDB">IndexedDB</a> 存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。</p> + +<h2 id="结构化克隆所不能做到的">结构化克隆所不能做到的</h2> + +<ul> + <li><code><a href="/cn/JavaScript/Reference/Global_Objects/Error">Error</a></code> 以及 <code><a href="/cn/JavaScript/Reference/Global_Objects/Function">Function</a></code> 对象是不能被结构化克隆算法复制的；如果你尝试这样子去做，这会导致抛出 <code>DATA_CLONE_ERR</code> 的异常。</li> + <li>企图去克隆 DOM 节点同样会抛出 <code>DATA_CLONE_ERROR</code> 异常。</li> + <li>对象的某些特定参数也不会被保留 + <ul> + <li><code><a href="/cn/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> </code>对象的 <code>lastIndex</code> 字段不会被保留</li> + <li>属性描述符，setters 以及 getters（以及其他类似元数据的功能）同样不会被复制。例如，如果一个对象用属性描述符标记为 read-only，它将会被复制为 read-write，因为这是默认的情况下。</li> + <li>原形链上的属性也不会被追踪以及复制。</li> + </ul> + </li> +</ul> + +<h2 id="支持的类型">支持的类型</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">对象类型</th> + <th scope="col">注意</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Data_structures#原始值">所有的原始类型</a></td> + <td>symbols 除外</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> 对象</td> + <td> </td> + </tr> + <tr> + <td>String 对象</td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td> + <td><code>lastIndex</code> 字段不会被保留。</td> + </tr> + <tr> + <td>{{ domxref("Blob") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ domxref("File") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ domxref("FileList") }}</td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td> + <td>这基本上意味着所有的 <a href="/zh-CN/docs/Web/JavaScript/Typed_arrays">类型化数组</a> ，如 Int32Array 等。</td> + </tr> + <tr> + <td>{{ domxref("ImageData") }}</td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td> + <td>仅包括普通对象（如对象字面量）</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td> + <td> </td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">HTML5 Specification: Safe passing of structured data</a></li> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.postMessage()") }}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li> +</ul> diff --git a/files/zh-cn/web/api/webglrenderingcontext/多边形偏移(polygonoffset)/index.html b/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html index a62d4aeafa..bec5cebef6 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/多边形偏移(polygonoffset)/index.html +++ b/files/zh-cn/web/api/webglrenderingcontext/polygonoffset/index.html @@ -1,7 +1,8 @@ --- title: WebGLRenderingContext.polygonOffset() -slug: Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) +slug: Web/API/WebGLRenderingContext/polygonOffset translation_of: Web/API/WebGLRenderingContext/polygonOffset +original_slug: Web/API/WebGLRenderingContext/多边形偏移(polygonOffset) --- <div>{{APIRef("WebGL")}}</div> diff --git a/files/zh-cn/web/api/webrtc_api/architecture/index.html b/files/zh-cn/web/api/webrtc_api/architecture/index.html deleted file mode 100644 index 5f37d83529..0000000000 --- a/files/zh-cn/web/api/webrtc_api/architecture/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: WebRTC 架构概览 -slug: Web/API/WebRTC_API/Architecture -tags: - - WebRTC 架构概览 -translation_of: Web/API/WebRTC_API/Protocols -translation_of_original: Web/API/WebRTC_API/Architecture ---- -<p>{{WebRTCSidebar}}</p> - -<p>用来创建WebRTC连接的API底层使用了一系列的网络协议和连接标准。这篇文章涵盖了这些标准。</p> - -<p>为了让WebRTC正常工作，需要的协议、标准和API比较繁多。因此对于初学者来说可能会比较难以理解。当你一旦上手，你会惊喜地发现原来这一切都是如此的优雅和简单易懂。至于你信不信，反正我是信了。</p> - - - - -<p>重定向 <a class="redirect" href="/zh-Hans/docs/Web/API/WebRTC_API/Protocols">WebRTC 协议介绍</a></p> diff --git a/files/zh-cn/web/api/webrtc_api/overview/index.html b/files/zh-cn/web/api/webrtc_api/overview/index.html deleted file mode 100644 index da693553b8..0000000000 --- a/files/zh-cn/web/api/webrtc_api/overview/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: WebRTC API overview -slug: Web/API/WebRTC_API/Overview -translation_of: Web/API/WebRTC_API#WebRTC_concepts_and_usage -translation_of_original: Web/API/WebRTC_API/Overview ---- -<p>{{WebRTCSidebar}}</p> - -<p><span class="seoSummary">WebRTC是由一些关联的API和协议一起协作，支持两个或多个终端之间交换数据和媒体信息的技术。这篇文章提供了这些APIs的介绍和提供的功能。</span></p> - -<h2 id="RTCPeerConnection">RTCPeerConnection</h2> - -<p>在媒体能够交换，或者数据通道建立之前，你需要把两个终端连接起来。这个连接过程的完成就是使用{{domxref("RTCPeerConnection")}} 接口。</p> - -<h2 id="MediaStream">MediaStream</h2> - -<p>{{domxref("MediaStream")}}接口描述了终端之间传输的媒体流。这个流由一个或多个媒体通道信息；通常这是一个音频通道或者视频通道信息。一个媒体流能够传输实时的媒体（例如音频通话或者视频会议等）或者已存的媒体（例如网上电影）。</p> - -<h2 id="RTCDataChannel">RTCDataChannel</h2> - -<p>WebRTC支持在建立连接的两个终端之间相互的传输二进制数据。这个过程通过{{domxref("RTCDataChannel")}}接口。</p> - -<p>这个接口可以作为数据的反向通道，甚至作为主要的数据通道去交换各种数据。例如在游戏应用中，通过这个接口可以实现多玩家支持，相互传送玩家的动作更新之类的数据。</p> diff --git a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html new file mode 100644 index 0000000000..fca4ff4be7 --- /dev/null +++ b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.html @@ -0,0 +1,89 @@ +--- +title: WebRTC 介绍 +slug: Web/API/WebRTC_API/Session_lifetime +translation_of: Web/API/WebRTC_API/Session_lifetime +original_slug: WebRTC/介绍 +--- +<div class="note"> +<p>此页面正在建设中，部分内容会移至其他页面，因为WebRTC指导资料已经建成。</p> + +<p>WebRTC允许您将任意数据，音频或视频（或其任何组合）的点对点通信构建到浏览器应用程序中。 在本文中，我们将介绍一个WebRTC会话的生命周期，从建立连接到不再需要时关闭连接。</p> +</div> + +<h2 id="创建连接">创建连接</h2> + +<p>互联网很大 很大。 那么多年以前，聪明的人看到它有多大，增长速度有多快，32位IP寻址系统的局限性，并意识到有些事情要做，所以他们开始设计一个新的 64位寻址系统。 但是他们意识到，完成转换需要更长时间才能持续32位地址，所以其他一些机智的人们想出了让多台计算机共享同一个32位IP地址的方法。 网络地址转换（NAT）是通过操纵LAN上的所有设备的数据出入的路由来支持这种地址共享的标准，所有这些设备都共享同一个WAN（全局）IP地址。</p> + +<p>用户的问题是互联网上的每台个人计算机不再一定具有唯一的IP地址，实际上，每个设备的IP地址也会变，不仅可能由于设备从一个网络移动到另一个网络，也可能被NAT和/或DHCP改变。 对于尝试进行点对点网络的开发人员，这引入了一个难题：没有每个用户设备的唯一标识符，不可能立即自动地知道如何连接到Internet上的特定设备。 即使你知道你想谈论的人，你不一定知道如何到达他们，甚至也不知道他们的地址。</p> + +<p>这就像您尝试向您的朋友Michelle发送一个包裹，但您只在这个包裹上贴了一个写着“Michelle”的标签，而您并不知道她的地址。 您得查到她的地址并将其包装在包中，要不然她会在想为什么你又忘记她的生日了。</p> + +<p>这就是信令（Signaling）的由来。</p> + +<h3 id="信令">信令</h3> + +<p>信令是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程。 关于WebRTC的信令流程最重要的一点是：<strong>信令在规范中并没有定义。</strong>所以开发者需要自己决定如何实现这个过程。开发者可以为应用程序引擎选择任意的信息协议（如SIP或XMPP），任意双向通信信道（如WebSocket或XMLHttpRequest)与持久连接服务器的API（如<a href="https://developers.google.com/appengine/docs/python/channel/overview" style="line-height: 1.5; text-decoration: none;" title="https://developers.google.com/appengine/docs/python/channel/overview">Google Channel API</a><span style="line-height: 1.5;">）一起工作。</span></p> + +<p><span style="line-height: 1.5;">你可能会想，为什么这么一个对于建立WebRTC连接至关重要的基本过程居然没有定义在规范里？ 答案很简单：由于两个设备无法直接相互联系，规范无法预测WebRTC的所有可能用例，因此更明智的做法就是让开发人员们自己选择合适的网络技术和消息传递协议。</span></p> + +<p><span style="line-height: 1.5;">尤其是如果一个开发人员已经有了一个连接两个设备的方法，那也没有必要强迫他们就为了WebRTC使用另一个规范定义的方法。 由于WebRTC没有生活在真空中，所以可能还有其他的连接，因此，如果可以使用已有的连接通道，就可以避免添加额外的连接通道。</span></p> + +<p>为了交换信令信息，您可以选择通过WebSocket连接来回发送JSON对象，或者您可以在适当的通道（Channel）上使用XMPP或SIP，或者您可以通过HTTPS使用XMLHttpRequest进行轮询或者其他任何你可以想出来的技术组合。你甚至可以使用电子邮件作为信号通道。</p> + +<p>还值得注意的是，用于执行信令的信道甚至不需要通过网络。 一个Peer可以输出一个数据对象，这个数据对象可以被打印出来，然后物理携带（步行或由信鸽）直到进入另一个设备，然后由该设备输出响应，并以同种方式返回， 直到WebRTC对等连接打开。 这将带来非常高的延迟，但也是可以做到的。</p> + +<h4 id="信令期间交换的信息">信令期间交换的信息</h4> + +<p>信令期间需要交换的信息有三种基本类型：</p> + +<ul> + <li>控制消息：用于设置、打开、关闭通信通道并处理错误。</li> + <li>为了建立连接所需的信息：设备间能够彼此交谈所需的IP寻址和端口信息。</li> + <li>媒体能力协商：交互双方可以理解哪些编解码器和媒体数据格式？ 这些都需要在WebRTC会议开始之前达成一致。</li> +</ul> + +<p>只有在信令成功完成之后，打开WebRTC对等连接的过程才真正开始。</p> + +<p>值得注意的是，在信令期间，信令服务器实际上不需要理解两个设备之间交换的数据或者对这些数据做任何处理。 信令服务器本质上就是一个中继器：两端连接的公共点，两端都知道它们的信令数据可以通过这个点来传输。 服务器不需要以任何方式对此信息做出反应。</p> + +<h4 id="信令过程">信令过程</h4> + +<p>为了开启一个WebRTC会话，以下事件需要依次发生：</p> + +<ol> + <li>每个Peer创建一个RTCPeerConnection对象，用来表示其WebRTC会话端。</li> + <li>每个Peer建立一个icecandidate事件的响应程序，用来在监测到该事件时将这些candidates通过信令通道发送给另一个Peer。</li> + <li>每个Peer建立一个track事件的响应程序，这个事件会在远程Peer添加一个track到其stream上时被触发。这个响应程序应将tracks和其消受者联系起来，例如{{HTMLElement("video")}}元素。</li> + <li>呼叫者创建并与接收者共享一个唯一的标识符或某种令牌，使得它们之间的呼叫可以由信令服务器上的代码来识别。此标识符的确切内容和形式取决于您。</li> + <li>每个Peer连接到一个约定的信令服务器，如WebSocket服务器，他们都知道如何与之交换消息。</li> + <li>每个Peer告知信令服务器他们想加入同一WebRTC会话（由步骤4中建立的令牌标识）。</li> + <li><em>描述，候选地址等 -- 之后会有更多</em></li> +</ol> + +<h2 id="ICE_重连"><strong>ICE 重连</strong></h2> + +<p>有时，在WebRTC会话的整个生命周期内，网络条件会发生变化。 其中一个用户可能会从蜂窝网络转移到WiFi网络，或者网络可能会变得拥塞。 当这种情况发生时，ICE代理可以选择执行ICE重连。 在这个过程中网络连接会进行重新协商，与执行初始ICE协商的方式完全相同，除了：媒体继续流过原始网络连接直到新的开始运行。 然后媒体转移到新的网络连接，旧的关闭。</p> + +<p>不同的浏览器支持在不同情况下的进行ICE重连。 例如，并不是所有的浏览器都会因为网络拥塞执行ICE重连。</p> + +<p>ICE重连有两个级别：<strong>全ICE重连</strong>会导致会话中的所有媒体流重新协商。 <strong>部分ICE重连</strong>允许ICE重新协商特定媒体流，而不是所有媒体流进行重新协商。 然而，有些浏览器还不支持部分ICE重启。 <<<你如何触发每一个？>>></p> + +<p>如果您需要以某种方式更改连接的配置（例如更改为不同的ICE服务器集），您可以调用RTCPeerConnection.setConfiguration()设置新的RTCConfiguration字典，然后重新启动ICE。</p> + +<p>要明确触发ICE重新启动，只需通过调用RTCPeerConnection.createOffer()启动一个协商过程，同时指定iceRestart选项为true。 然后就像平时那样处理连接过程即可。</p> + +<h2 id="发送">发送</h2> + +<h3 id="getUserMedia（获取用户媒体）">getUserMedia（获取用户媒体）</h3> + +<p>LocalMediaStream object</p> + +<h2 id="接收">接收</h2> + +<p>WebRTC 在Firefox浏览器的偏好选择选项是隐藏的。可以到 <a href="/about:config" title="/about:config">about:config</a> 这个页面设置 'media.navigator.enabled' 为 'true'。</p> + +<div class="note"> +<p>在Source tree 中有一些测试文件可以提供给您关于WebRTC如何工作的一个想法。具体例子请查看: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>。您也可以尝试 <a href="http://webrtc-demo.herokuapp.com/mozdemo">服务器demo</a> ，源代码： <a href="https://github.com/anantn/webrtc-demo/">server source</a>。</p> +</div> + +<p> </p> diff --git a/files/zh-cn/web/api/webrtc_api/webrtc_basics/index.html b/files/zh-cn/web/api/webrtc_api/webrtc_basics/index.html deleted file mode 100644 index 67464bdbd1..0000000000 --- a/files/zh-cn/web/api/webrtc_api/webrtc_basics/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: WebRTC basics -slug: Web/API/WebRTC_API/WebRTC_basics -translation_of: Web/API/WebRTC_API/Signaling_and_video_calling -translation_of_original: Web/API/WebRTC_API/WebRTC_basics ---- -<p>{{WebRTCSidebar}}</p> - -<div class="summary"> -<p>当你理解 <a href="/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC 架构</a>之后, 你就可以阅读本篇文章了。本篇文章将带领你贯穿整个跨浏览器 RTC 应用的创建过程。到本章结束的时候，你就拥有了一个可以运行的点对点的数据通道和媒体通道。</p> -</div> - -<div class="note"> -<p><strong>本页的案例过期了! 不要再尝试他们了。</strong></p> -</div> - -<h2 id="注意">注意</h2> - -<p>由于近期 API 做了一些修改，一些比较老的案例需要修复，暂时不可用。</p> - -<ul> - <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li> - <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li> - <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li> -</ul> - -<p>当前可以正常工作的的案例是:</p> - -<ul> - <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li> -</ul> - -<p>正确的实现方式或许可以从<a href="http://w3c.github.io/webrtc-pc/">标准</a>中推断出来。</p> - -<p>本页包含的其余的过期的信息，在 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">bugzilla</a>。</p> - -<h2 id="Shims">Shims</h2> - -<p>就像你想的那样，这样前卫的 API 肯定需要浏览器前缀才可以，然后再将它转换成通用的变量。</p> - -<pre class="brush: js">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; -var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; -var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; -navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> - -<h2 id="RTCPeerConnection">RTCPeerConnection</h2> - -<p>这是使用 peer 创建连接的起始点。它接收一个配置选项，其中配置了用来创建连接的 ICE 服务器信息。</p> - -<pre class="brush: js">var pc = new RTCPeerConnection(configuration);</pre> - -<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> - -<p> {{domxref("RTCConfiguration")}} 对象包含了一些信息，这些信息是关于用来做 ICE 的 TURN 和 / 或 STUN 服务器的。这是用来确保大多数用户可以避免因 NAT 和防火墙导致的无法建立连接。</p> - -<pre class="brush: js">var configuration = { - iceServers: [ - {urls: "stun:23.21.150.121"}, - {urls: "stun:stun.l.google.com:19302"}, - {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} - ] -}</pre> - -<p>Google 运行了一个我们可以使用的<a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">公共 STUN 服务器</a>。我也在 http://numb.viagenie.ca/ 创建了一个免费的可以访问 TURN 服务器的账户。可能你也想这么做，你只要替换到你自己的许可证书就可以了。</p> - - - -<h2 id="ICECandidate">ICECandidate</h2> - - - -<p>创建好 PeerConnection 并传入可用的 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> 和 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> 之后，当 ICE 框架找到可以使用 Peer 创建连接的 “候选者”，会立即触发一个事件（onicecandidate）。这些 “候选者” 就是 ICECandidate, 而且他们会在 <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a> 事件中执行一个回调函数。</p> - -<pre class="brush: js" lang="javascript">pc.onicecandidate = function (e) { - // candidate exists in e.candidate - if (!e.candidate) return; - send("icecandidate", JSON.stringify(e.candidate)); -};</pre> - -<p>回调函数执行之后，我们必须使用信令通道 (signal channel) 将候选发送到其他的点。在 Chrome 中，ICE 框架一般会找到重复的候选者，所以，我一般只发送第一个，然后将处理函数删除。Firfox 中将候选者包含在了 Offer SDP 中。</p> - -<h2 id="Signal_Channel">Signal Channel</h2> - -<p>现在我们有了 ICE 候选，然后需要将它发送到我们的另一端，以让它知道如何跟我们建立连接。然而，现在有一个先有鸡还是先有蛋的问题。我们想要 PeerConnection 发送数据到另一端，但是在那之前我们需要先把元数据发送过去……</p> - -<p>现在就是用到信令通道（Signal Channel）的时候了。它的任何一个数据传输方法都允许两个端点之间交换信息。在本文中，我们将使用 <a href="http://firebase.com">FireBase</a>。因为它设置起来灰常简单，并且不需要任何主机或者服务器端的代码编写。</p> - -<p>现在我们想象只有两个两个方法：send()， 它将使用一个键，然后将数据赋值给它；recv() ，当一个键有值的时候会调用一个处理函数。</p> - -<p>数据库的结构就像下面这样：</p> - -<pre class="brush: js" lang="json">{ - "": { - "candidate:": … - "offer": … - "answer": … - } -}</pre> - -<p>连接会被 roomId 分割，然后会保存四条信息：发起者 (oferer) 的 ICE 候选、应答者 (answerer) 的 ICE 候选、offer SDP 和 answer SDP.</p> - -<h2 id="Offer">Offer</h2> - -<p>Offer SDP 是用来向另一端描述期望格式（视频, 格式, 解编码, 加密, 解析度, 尺寸 等等）的元数据。</p> - -<p>一次信息的交换需要从一端拿到 offer，然后另外一端接受这个 offer 然后返回一个 answer。</p> - -<pre class="brush: js" lang="javascript">pc.createOffer(function (offer) { - pc.setLocalDescription(offer, function() { - send("offer", JSON.stringify(pc.localDescription)); - }, errorHandler); -}, errorHandler, options);</pre> - -<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3> - -<p>创建 offer 的过程如果出现问题，就会执行这个函数，并且将错误的详细信息作为第一个参数。</p> - -<pre class="brush: js" lang="javascript">var errorHandler = function (err) { - console.error(err); -};</pre> - -<h3 id="options"><strong><code>options</code></strong></h3> - -<p>Offer SDP 的选项.</p> - -<pre class="brush: js" lang="javascript">var options = { - offerToReceiveAudio: true, - offerToReceiveVideo: true -};</pre> - -<p><code>offerToReceiveAudio/Video</code> 告诉另一端，你想接收视频还是音频。对于 DataChannel 来说，这些是不需要的。</p> - -<p>offer 创建好之后，我们必须将本地 SDP 设置进去，然后通过信令通道将它发送到另一端，之久就静静地等待另一端的 Answer SDP 吧.</p> - -<h2 id="Answer">Answer</h2> - -<p>Answer SDP 跟 offer 是差不多的，只不过它是作为相应的。有点像接电话一样。我们只能在接收到 offer 的时候创建一次 Answer.</p> - -<pre class="brush: js" lang="javascript">recv("offer", function (offer) { - offer = new SessionDescription(JSON.parse(offer)) - pc.setRemoteDescription(offer); - - pc.createAnswer(function (answer) { - pc.setLocalDescription(answer, function() { - send("answer", JSON.stringify(pc.localDescription)); - }, errorHandler); - }, errorHandler); -});</pre> - -<h2 id="DataChannel">DataChannel</h2> - -<p>我将首先阐述如何将 PeerConnection 用在 DataChannels API 上，并且如何在 peers 之间传输任意数据。</p> - -<p><em>注意：撰写这篇文章的时候，DataChannels 在 Chrome 和 Firefox 之间是无法互用的。Chrome 支持了一个类似的私有协议，这个协议将在不久被标准协议支持。</em></p> - -<pre class="brush: js" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> - -<p>offer 的创建者和 channel 的创建者应该是同一个 peer。 answer 的创建者将在 PeerConnection 的 ondatachannel 回调中接收到 这个 channel。你必须在创建了这个 offer 之后立即调用 createDataChannel()。</p> - -<h3 id="channelName"><strong><code>channelName</code></strong></h3> - -<p>这个字符串会作为 channel 名字的标签。注意：确保你 Channel 的名字中没有空格，否则在 Chrome 中调用 createAnswer() 将会失败。</p> - -<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3> - -<pre class="brush: js" lang="javascript">var channelOptions = {};</pre> - -<p>当前 Chrome 还不支持这些选项，所以你可以将这些选项留空。检查 RFC 以获取更多关于这些选项的信息。</p> - -<h3 id="Channel_事件和方法">Channel 事件和方法</h3> - -<h4 id="onopen"><strong><code>onopen</code></strong></h4> - -<p>当连接建立的时候会被执行。</p> - -<h4 id="onerror"><strong><code>onerror</code></strong></h4> - -<p>连接创建出错时执行。第一个参数是一个 error 对象。</p> - -<pre class="brush: js" lang="javascript">channel.onerror = function (err) { - console.error("Channel Error:", err); -};</pre> - -<h4 id="onmessage"><strong><code>onmessage</code></strong></h4> - -<pre class="brush: js" lang="javascript">channel.onmessage = function (e) { - console.log("Got message:", e.data); -}</pre> - -<p>这是连接的核心。当你接收到消息的时候，这个方法会执行。第一个参数是一个包含了数据、接收时间和其它信息的 event 对象。</p> - -<h4 id="onclose"><strong><code>onclose</code></strong></h4> - -<p>当连接关闭的时候执行。</p> - -<h3 id="绑定事件"><strong>绑定事件</strong></h3> - -<p>如果你是这个 channel 的创建者（offerer）, 你可以直接在通过 createChannel 创建的 DataChannel 上绑定事件。如果你是 answerer 你必须使用 PeerConnection 的 ondatachannel 回调去访问这个 channel。</p> - -<pre class="brush: js" lang="javascript">pc.ondatachannel = function (e) { - e.channel.onmessage = function () { … }; -};</pre> - -<p>这个 channel 可以在传递到回调函数中的 event 对象中以 e.channel 的方式访问。</p> - -<h4 id="send()"><strong><code>send()</code></strong></h4> - -<pre class="brush: js" lang="javascript">channel.send("Hi Peer!");</pre> - -<p>这个方法允许你直接传递数据到 peer！令人惊奇。你必须传递确保传递的数据是 String, Blob, ArrayBuffer 或者 ArrayBufferView 中的一种类型，所以，确保字符串化对象。</p> - -<h4 id="close()"><strong><code>close()</code></strong></h4> - -<p>在连接应该中止的时候关闭 channel。推荐在页面卸载的时候调用。</p> - -<h2 id="Media">Media</h2> - -<p>现在我们将会涉及到如何传递诸如音视频的媒体的话题。要显示音视频，你必须在文档中加入包含 autoplay 属性的 <video> 标签。</p> - -<h3 id="Get_User_Media">Get User Media</h3> - -<pre class="brush: js"><video id="preview" autoplay></video> - -var video = document.getElementById("preview"); -navigator.getUserMedia(constraints, function (stream) { - video.src = URL.createObjectURL(stream); -}, errorHandler);</pre> - -<p><strong><code>constraints</code></strong></p> - -<p>约定你想从用户获取到的媒体类型。</p> - -<pre class="brush: js" lang="javascript">var constraints = { - video: true, - audio: true -};</pre> - -<p>如果你只想进行音频聊天，移除 video 成员。</p> - -<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4> - -<p>当返回请求的媒体错误时被调用</p> - -<h3 id="Media_Events_and_Methods">Media Events and Methods</h3> - -<h4 id="addStream"><strong><code>addStream</code></strong></h4> - -<p>将从 getUserMedia 返回的流加入 PeerConnection。</p> - -<pre class="brush: js" lang="javascript">pc.addStream(stream);</pre> - -<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4> - -<pre class="brush: js"><video id="otherPeer" autoplay></video> - -var otherPeer = document.getElementById("otherPeer"); -pc.onaddstream = function (e) { - otherPeer.src = URL.createObjectURL(e.stream); -};</pre> - -<p>当连接建立并且其它的 peer 通过 addStream 将流加入到了连接中时会被调用。你需要另外的 <video> 标签去显示其它 peer 的媒体。</p> - -<p>第一个参数是包含了其它 peer 流媒体的 event 对象。</p> diff --git a/files/zh-cn/web/api/websocket/二进制类型/index.html b/files/zh-cn/web/api/websocket/binarytype/index.html index aad8e48fc2..b2ff5df09d 100644 --- a/files/zh-cn/web/api/websocket/二进制类型/index.html +++ b/files/zh-cn/web/api/websocket/binarytype/index.html @@ -1,6 +1,6 @@ --- title: WebSocket.binaryType -slug: Web/API/WebSocket/二进制类型 +slug: Web/API/WebSocket/binaryType tags: - 参考 - 属性 @@ -8,6 +8,7 @@ tags: - 网页套接字 - 网页接口 translation_of: Web/API/WebSocket/binaryType +original_slug: Web/API/WebSocket/二进制类型 --- <p>{{APIRef("Web Sockets API")}}</p> diff --git a/files/zh-cn/web/api/websockets_api/websocket_server_vb.net/index.html b/files/zh-cn/web/api/websockets_api/websocket_server_vb.net/index.html deleted file mode 100644 index 3969f9c5ea..0000000000 --- a/files/zh-cn/web/api/websockets_api/websocket_server_vb.net/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -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/web/api/window/afterprint_event/index.html b/files/zh-cn/web/api/window/afterprint_event/index.html new file mode 100644 index 0000000000..cdbd2aec80 --- /dev/null +++ b/files/zh-cn/web/api/window/afterprint_event/index.html @@ -0,0 +1,103 @@ +--- +title: afterprint +slug: Web/API/Window/afterprint_event +translation_of: Web/API/Window/afterprint_event +original_slug: Web/Events/afterprint +--- +<p>在相关联的文档已开始打印或打印预览已关闭之后, 触发 <code>afterprint</code>事件。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>使用 <code>addEventListener()</code>:</p> + +<pre class="brush: js notranslate">window.addEventListener('afterprint', (event) => { + console.log('After print'); +});</pre> + +<p>使用 <code>onafterprint</code> 时间监听属性：</p> + +<pre class="brush: js notranslate">window.onafterprint = (event) => { + console.log('After print'); +};</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#event-afterprint')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.afterprint_event")}}</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/beforeprint">beforeprint</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/beforeprint_event/index.html b/files/zh-cn/web/api/window/beforeprint_event/index.html new file mode 100644 index 0000000000..4846c902c9 --- /dev/null +++ b/files/zh-cn/web/api/window/beforeprint_event/index.html @@ -0,0 +1,101 @@ +--- +title: beforeprint +slug: Web/API/Window/beforeprint_event +translation_of: Web/API/Window/beforeprint_event +original_slug: Web/Events/beforeprint +--- +<p>当相关联的文档即将打印或预览以进行打印时，将触发beforeprint事件。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件目标 (DOM 树中的最顶层目标)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>时间类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可取消</td> + </tr> + </tbody> +</table> + +<h2 id="样例">样例</h2> + +<p>使用 <code>addEventListener()</code>：</p> + +<pre class="brush: js notranslate">window.addEventListener('beforeprint', (event) => { + console.log('Before print'); +});</pre> + +<p>使用 <code>onbeforeprint</code> 事件监听属性：</p> + +<pre class="brush: js notranslate">window.onbeforeprint = (event) => { + console.log('Before print'); +};</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#event-beforeprint')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.beforeprint_event")}}</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/afterprint">afterprint</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/beforeunload_event/index.html b/files/zh-cn/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..bd200d41ce --- /dev/null +++ b/files/zh-cn/web/api/window/beforeunload_event/index.html @@ -0,0 +1,105 @@ +--- +title: 'Window: beforeunload event' +slug: Web/API/Window/beforeunload_event +tags: + - Event + - Window + - beforeunload + - 事件 + - 参考 +translation_of: Web/API/Window/beforeunload_event +original_slug: Web/Events/beforeunload +--- +<p><span style="font-family: consolas,monaco,andale mono,monospace;">当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td> + </tr> + </tbody> +</table> + +<p>事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。</p> + +<p>根据规范，要显示确认对话框，事件处理程序需要在事件上调用{{domxref("Event.preventDefault()", "preventDefault()")}}。</p> + +<p>但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：</p> + +<ul> + <li>将字符串分配给事件的<code>returnValue</code>属性</li> + <li> + <p>从事件处理程序返回一个字符串。</p> + </li> +</ul> + +<p><span>某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。</span></p> + +<p>为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在<code>beforeunload</code>事件中创建的提示，甚至根本不会显示它们。</p> + +<p>将事件处理程序/监听器加到<code>window</code>或 <code>document</code>的<code>beforeunload</code>事件后，将阻止浏览器使用内存中的页面导航缓存，例如<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching">Firefox的Back-Forward缓存</a>或<a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit的Page Cache</a>。</p> + +<p>HTML规范指出在此事件中调用{{domxref("window.alert()")}}，{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法，可能会失效。更多详细信息，请参见<a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts">HTML规范</a>。</p> + +<h2 id="示例">示例</h2> + +<p>HTML规范指出作者应该使用 {{domxref("Event.preventDefault()")}} 而非 {{domxref("Event.returnValue")}}，然而，不是所有浏览器都支持这么做。</p> + +<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) => { + // Cancel the event as stated by the standard. + event.preventDefault(); + // Chrome requires returnValue to be set. + event.returnValue = ''; +}); +</pre> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col"><strong>规范</strong></th> + <th scope="col"><strong>状态</strong></th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</div> + +<p>{{Compat("api.Window.beforeunload_event")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>相关事件：{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li> + <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li> + <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/window.blur()/index.html b/files/zh-cn/web/api/window/blur/index.html index 0aebdbb367..fa3a0742cb 100644 --- a/files/zh-cn/web/api/window/window.blur()/index.html +++ b/files/zh-cn/web/api/window/blur/index.html @@ -1,7 +1,8 @@ --- title: Window.blur() -slug: Web/API/Window/Window.blur() +slug: Web/API/Window/blur translation_of: Web/API/Window/blur +original_slug: Web/API/Window/Window.blur() --- <p>{{APIRef}}</p> diff --git a/files/zh-cn/web/api/window/domcontentloaded_event/index.html b/files/zh-cn/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..8452eeb2e6 --- /dev/null +++ b/files/zh-cn/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,129 @@ +--- +title: DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event +tags: + - DOMContentLoaded + - Window.open() + - load + - window.onload +translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded +--- +<p>当初始的 <strong>HTML </strong>文档被完全加载和解析完成之后，<strong><code>DOMContentLoaded</code> </strong>事件被触发，而无需等待样式表、图像和子框架的完全加载。</p> + +<p>模拟的css文件：CSS.php</p> + +<pre class="notranslate"><?php +sleep(3);</pre> + +<p>测试代码：</p> + +<pre class="notranslate"><link rel="stylesheet" href="css.php"> +<script> +document.addEventListener('DOMContentLoaded',function(){ + console.log('3 seconds passed'); +}); +</script></pre> + +<p>如果将link置于script之后，就会立即打印。</p> + +<p>{{Note("同步 JavaScript 会暂停 DOM 的解析。")}}</p> + +<p>{{Note("还有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪")}}</p> + +<h2 id="加速中">加速中</h2> + +<p>如果您希望 DOM 在用户请求页面后尽可能快地解析，你可以做的一些事情是把你的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript 异步化</a> 以及 <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">优化样式表的加载</a>, 由于被并行加载而减慢页面加载，从主 html 文档“窃取”流量。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0pt 0pt 0pt 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">是</dd> + <dt style="float: left; text-align: right; width: 120px;">能否取消</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">能 (尽管一个简单的事件被指定为不可取消)</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">Document</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">无.</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否冒泡.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否可取消默认行为.</td> + </tr> + </tbody> +</table> + +<h2 id="示例" style="margin-bottom: 20px; font-size: 28px; line-height: 28px;">示例</h2> + +<pre class="notranslate"><code><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); +</script></code></pre> + +<pre class="notranslate"><code><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); + + for(var i=0; i<1000000000; i++){ + // </code>这个同步脚本将延迟DOM的解析。 + // 所以DOMContentLoaded事件稍后将启动。 +<code> } </code><code> +</script></code></pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p> + +<p><span>至少从Gecko 1.9.2,Chrome 6,以及Safari 4开始,就已经实现了</span><span>该事件的</span><span>冒泡行为.</span></p> + +<h3 id="兼容不支持该事件的浏览器">兼容不支持该事件的浏览器</h3> + +<p>在IE8中,可以使用<code>readystatechange</code>事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次<code>document.documentElement.doScroll("left")来检测这一状态，</code>因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。</p> + +<p>诸如jQuery这样的通用JS库，会提供跨浏览器的方法来检测DOM是否加载完成。也有其他专门实现该功能的脚本:<a href="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js" title="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js">contentloaded.js</a> (只能添一个时间监听函数)以及<a href="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js" title="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js">jquery.documentReady.js</a> (并不依赖jQuery,虽然名字中有jquery).</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> + <li><a href="https://codepen.io/gildata/pen/VrzXOb">DOMContentLoaded demo</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/getattention/index.html b/files/zh-cn/web/api/window/getattention/index.html deleted file mode 100644 index f17531eb18..0000000000 --- a/files/zh-cn/web/api/window/getattention/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Window.getAttention() -slug: Web/API/Window/getAttention -translation_of: Web/API/Window/getAttention ---- -<div>{{ ApiRef() }}</div> - -<p>The <code><strong>Window.getAttention()</strong></code> method attempts to get the user's attention. The mechanism for this happening depends on the specific operating system and window manager.</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox">window.getAttention(); -</pre> - -<h2 id="Notes">Notes</h2> - -<p>On Windows, the taskbar button for the window flashes, if this hasn't been disabled by the user.</p> - -<p>On Linux, the behaviour varies from window manager to window manager - some flash the taskbar button, others focus the window immediately. This may be configurable as well.</p> - -<p>On Macintosh, the icon in the upper right corner of the desktop flashes.</p> - -<p>The function is disabled for web content. Neither Gecko nor Internet Explorer supports this feature now for web content. <code>getAttention</code> will still work when used from <a href="en/Chrome">chrome</a> in a Gecko application.</p> - -<h2 id="Specification">Specification</h2> - -<p>DOM Level 0. Not part of specification.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Window.getAttention")}}</p> diff --git a/files/zh-cn/web/api/window/load_event/index.html b/files/zh-cn/web/api/window/load_event/index.html new file mode 100644 index 0000000000..7f784a47f1 --- /dev/null +++ b/files/zh-cn/web/api/window/load_event/index.html @@ -0,0 +1,162 @@ +--- +title: load +slug: Web/API/Window/load_event +tags: + - load +translation_of: Web/API/Window/load_event +original_slug: Web/Events/load +--- +<p>{{APIRef}}</p> + +<p>当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发<code>load</code>事件。</p> + +<p>它与{{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>否</td> + </tr> + <tr> + <th scope="row">能否取消</th> + <td>否</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers/onload", "onload")}}</td> + </tr> + </tbody> +</table> + +<h2 id="用法">用法</h2> + +<p>当页面及资源完全加载后在控制台打印一段信息：</p> + +<pre class="brush: js notranslate">window.addEventListener('load', (event) => { + console.log('page is fully loaded'); +});</pre> + +<p>也可以使用<code>onload</code>实现：</p> + +<pre class="brush: js notranslate">window.onload = (event) => { + console.log('page is fully loaded'); +};</pre> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} +</pre> +</div> + +<h3 id="JS">JS</h3> + +<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-load', 'load')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#delay-the-load-event', 'load event')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>此链接指向加载文档结束时执行步骤中的部分。“load”事件也会在许多元素上触发。 请注意，规范中有很多地方涉及到可以"<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">延迟加载事件</a>"的内容。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p> +</div> + +<p>{{Compat("api.Window.load_event")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>相关事件: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> +</ul> diff --git a/files/zh-cn/web/api/window/onmouseup/index.html b/files/zh-cn/web/api/window/onmouseup/index.html deleted file mode 100644 index 03a4b116b8..0000000000 --- a/files/zh-cn/web/api/window/onmouseup/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: window.onmouseup -slug: Web/API/Window/onmouseup -translation_of: Web/API/GlobalEventHandlers/onmouseup -translation_of_original: Web/API/Window/onmouseup ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>当前窗口的mouseup事件的事件句柄.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">window.onmouseup = <em>funcRef</em>; -</pre> -<h3 id="Parameters" name="Parameters">参数</h3> -<ul> - <li><code>funcRef</code> 是个函数引用</li> -</ul> -<h3 id="Example" name="Example">例子</h3> -<pre>window.onmouseup = doFunc; -</pre> -<pre><html> -<head> - -<title>onmouseup测试</title> - -<script type="text/javascript"> - -window.onmouseup = mouseup; - -function mouseup() -{ - alert("检测到mouseup事件!"); -} -</script> -</head> - -<body> -<p>在页面上按下鼠标中某个键,保持几秒后松开.mouseup事件会在你松开鼠标时触发</p> -</body> -</html> -</pre> -<h3 id="Specification" name="Specification">规范</h3> -<p>没有任何公开的标准</p> -<p>{{ languages( { "ja": "ja/DOM/window.onmouseup" ,"en": "en/DOM/window.onmouseup" } ) }}</p> diff --git a/files/zh-cn/web/api/window/onscroll/index.html b/files/zh-cn/web/api/window/onscroll/index.html deleted file mode 100644 index af48e1575f..0000000000 --- a/files/zh-cn/web/api/window/onscroll/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: window.onscroll -slug: Web/API/Window/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: Web/API/Window/onscroll ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">概述</h3> -<p>为当前页面的页面滚动事件添加事件处理函数.</p> -<h3 id="Syntax" name="Syntax">语法</h3> -<pre class="eval">window.onscroll = <em>funcRef</em>; -</pre> -<ul> - <li><code>funcRef</code> 是个函数类型的对象引用或者匿名函数.</li> -</ul> -<h3 id="Example" name="Example">例子</h3> -<pre class="brush: js">window.onscroll = function (e) { - // 当页面的滚动条滚动时,会执行这里的代码 -} -</pre> -<pre class="brush: html"><html> -<head> - -<title>onscroll test</title> - -<script type="text/javascript"> - -window.onscroll = scroll; - -function scroll() -{ - alert("检测到页面滚动事件:"+window.pageXOffset+" "+window.pageYOffset); - // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高. -} -</script> -</head> - -<body> -<p>Resize the window</p> -<p>to a very small size,</p> -<p>and use the scrollbars</p> -<p>to move around the page content</p> -<p>in the window.</p> -</body> -</html> -</pre> -<h3 id="Notes" name="Notes">备注</h3> -<p>{{ Bug("189308") }}, 在旧版本的Gecko中(Gecko 1.8/Firefox 1.5之前), scroll 事件只会在用户拖动滚动条时发生,使用方向键和鼠标滚轮滚动页面则不会触发该事件.</p> -<p>当 window.scrollX/scrollY 不为 0时,意味着用户或者网页脚本已经执行了窗口的滚动行为.</p> -<h3 id="Specification" name="Specification">规范</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> -</ul> -<p>{{ languages( { "en": "en/DOM/window.onscroll"} ) }}</p> diff --git a/files/zh-cn/web/api/window/pageshow_event/index.html b/files/zh-cn/web/api/window/pageshow_event/index.html new file mode 100644 index 0000000000..482e1b567e --- /dev/null +++ b/files/zh-cn/web/api/window/pageshow_event/index.html @@ -0,0 +1,144 @@ +--- +title: pageshow +slug: Web/API/Window/pageshow_event +translation_of: Web/API/Window/pageshow_event +original_slug: Web/Events/pageshow +--- +<p>当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">事件冒泡</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">事件取消</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">事件源</dt> + <dd style="margin: 0 0 0 120px;">Document (dispatched on Window)</dd> + <dt style="float: left; text-align: right; width: 120px;">默认操作</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>persisted</code> {{readonlyInline}}</td> + <td>{{jsxref("boolean")}}</td> + <td>表示网页是否是来自缓存.</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>以下示例将会在控制台打印由前进/后退按钮以及load事件触发后引起的pageshow事件：</p> + +<pre>window.addEventListener('pageshow', function(event) { + console.log('after , pageshow :',event); +}); + + +window.addEventListener('load', function() { + console.log('before'); +}); +</pre> + + + + + +<p>不规范的写法，你同样可以将这个事件当做一个属性添加到body标签，类似于onload</p> + +<pre><body onload="myonload()" onpageshow="mypageshowcode()"></pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("4")}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>11</td> + <td>15</td> + <td>5</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>2.3</td> + <td>{{CompatUnknown()}}</td> + <td>11</td> + <td>35</td> + <td>5.1</td> + </tr> + </tbody> +</table> + + +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/pagehide"><code>pagehide</code></a></li> + <li><a href="/en-US/docs/Using_Firefox_1.5_caching#pageshow_event">Using Firefox 1.5 caching — pageshow event</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/restore/index.html b/files/zh-cn/web/api/window/restore/index.html deleted file mode 100644 index 140827ddb9..0000000000 --- a/files/zh-cn/web/api/window/restore/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Window.restore() -slug: Web/API/Window/restore -translation_of: Web/API/Window/moveTo -translation_of_original: Web/API/Window/restore ---- -<p>{{APIRef}}</p> - -<p>这个方法现在已经失效，不过可以使用下面的方法代替：</p> - -<p>{{domxref("window.moveTo")}}({{domxref("window.screenX")}}, {{domxref("window.screenY")}});</p> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - - - -<p>{{Compat("api.Window.restore")}}</p> diff --git a/files/zh-cn/web/api/window/unhandledrejection_event/index.html b/files/zh-cn/web/api/window/unhandledrejection_event/index.html new file mode 100644 index 0000000000..8628a3e11f --- /dev/null +++ b/files/zh-cn/web/api/window/unhandledrejection_event/index.html @@ -0,0 +1,119 @@ +--- +title: unhandledrejection +slug: Web/API/Window/unhandledrejection_event +tags: + - API + - JavaScript + - Promise + - unhandledrejection + - 事件 + - 参考 +translation_of: Web/API/Window/unhandledrejection_event +original_slug: Web/Events/unhandledrejection +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">当{{jsxref("Promise")}} 被 reject 且没有 reject 处理器的时候，会触发 <strong><code>unhandledrejection</code></strong> 事件；这可能发生在 {{domxref("window")}} 下，但也可能发生在 {{domxref("Worker")}} 中。</span> 这对于调试回退错误处理非常有用。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>No</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("PromiseRejectionEvent")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}</td> + </tr> + </tbody> +</table> + +<h2 id="使用备注">使用备注</h2> + +<p><code>unhandledrejection</code> 继承自 {{domxref("PromiseRejectionEvent")}}，而 {{domxref("PromiseRejectionEvent")}} 又继承自 {{domxref("Event")}}。因此<code>unhandledrejection</code> 含有 <code>PromiseRejectionEvent</code> 和 <code>Event</code> 的属性和方法。</p> + +<h2 id="例子">例子</h2> + +<p>Here we have a few examples showing ways you can make use of the <code>unhandledrejection</code> event. The event includes two useful pieces of information:</p> + +<p>我们将通过几个例子来展示 <code>unhandledrejection</code> 事件的使用方式。该事件主要包含两部分有用的信息：</p> + +<dl> + <dt><code>promise</code></dt> + <dd>The actual {{jsxref("Promise")}} which was rejected with no handler available to deal with the rejection.</dd> + <dd>特定的 {{jsxref("Promise")}} 被 reject 而没有被相应的异常处理方法所处理时</dd> + <dt><code>reason</code></dt> + <dd>The reason that would have been passed into the rejection handler if one had existed. See {{jsxref("Promise.catch", "catch()")}} for details.</dd> + <dd>将会传入异常处理方法中的错误原因（如果存在），查看 {{jsxref("Promise.catch", "catch()")}} 相关以获取更多细节。</dd> +</dl> + +<h3 id="基本的异常上报">基本的异常上报</h3> + +<p>此示例只是将有关未处理的 Promise rejection 信息打印到控制台。</p> + +<pre class="brush:js; notranslate">window.addEventListener("unhandledrejection", event => { + console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); +}); +</pre> + +<p>您还可以使用 {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}} 事件处理程序属性来设置事件侦听器:</p> + +<pre class="brush: js notranslate">window.onunhandledrejection = event => { + console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); +}; +</pre> + +<h3 id="防止默认处理">防止默认处理</h3> + +<p>许多环境(例如 {{Glossary("Node.js")}} ) 默认情况下会向控制台打印未处理的 Promise rejections。您可以通过添加一个处理程序来防止 <code>unhandledrejection</code> 这种情况的发生，该处理程序除了您希望执行的任何其他任务之外，还可以调用 {{domxref("Event.preventDefault()", "preventDefault()")}} 来取消该事件，从而防止该事件冒泡并由运行时的日志代码处理。这种方法之所以有效，是因为 <code>unhandledrejection</code> 是可以取消的。</p> + +<pre class="brush:js; notranslate">window.addEventListener('unhandledrejection', function (event) { + // ...您的代码可以处理未处理的拒绝... + + // 防止默认处理（例如将错误输出到控制台） + + event.preventDefault(); +}); +</pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看https://github.com/mdn/browser-compat-data 并向我们发送请求请求。</div> + +<p>{{Compat("api.Window.unhandledrejection_event")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li> + <li>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}} event handler property<sup><a href="#seealso-footnote-1">1</a></sup></li> + <li>{{Event("rejectionhandled")}}</li> + <li>{{domxref("Promise")}}</li> +</ul> + +<p><a id="seealso-footnote-1" name="seealso-footnote-1">[1]</a> The corresponding event handler property is defined on the {{domxref("WindowEventHandlers")}} mixin, which is available on both the {{domxref("Window")}} interface and all types of {{domxref("Worker")}} interfaces.</p> diff --git a/files/zh-cn/web/api/window/unload_event/index.html b/files/zh-cn/web/api/window/unload_event/index.html new file mode 100644 index 0000000000..dc03afe51f --- /dev/null +++ b/files/zh-cn/web/api/window/unload_event/index.html @@ -0,0 +1,126 @@ +--- +title: unload +slug: Web/API/Window/unload_event +tags: + - Window + - events + - unload +translation_of: Web/API/Window/unload_event +original_slug: Web/Events/unload +--- +<p>{{APIRef}}</p> + +<p>当文档或一个子资源正在被卸载时, 触发 <strong>unload</strong>事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">可冒泡（Bubbles）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">可取消（Cancelable）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">接口（Interface）</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理程序属性（Event handler property）</th> + <td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td> + </tr> + </tbody> +</table> + +<p>它在下面两个事件后被触发:</p> + +<ol> + <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (可取消默认行为的事件)</li> + <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li> +</ol> + +<p>文档处于以下状态：</p> + +<ul> + <li>所有资源仍存在 (图片, iframe 等.)</li> + <li>对于终端用户所有资源均不可见</li> + <li>界面交互无效 (<code>window.open</code>, <code>alert</code>, <code>confirm</code> 等.)</li> + <li>错误不会停止卸载文档的过程</li> +</ul> + +<p>请注意<code>unload</code>事件也遵循文档树:父iframe会在子iframe卸载前卸载(参考下面的例子).</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <title>Parent Frame</title> + <script> + window.addEventListener('beforeunload', function(event) { + console.log('I am the 1st one.'); + }); + window.addEventListener('unload', function(event) { + console.log('I am the 3rd one.'); + }); + </script> + </head> + <body> + <iframe src="child-frame.html"></iframe> + </body> +</html></pre> + +<p>下面是 <code>child-frame.html的内容</code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <title>Child Frame</title> + <script> + window.addEventListener('beforeunload', function(event) { + console.log('I am the 2nd one.'); + }); + window.addEventListener('unload', function(event) { + console.log('I am the 4th and last one…'); + }); + </script> + </head> + <body> + ☻ + </body> +</html></pre> + +<p>当父iframe被卸载，事件将按<code>console.log()</code> 消息描述的顺序触发。</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-unload', 'unload')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Window.unload_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关事件： {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}</li> + <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li> +</ul> diff --git a/files/zh-cn/web/api/window/url/index.html b/files/zh-cn/web/api/window/url/index.html deleted file mode 100644 index 3ca38bbd39..0000000000 --- a/files/zh-cn/web/api/window/url/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -tags: - - Window.URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p><strong>Window.URL</strong> 属性返回一个对象，它提供了用于创建和管理对象URLs的静态方法。它也可以作为一个构造函数被调用来构造 {{domxref("URL")}} 对象。</p> - -<div class="note"> -<p>Note: 此功能在Web Workers中可用。</p> -</div> - -<h2 id="语法">语法</h2> - -<p>调用一个静态方法：</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>构造一个新对象：</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 从 Gecko 2 (Firefox 4) 到 包括Gecko 18, Gecko 返回一个不标准的nsIDOMMozURLProperty内部类型. 在实践中, 这是没有意义的.</p> - -<p>[2] 在非标准名称webkitURL下实现。</p> - -<h2 id="也可以看看">也可以看看</h2> - -<ul> - <li>{{domxref("URL")}} API.</li> -</ul> diff --git a/files/zh-cn/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/zh-cn/web/api/windowbase64/base64_encoding_and_decoding/index.html deleted file mode 100644 index 5da5d1e0f4..0000000000 --- a/files/zh-cn/web/api/windowbase64/base64_encoding_and_decoding/index.html +++ /dev/null @@ -1,605 +0,0 @@ ---- -title: Base64的编码与解码 -slug: Web/API/WindowBase64/Base64_encoding_and_decoding -translation_of: Glossary/Base64 ---- -<p><strong>Base64 </strong>是一组相似的<a href="https://en.wikipedia.org/wiki/Binary-to-text_encoding">二进制到文本</a>（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。<em>Base64</em> 这个词出自一种 <a href="https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding">MIME 数据传输编码</a>。 </p> - -<p>Base64编码普遍应用于需要通过被设计为处理文本数据的媒介上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。Base64 也被一些应用（包括使用 <a href="https://en.wikipedia.org/wiki/MIME">MIME</a> 的电子邮件）和在 <a href="/zh-CN/docs/XML">XML</a> 中储存复杂数据时使用。 </p> - -<p>在 JavaScript 中，有两个函数被分别用来处理解码和编码 <em>base64</em> 字符串：</p> - -<ul> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> -</ul> - -<p><code>atob()</code> 函数能够解码通过base-64编码的字符串数据。相反地，<code>btoa()</code> 函数能够从二进制数据“字符串”创建一个base-64编码的ASCII字符串。</p> - -<p><code>atob()</code> 和 <code>btoa()</code> 均使用字符串。如果你想使用 <code><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffers</a></code>，请参阅后文。</p> - -<h4 id="编码尺寸增加">编码尺寸增加</h4> - -<p>每一个Base64字符实际上代表着6比特位。因此，3字节（一字节是8比特，3字节也就是24比特）的字符串/二进制文件可以转换成4个Base64字符(4x6 = 24比特)。</p> - -<p>这意味着Base64格式的字符串或文件的尺寸约是原始尺寸的133%（增加了大约33%）。如果编码的数据很少，增加的比例可能会更高。例如：字符串<code>"a"</code>的<code>length === 1</code>进行Base64编码后是<code>"YQ=="</code>的<code>length === 4</code>，尺寸增加了300%。</p> - - - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">文档</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt> - <dd><small><code>data</code> URIs, 定义于 <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>，用于在文档内嵌入小的文件。</small></dd> - <dt><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt> - <dd><small>维基百科上关于 Base64 的文章。</small></dd> - <dt>{{domxref("WindowBase64.atob","atob()")}}</dt> - <dd><small>解码一个Base64字符串。</small></dd> - <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt> - <dd><small>从一个字符串或者二进制数据编码一个Base64字符串。</small></dd> - <dt><a href="#The_.22Unicode_Problem.22">"Unicode 问题"</a></dt> - <dd><small>在大多数浏览器里里，在一个Unicode字符串上调用btoa()会造成一个<code>Character Out Of Range异常。这一段写了一些解决方案。</code></small></dd> - <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt> - <dd><small>Mozilla支持的URI schemes列表。</small></dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt> - <dd>这篇文章发布了一个我们做的库，目的在于： - <ul> - <li>为字符串创建一个类C接口 (i.e. array of characters codes —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> in JavaScript) ，基于JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> 接口。</li> - <li>为类字符串对象(目前为止为: <code>stringView</code>s) 创建一系列方法，它们<strong>严格按照数字数组</strong>工作，而不是不可变的字符串。</li> - <li>可用于其它Unicode编码，和默认的 <code><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString">DOMStrings</a>不同。</code></li> - </ul> - </dd> - </dl> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">查看所有...</a></span></p> - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">工具</h2> - - <ul> - <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Rewriting <code>atob()</code> and <code>btoa()</code> using <code>TypedArray</code>s and UTF-8</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - </ul> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></p> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关文章</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed arrays</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Unicode_问题">Unicode 问题</h2> - -<p>由于 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> 是16位编码的字符串，所以如果有字符超出了8位ASCII编码的字符范围时，在大多数的浏览器中对Unicode字符串调用 <code>window.btoa</code> 将会造成一个 <code>Character Out Of Range</code> 的异常。有很多种方法可以解决这个问题：</p> - -<ul> - <li><a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">the first method</a> consists in encoding JavaScript's native UTF-16 strings directly into base64 (fast, portable, clean)</li> - <li><a href="#Solution_2_–_JavaScript's_UTF-16_>_UTF-8_>_base64">the second method</a> consists in converting JavaScript's native UTF-16 strings to UTF-8 and then encode the latter into base64 (relatively fast, portable, clean)</li> - <li><a href="#Solution_3_–_JavaScript's_UTF-16_>_binary_string_>_base64">the third method</a> consists in encoding JavaScript's native UTF-16 strings directly into base64 via binary strings (very fast, relatively portable, very compact)</li> - <li><a href="#Solution_4_–_escaping_the_string_before_encoding_it">the fourth method</a> consists in escaping the whole string (with UTF-8, see {{jsxref("encodeURIComponent")}}) and then encode it (portable, non-standard)</li> - <li><a href="#Solution_5_–_rewrite_the_DOMs_atob()_and_btoa()_using_JavaScript's_TypedArrays_and_UTF-8">the fifth method</a> is similar to the second method, but uses third party libraries</li> -</ul> - -<h3 id="Solution_1_–_JavaScripts_UTF-16_>_base64">Solution #1 – JavaScript's UTF-16 => base64</h3> - -<p>A very fast and widely useable way to solve the unicode problem is by encoding JavaScript native UTF-16 strings directly into base64. Please visit the URL <code>data:text/plain;charset=utf-16;base64,OCY5JjomOyY8Jj4mPyY=</code> for a demonstration (copy the data uri, open a new tab, paste the data URI into the address bar, then press enter to go to the page). This method is particularly efficient because it does not require any type of conversion, except mapping a string into an array. The following code is also useful to get an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a> from a <em>Base64</em> string and/or viceversa (<a href="#Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="Appendix to Solution #1: Decode a Base64 string to Uint8Array or ArrayBuffer">see below</a>).</p> - -<pre class="brush: js notranslate">"use strict"; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities (#1) -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding -|*| -|*| Author: madmurphy -|*| -\*/ - -/* Array of bytes to base64 string decoding */ - -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - -} - -function base64DecToArr (sBase64, nBlockSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - } - } - - return aBytes; -} - -/* Base64 string to array encoding */ - -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - -} - -function base64EncArr (aBytes) { - - var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = ""; - - for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - /* Uncomment the following line in order to split the output in lines 76-character long: */ - /* - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - */ - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } - - return eqLen === 0 ? - sB64Enc - : - sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "=="); - -} -</pre> - -<h4 id="Tests">Tests</h4> - -<pre class="brush: js notranslate">var myString = "☸☹☺☻☼☾☿"; - -/* Part 1: Encode `myString` to base64 using native UTF-16 */ - -var aUTF16CodeUnits = new Uint16Array(myString.length); -Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = myString.charCodeAt(idx); }); -var sUTF16Base64 = base64EncArr(new Uint8Array(aUTF16CodeUnits.buffer)); - -/* Show output */ - -alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY=" - -/* Part 2: Decode `sUTF16Base64` to UTF-16 */ - -var sDecodedString = String.fromCharCode.apply(null, new Uint16Array(base64DecToArr(sUTF16Base64, 2).buffer)); - -/* Show output */ - -alert(sDecodedString); // "☸☹☺☻☼☾☿"</pre> - -<p>The produced string is fully portable, although represented as UTF-16. If you prefer UTF-8, see <a href="#Solution_2_–_JavaScript's_UTF-16_>_UTF-8_>_base64">the next solution</a>.</p> - -<h4 id="Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Appendix to <a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">Solution #1</a>: Decode a <em>Base64</em> string to <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a> or <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a></h4> - -<p>The functions above let us also create <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">uint8Arrays</a> or <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">arrayBuffers</a> from <em>base64</em>-encoded strings:</p> - -<pre class="brush: js notranslate">var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8) - -var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8) - -alert(myBuffer.byteLength);</pre> - -<div class="note"><strong>Note:</strong> The function <code>base64DecToArr(sBase64[, <em>nBlockSize</em>])</code> returns an <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> of bytes. If your aim is to build a buffer of 16-bit / 32-bit / 64-bit raw data, use the <code>nBlockSize</code> argument, which is the number of bytes which the <code>uint8Array.buffer.bytesLength</code> property must result to be a multiple of (<code>1</code> or omitted for ASCII, binary content, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">binary strings</a>, UTF-8-encoded strings; <code>2</code> for UTF-16 strings; <code>4</code> for UTF-32 strings).</div> - -<p>For a more complete library, see <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a> (source code <a href="https://github.com/madmurphy/stringview.js">available on GitHub</a>).</p> - -<h3 id="Solution_2_–_JavaScripts_UTF-16_>_UTF-8_>_base64">Solution #2 – JavaScript's UTF-16 => UTF-8 => base64</h3> - -<p>This solution consists in converting a JavaScript's native UTF-16 string into a UTF-8 string and then encoding the latter into base64. This also grants that converting a pure ASCII string to base64 always produces the same output as the native <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa" title="The documentation about this has not yet been written; please consider contributing!"><code>btoa()</code></a>.</p> - -<pre class="brush: js notranslate">"use strict"; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities (#2) -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding -|*| -|*| Author: madmurphy -|*| -\*/ - -/* Array of bytes to base64 string decoding */ - -function b64ToUint6 (nChr) { - - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; - -} - -function base64DecToArr (sBase64, nBlockSize) { - - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - } - } - - return aBytes; -} - -/* Base64 string to array encoding */ - -function uint6ToB64 (nUint6) { - - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; - -} - -function base64EncArr (aBytes) { - - var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = ""; - - for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - /* Uncomment the following line in order to split the output in lines 76-character long: */ - /* - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - */ - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } - - return eqLen === 0 ? - sB64Enc - : - sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "=="); - -} - -/* UTF-8 array to DOMString and vice versa */ - -function UTF8ArrToStr (aBytes) { - - var sView = ""; - - for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCharCode( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ - /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */ - (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ - (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ - (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ - (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ - (nPart - 192 << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart - ); - } - - return sView; - -} - -function strToUTF8Arr (sDOMStr) { - - var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; - - /* mapping... */ - - for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.charCodeAt(nMapIdx); - nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription... */ - - for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { - nChr = sDOMStr.charCodeAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else /* if (nChr <= 0x7fffffff) */ { - /* six bytes */ - aBytes[nIdx++] = 252 + (nChr >>> 30); - aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } - } - - return aBytes; - -}</pre> - -<h4 id="Tests_2">Tests</h4> - -<pre class="brush: js notranslate">/* Tests */ - -var sMyInput = "Base 64 \u2014 Mozilla Developer Network"; - -var aMyUTF8Input = strToUTF8Arr(sMyInput); - -var sMyBase64 = base64EncArr(aMyUTF8Input); - -alert(sMyBase64); // "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==" - -var aMyUTF8Output = base64DecToArr(sMyBase64); - -var sMyOutput = UTF8ArrToStr(aMyUTF8Output); - -alert(sMyOutput); // "Base 64 — Mozilla Developer Network"</pre> - -<h3 id="Solution_3_–_JavaScripts_UTF-16_>_binary_string_>_base64">Solution #3 – JavaScript's UTF-16 => binary string => base64</h3> - -<p>The following is the fastest and most compact possible approach. The output is exactly the same produced by <a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">Solution #1</a> (UTF-16 encoded strings), but instead of rewriting {{domxref("WindowBase64.atob","atob()")}} and {{domxref("WindowBase64.btoa","btoa()")}} it uses the native ones. This is made possible by the fact that instead of using typed arrays as encoding/decoding inputs this solution uses <a href="/en-US/docs/Web/API/DOMString/Binary">binary strings</a> as an intermediate format. It is a “dirty” workaround in comparison to <a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">Solution #1</a> (<a href="/en-US/docs/Web/API/DOMString/Binary">binary strings</a> are a grey area), however it works pretty well and requires only a few lines of code.</p> - -<pre class="brush: js notranslate">"use strict"; - -/*\ -|*| -|*| Base64 / binary data / UTF-8 strings utilities (#3) -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding -|*| -|*| Author: madmurphy -|*| -\*/ - -function btoaUTF16 (sString) { - - var aUTF16CodeUnits = new Uint16Array(sString.length); - Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = sString.charCodeAt(idx); }); - return btoa(String.fromCharCode.apply(null, new Uint8Array(aUTF16CodeUnits.buffer))); - -} - -function atobUTF16 (sBase64) { - - var sBinaryString = atob(sBase64), aBinaryView = new Uint8Array(sBinaryString.length); - Array.prototype.forEach.call(aBinaryView, function (el, idx, arr) { arr[idx] = sBinaryString.charCodeAt(idx); }); - return String.fromCharCode.apply(null, new Uint16Array(aBinaryView.buffer)); - -}</pre> - -<h4 id="Tests_3">Tests</h4> - -<pre class="brush: js notranslate">var myString = "☸☹☺☻☼☾☿"; - -/* Part 1: Encode `myString` to base64 using native UTF-16 */ - -var sUTF16Base64 = btoaUTF16(myString); - -/* Show output */ - -alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY=" - -/* Part 2: Decode `sUTF16Base64` to UTF-16 */ - -var sDecodedString = atobUTF16(sUTF16Base64); - -/* Show output */ - -alert(sDecodedString); // "☸☹☺☻☼☾☿" -</pre> - -<p>For a cleaner solution that uses typed arrays instead of binary strings, see solutions <a href="#Solution_1_–_JavaScript's_UTF-16_>_base64">#1</a> and <a href="#Solution_2_–_JavaScript's_UTF-16_>_UTF-8_>_base64">#2</a>.</p> - -<h3 id="Solution_4_–_escaping_the_string_before_encoding_it">Solution #4 – escaping the string before encoding it</h3> - -<pre class="brush:js notranslate">function b64EncodeUnicode(str) { - // first we use encodeURIComponent to get percent-encoded UTF-8, - // then we convert the percent encodings into raw bytes which - // can be fed into btoa. - return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, - function toSolidBytes(match, p1) { - return String.fromCharCode('0x' + p1); - })); -} - -b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -b64EncodeUnicode('\n'); // "Cg==" -</pre> - -<p>To decode the Base64-encoded value back into a String:</p> - -<pre class="brush: js notranslate">function b64DecodeUnicode(str) { - // Going backwards: from bytestream, to percent-encoding, to original string. - return decodeURIComponent(atob(str).split('').map(function(c) { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }).join('')); -} - -b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" -b64DecodeUnicode('Cg=='); // "\n" -</pre> - -<p><a href="https://git.daplie.com/Daplie/unibabel-js">Unibabel</a> implements common conversions using this strategy.</p> - -<h3 id="Solution_5_–_rewrite_the_DOMs_atob_and_btoa_using_JavaScripts_TypedArrays_and_UTF-8">Solution #5 – rewrite the DOMs <code>atob()</code> and <code>btoa()</code> using JavaScript's <code>TypedArray</code>s and UTF-8</h3> - -<p>Use a <a href="/en-US/docs/Web/API/TextEncoder">TextEncoder</a> polyfill such as <a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a> (also includes legacy windows, mac, and ISO encodings), <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a>, combined with a <a href="https://github.com/feross/buffer">Buffer</a> and a Base64 implementation such as <a href="https://github.com/beatgammit/base64-js">base64-js</a> or <a href="https://github.com/waitingsong/base64">TypeScript version of </a>base64-js for both modern browsers and Node.js.</p> - -<p>When a native <code>TextEncoder</code> implementation is not available, the most light-weight solution would be to use <a href="#Solution_3_–_JavaScript's_UTF-16_>_binary_string_>_base64">Solution #3</a> because in addition to being much faster, <a href="#Solution_3_–_JavaScript's_UTF-16_>_binary_string_>_base64">Solution #3</a> also works in IE9 "out of the box." Alternatively, use <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> with <a href="https://github.com/beatgammit/base64-js">base64-js</a>. Use the browser implementation when you can.</p> - -<p>The following function implements such a strategy. It assumes base64-js imported as <code><script type="text/javascript" src="base64js.min.js"/></code>. Note that TextEncoderLite only works with UTF-8.</p> - -<pre class="brush: js notranslate">function Base64Encode(str, encoding = 'utf-8') { - var bytes = new (typeof TextEncoder === "undefined" ? TextEncoderLite : TextEncoder)(encoding).encode(str); - return base64js.fromByteArray(bytes); -} - -function Base64Decode(str, encoding = 'utf-8') { - var bytes = base64js.toByteArray(str); - return new (typeof TextDecoder === "undefined" ? TextDecoderLite : TextDecoder)(encoding).decode(bytes); -} -</pre> - -<p><strong>注意</strong>: <a href="https://github.com/coolaj86/TextEncoderLite">TextEncoderLite</a> 不能正确处理四字节 UTF-8 字符， 比如 '\uD842\uDFB7' 或缩写为 '\u{20BB7}' 。参见 <a href="https://github.com/solderjs/TextEncoderLite/issues/16">issue </a><br> - 可使用 <a href="https://github.com/inexorabletash/text-encoding">text-encoding</a> 作为替代。</p> - -<p>某些场景下，以上经由 UTF-8 转换到 Base64 的实现在空间利用上不一定高效。当处理包含大量 U+0800-U+FFFF 区域间字符的文本时， UTF-8 输出结果长于 UTF-16 的，因为这些字符在 UTF-8 下占用三个字节而 UTF-16 是两个。在处理均匀分布 UTF-16 码点的 JavaScript 字符串时应考虑采用 UTF-16 替代 UTF-8 作为 Base64 结果的中间编码格式，这将减少 40% 尺寸。</p> - -<div class="standardNoteBlock"> -<p><strong>译者注</strong>：下为陈旧翻译片段</p> -</div> - -<ul> - <li>第一个是转义(escape)整个字符串然后编码这个它；</li> - <li>第二个是把UTF-16的 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> 转码为UTF-8的字符数组然后编码它。</li> -</ul> - -<h3 id="方案_1_–_编码之前转义escape字符串">方案 #1 – 编码之前转义(escape)字符串</h3> - -<pre class="brush:js notranslate">function b64EncodeUnicode(str) { - return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) { - return String.fromCharCode('0x' + p1); - })); -} - -b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" -</pre> - -<p>把base64转换回字符串</p> - -<pre class="notranslate"><code>function b64DecodeUnicode(str) { - return decodeURIComponent(atob(str).split('').map(function(c) { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); - }).join('')); -} - -b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" -b64DecodeUnicode('Cg=='); // "\n"</code></pre> - -<p><a href="https://github.com/coolaj86/unibabel-js">Unibabel</a> 是一个包含了一些使用这种策略的通用转换的库。</p> - -<h3 id="方案_6_–_用JavaScript的_TypedArray_和_UTF-8重写DOM的_atob_和_btoa">方案 #6 – 用JavaScript的 <code>TypedArray</code> 和 UTF-8重写DOM的 <code>atob()</code> 和 <code>btoa()</code></h3> - -<p>使用像<a href="https://github.com/inexorabletash/text-encoding">TextEncoding</a>(包含了早期(legacy)的windows，mac， 和 ISO 编码)，<a href="https://github.com/coolaj86/TextEncoderLite/blob/master/index.js">TextEncoderLite</a> 或者 <a href="https://github.com/feross/buffer">Buffer</a> 这样的文本编码器增强(polyfill)和Base64增强，比如<a href="https://github.com/beatgammit/base64-js/blob/master/index.js">base64-js</a> 或 <a href="https://github.com/waitingsong/base64">TypeScript 版本的 </a>base64-js （适用于长青浏览器和 Node.js）。</p> - -<p>最简单，最轻量级的解决方法就是使用 <a href="https://github.com/coolaj86/TextEncoderLite/blob/master/index.js">TextEncoderLite</a> 和 <a href="https://github.com/beatgammit/base64-js/blob/master/index.js">base64-js</a>.</p> - -<p>想要更完整的库的话，参见 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a>.</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> - <li><a href="/en-US/docs/data_URIs" title="/en-US/docs/data_URIs"><code>data</code> URIs</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">TypedArrays</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString">DOMString</a></li> - <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIURIFixup" title="/en-US/docs/XPCOM_Interface_Reference/nsIURIFixup"><code>nsIURIFixup()</code></a></li> - <li><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64"><code>Base64 on Wikipedia</code></a></li> -</ul> diff --git a/files/zh-cn/web/api/window/onbeforeunload/index.html b/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html index 78bed99eb9..c2ac5649b6 100644 --- a/files/zh-cn/web/api/window/onbeforeunload/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onbeforeunload/index.html @@ -1,7 +1,8 @@ --- title: window.onbeforeunload -slug: Web/API/Window/onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload translation_of: Web/API/WindowEventHandlers/onbeforeunload +original_slug: Web/API/Window/onbeforeunload --- <div>{{ApiRef}}</div> diff --git a/files/zh-cn/web/api/window/onhashchange/index.html b/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html index 0c7f3ebefa..e71dcdba5e 100644 --- a/files/zh-cn/web/api/window/onhashchange/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onhashchange/index.html @@ -1,12 +1,13 @@ --- title: window.onhashchange -slug: Web/API/Window/onhashchange +slug: Web/API/WindowEventHandlers/onhashchange tags: - HTML-DOM - Property - Reference - WindowEventHandlers translation_of: Web/API/WindowEventHandlers/onhashchange +original_slug: Web/API/Window/onhashchange --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/window/onpopstate/index.html b/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html index 6efc1ec835..54efcf6cf4 100644 --- a/files/zh-cn/web/api/window/onpopstate/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onpopstate/index.html @@ -1,7 +1,8 @@ --- title: window.onpopstate -slug: Web/API/Window/onpopstate +slug: Web/API/WindowEventHandlers/onpopstate translation_of: Web/API/WindowEventHandlers/onpopstate +original_slug: Web/API/Window/onpopstate --- <p>{{ ApiRef() }}</p> diff --git a/files/zh-cn/web/api/window/onunload/index.html b/files/zh-cn/web/api/windoweventhandlers/onunload/index.html index 5e766c1d67..65b13fa59a 100644 --- a/files/zh-cn/web/api/window/onunload/index.html +++ b/files/zh-cn/web/api/windoweventhandlers/onunload/index.html @@ -1,7 +1,8 @@ --- title: window.onunload -slug: Web/API/Window/onunload +slug: Web/API/WindowEventHandlers/onunload translation_of: Web/API/WindowEventHandlers/onunload +original_slug: Web/API/Window/onunload --- <p>{{ ApiRef("HTML DOM") }}</p> diff --git a/files/zh-cn/web/api/windowbase64/atob/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html index 2892e403d4..7d5a66fdb5 100644 --- a/files/zh-cn/web/api/windowbase64/atob/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/atob/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowBase64/atob +slug: Web/API/WindowOrWorkerGlobalScope/atob tags: - API - Base64 @@ -10,6 +10,7 @@ tags: - 参考 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/atob +original_slug: Web/API/WindowBase64/atob --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/windowbase64/btoa/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html index 6b742198a5..83873fc559 100644 --- a/files/zh-cn/web/api/windowbase64/btoa/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/btoa/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.btoa() -slug: Web/API/WindowBase64/btoa +slug: Web/API/WindowOrWorkerGlobalScope/btoa tags: - API - Base64 @@ -11,6 +11,7 @@ tags: - 数据 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: Web/API/WindowBase64/btoa --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/window/clearinterval/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html index 9a2d6e1790..442e1bb81e 100644 --- a/files/zh-cn/web/api/window/clearinterval/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -1,12 +1,13 @@ --- title: WindowTimers.clearInterval() -slug: Web/API/Window/clearInterval +slug: Web/API/WindowOrWorkerGlobalScope/clearInterval tags: - API - WindowOrWorkerGlobalScope - 参考 - 方法 translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +original_slug: Web/API/Window/clearInterval --- <div>{{ApiRef("HTML DOM")}}</div> diff --git a/files/zh-cn/web/api/windowtimers/cleartimeout/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html index 4b20c970d7..4e700ea7d0 100644 --- a/files/zh-cn/web/api/windowtimers/cleartimeout/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -1,11 +1,12 @@ --- title: WindowOrWorkerGlobalScope.clearTimeout() -slug: Web/API/WindowTimers/clearTimeout +slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout tags: - API - WindowOrWorkerGlobalScope - clearTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +original_slug: Web/API/WindowTimers/clearTimeout --- <div> <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/zh-cn/web/api/window/setinterval/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html index 385a19b81b..d5a453b133 100644 --- a/files/zh-cn/web/api/window/setinterval/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/setinterval/index.html @@ -1,6 +1,6 @@ --- title: window.setInterval -slug: Web/API/Window/setInterval +slug: Web/API/WindowOrWorkerGlobalScope/setInterval tags: - API - DOM @@ -8,6 +8,7 @@ tags: - 方法 - 时间 translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +original_slug: Web/API/Window/setInterval --- <div>{{ ApiRef("HTML DOM") }}</div> diff --git a/files/zh-cn/web/api/window/settimeout/index.html b/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html index f9813851f7..d0c80bb95b 100644 --- a/files/zh-cn/web/api/window/settimeout/index.html +++ b/files/zh-cn/web/api/windoworworkerglobalscope/settimeout/index.html @@ -1,12 +1,13 @@ --- title: window.setTimeout -slug: Web/API/Window/setTimeout +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout tags: - Timers - WindowOrWorkerGlobalScope - WindowTimers - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/Window/setTimeout --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html new file mode 100644 index 0000000000..60360d4c9e --- /dev/null +++ b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html @@ -0,0 +1,90 @@ +--- +title: loadend +slug: Web/API/XMLHttpRequest/loadend_event +translation_of: Web/API/XMLHttpRequest/loadend_event +original_slug: Web/Events/loadend +--- +<p>loadend事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。这适用于 {{domxref("XMLHttpRequest")}}调用, 以及{{htmlelement("img")}}或{{htmlelement("video")}}之类元素的内容。</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">可冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">触发对象</dt> + <dd style="margin: 0 0 0 120px;">例如{{domxref("HTMLImageElement")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>lengthComputable </code>{{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Specifies whether or not the total size of the transfer is known. Read only.</td> + </tr> + <tr> + <td><code>loaded</code> {{readonlyInline}}</td> + <td>unsigned long (long)</td> + <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td> + </tr> + <tr> + <td><code>total</code> {{readonlyInline}}</td> + <td>unsigned long (long)</td> + <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("loadstart")}}</li> + <li>{{event("progress")}}</li> + <li>{{event("error")}}</li> + <li>{{event("abort")}}</li> + <li>{{event("load")}}</li> + <li>{{event("loadend")}}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Monitoring progress</a></li> +</ul> diff --git a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html new file mode 100644 index 0000000000..3052ba08a7 --- /dev/null +++ b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html @@ -0,0 +1,92 @@ +--- +title: loadstart +slug: Web/API/XMLHttpRequest/loadstart_event +tags: + - 事件 +translation_of: Web/API/XMLHttpRequest/loadstart_event +original_slug: Web/Events/loadstart +--- +<p>当程序开始加载时，loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用, 也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素.</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范文档</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">冒泡</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认动作</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>lengthComputable </code>{{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Specifies whether or not the total size of the transfer is known. Read only.</td> + </tr> + <tr> + <td><code>loaded</code> {{readonlyInline}}</td> + <td>unsigned long (long)</td> + <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td> + </tr> + <tr> + <td><code>total</code> {{readonlyInline}}</td> + <td>unsigned long (long)</td> + <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td> + </tr> + </tbody> +</table> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("loadstart")}}</li> + <li>{{event("progress")}}</li> + <li>{{event("error")}}</li> + <li>{{event("abort")}}</li> + <li>{{event("load")}}</li> + <li>{{event("loadend")}}</li> +</ul> + +<h2 id="了解更多">了解更多</h2> + +<ul> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Monitoring progress</a></li> +</ul> diff --git a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html new file mode 100644 index 0000000000..1088c221ed --- /dev/null +++ b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html @@ -0,0 +1,147 @@ +--- +title: progress event +slug: Web/API/XMLHttpRequest/progress_event +tags: + - API + - Event + - Reference + - Web + - XMLHttpRequest + - progress +translation_of: Web/API/XMLHttpRequest/progress_event +original_slug: Web/Events/进度条 +--- +<p>{{APIRef}}</p> + +<p><strong><code>progress</code></strong>事件会在请求接收到数据的时候被周期性触发。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("ProgressEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="Live_example">Live example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" /> + <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" /> + <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" /> +</div> + +<textarea readonly class="event-log"></textarea></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log { + width: 25rem; + height: 4rem; + border: 1px solid black; + margin: .5rem; + padding: .2rem; +} + +input { + width: 11rem; + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const xhrButtonSuccess = document.querySelector('.xhr.success'); +const xhrButtonError = document.querySelector('.xhr.error'); +const xhrButtonAbort = document.querySelector('.xhr.abort'); +const log = document.querySelector('.event-log'); + +function handleEvent(e) { + log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`; +} + +function addListeners(xhr) { + xhr.addEventListener('loadstart', handleEvent); + xhr.addEventListener('load', handleEvent); + xhr.addEventListener('loadend', handleEvent); + xhr.addEventListener('progress', handleEvent); + xhr.addEventListener('error', handleEvent); + xhr.addEventListener('abort', handleEvent); +} + +function runXHR(url) { + log.textContent = ''; + + const xhr = new XMLHttpRequest(); + addListeners(xhr); + xhr.open("GET", url); + xhr.send(); + return xhr; +} + +xhrButtonSuccess.addEventListener('click', () => { + runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg'); +}); + +xhrButtonError.addEventListener('click', () => { + runXHR('https://somewhere.org/i-dont-exist'); +}); + +xhrButtonAbort.addEventListener('click', () => { + runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort(); +});</pre> + +<h4 id="Result">Result</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('XMLHttpRequest', '#event-xhr-progress')}}</td> + <td>{{Spec2('XMLHttpRequest')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.XMLHttpRequest.progress_event")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Monitoring progress</a></li> +</ul> diff --git a/files/zh-cn/web/api/xmlserializer/index.html b/files/zh-cn/web/api/xmlserializer/index.html new file mode 100644 index 0000000000..8202d0c906 --- /dev/null +++ b/files/zh-cn/web/api/xmlserializer/index.html @@ -0,0 +1,93 @@ +--- +title: XMLSerializer +slug: Web/API/XMLSerializer +tags: + - DOM Parsing + - XML + - XMLSerializer + - construct + - conversion +translation_of: Web/API/XMLSerializer +original_slug: XMLSerializer +--- +<div dir="ltr" style="text-align: left;">{{APIRef("XMLSerializer")}}</div> + +<div dir="ltr" id="result_box" style="text-align: left;"><code>XMLSerializer</code>接口提供{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法来构建一个代表 {{Glossary("DOM")}} 树的XML字符串。</div> + +<h2 id="Methods" name="Methods">方法</h2> + +<dl> + <dt id="serializeToString">{{domxref("XMLSerializer.serializeToString", "serializeToString()")}}</dt> + <dd>返回DOM子树序列化后的字符串。</dd> + <dt id="serializeToStream">{{domxref("XMLSerializer.serializeToStream", "serializeToStream()")}} {{ non-standard_inline }}{{ deprecated_inline }}</dt> + <dd>将指定元素的每个子树按照特定的字符集序列化成字节流。</dd> +</dl> + +<h2 id="Examples" name="Examples">示例</h2> + +<h3 id="把_XML_序列化为字符串">把 XML 序列化为字符串</h3> + +<p>首先，最基本的例子是将整个 document 对象序列化为一个 XML 字符串。</p> + +<pre class="brush: js"> var s = new XMLSerializer(); + var d = document; + var str = s.serializeToString(d); + saveXML(str);</pre> + +<p>这里新建了一个 <code>XMLSerializer</code> 对象实例, 然后将待序列化的 {{domxref("Document")}} 对象实例传入返回等价 XML 的 {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法。</p> + +<h3 id="向一个基于_XML_的_DOM_对象中">向一个基于 XML 的 DOM 对象中</h3> + +<p>本例使用 {domxref("Element.insertAdjacentHTML()")}} 方法将一个新的 DOM {{domxref("Node")}} 插入 基于序列化 {{domxref("Document")}} 对象创建的 XML 中。</p> + +<div class="note"> +<p><strong>注意:</strong> 在真实场景下，你通常应该通过调用 {{domxref("Document.importNode", "importNode()")}} 方法将新节点加入 DOM 中, 然后通过调用以下方法将目标节点添加到 DOM 树:</p> + +<ul> + <li>{{domxref("Document")}} 和 {{domxref("Element")}} 方法 {{domxref("ParentNode.append", "append()")}} 和 {{domxref("ParentNode.prepend", "prepend()")}}</li> + <li>{{domxref("ChildNode.replaceWith", "Node.replaceWith()")}} 方法(替换现有节点)</li> + <li>{{domxref("Document.insertAdjacentElement()")}} 和 {{domxref("Element.insertAdjacentElement()")}} 方法.</li> +</ul> +</div> + +<p>因为<code>insertAdjacentHTML()</code> 的第二个参数是一个字符串而不是 <code>Node</code> 节点对象, 所以这里先要使用 <code>XMLSerializer</code> 将节点转换为字符串.</p> + +<pre class="brush: js">var inp = document.createElement('input'); +var XMLS = new XMLSerializer(); +var inp_xmls = XMLS.serializeToString(inp); // 先将一个 DOM 节点转换为字符串。 + +// 将新建的节点添加到 DOM 中。 +document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre> + +<p>以上代码通过调用 {{domxref("Document.createElement()")}} 方法新建一个 {HTMLElement("input")}} 对象 , 然后通过 {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} 方法将该对象序列化为 XML.</p> + +<p>做完以上工作之后, 使用 <code>insertAdjacentHTML()</code> 方法将 <code><input></code> 元素加入 DOM.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM Parsing', '#the-xmlserializer-interface', 'XMLSerializer')}}</td> + <td>{{Spec2('DOM Parsing')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<div>{{Compat("api.XMLSerializer")}}</div> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Parsing_and_serializing_XML" title="en-US/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li>{{domxref("DOMParser")}}</li> +</ul> |