diff options
Diffstat (limited to 'files/zh-tw/web/api')
25 files changed, 1209 insertions, 427 deletions
diff --git a/files/zh-tw/web/api/canvas_api/drawing_graphics_with_canvas/index.html b/files/zh-tw/web/api/canvas_api/drawing_graphics_with_canvas/index.html deleted file mode 100644 index 63bd0017fc..0000000000 --- a/files/zh-tw/web/api/canvas_api/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,162 +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>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> -</div> -<h2 id="Introduction" name="Introduction">介紹</h2> -<p> 在 <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5" title="Firefox_1.5_for_developers">Firefox 1.5</a>, Firefox 引入了新的 HTML 元素 <canvas> 來繪製圖形。<code><canvas></code> 是基於 <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG canvas specification</a> 的技術 (其發軔於蘋果公司在 Safari 上的實做)。 我們可以用它來在使用者端進行圖形和 UI 元件的渲染。</p> -<p><code> <canvas></code> 創建了一個具有一致多個 <em>rendering contexts 的</em>區域。在本文中，我們著重於 2D rendering context 的部份。對於 3D 圖形，您可以參考 <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">2D Rendering Context</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">先來個簡單的範例</h3> -<p> 以下的程式碼做了一個簡單的展示：繪製兩個部份交疊的矩形 (其中一個矩形有透明屬性) :</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> 這個名為 <code>draw</code> 的函式從 <code>canvas</code> element 取得 <code>2d</code> context。物件 <code>ctx</code> 可以被用來在 canvas 上頭繪製圖形。從程式碼可以看出，我們簡單的藉由設定 fillStyle 繪製了兩個顏色不同的矩形，並透過 <code>fillRect 設定其位置。此外，第二個矩形透過</code> <code>rgba()</code> 配置了透明屬性。</p> -<p> 關於更複雜的圖形繪製，我們可以使用 <code>fillRect</code>, <code>strokeRect 和</code> <code>clearRect，他們分別可以畫出填滿的矩形, 僅有外框的矩形以及矩形區域清除。</code></p> -<h3 id="Using_Paths" name="Using_Paths">路徑的使用</h3> -<p> <code>beginPath</code> 函式用來初始一段路徑的繪製，並且可以透過 <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc </code>以及相關的函式來描述路徑內容。要結束的時候呼叫 <code>closePath 即可。一旦路徑描述完畢，就可以透過</code> <code>fill</code> 或 <code>stroke</code> 來渲染該路徑在 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> 呼叫 <code>fill()</code> 或 <code>stroke()</code> 代表該路徑已經被使用。若要重新進行填滿等動作，則需要重頭創造一次路徑。</p> -<h3 id="Graphics_State" name="Graphics_State">圖像狀態</h3> -<p> <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth 和</code> <code>lineJoin</code> 等屬性是 <em>graphics state 的一部分。關於這些屬性的修改，您可以透過</em> <code>save()</code> 及 <code>restore() 來進行操作。</code></p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">一個更為複雜的範例</h3> -<p> 接著我們來看一個稍微複雜一點的範例，它同時引入了路徑, 狀態的修改以及變換矩陣。</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 = "black"; - 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> 我們自定義了兩個函式： <code>drawBowtie 以及</code> <code>dot，並且個別呼叫了四次。</code>在呼叫他們之前，我們使用了 <code>translate()</code> 和 <code>rotate()</code> 來設定接著要繪製圖形的 transformation matrix，這將改變最終 dot 和 bowtie 的位置。<code>dot</code> 繪製了一個以 <code>(0, 0) 為中心的小黑正方形，而</code> <code>drawBowtie</code> 產生了一個填滿的蝴蝶結樣貌的圖形。</p> -<p> <code>save()</code> 和 <code>restore()</code> 規範了一系列動作的初始和結尾。一個值得注意的地方是，旋轉的動作是基於該圖形當下所在的位置， 所以 <code>translate() -> rotate() -> translate() 的結果會和</code> <code>translate() -> translate() -> rotate()</code> 不同。</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">和 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"><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">其他特性</h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">藉由 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">更多資訊</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-tw/web/api/closeevent/index.html b/files/zh-tw/web/api/closeevent/index.html new file mode 100644 index 0000000000..0a6d0977ff --- /dev/null +++ b/files/zh-tw/web/api/closeevent/index.html @@ -0,0 +1,145 @@ +--- +title: CloseEvent +slug: WebSockets/WebSockets_reference/CloseEvent +tags: + - WebSockets +translation_of: Web/API/CloseEvent +--- +<p>{{ draft() }}</p> +<p>當 WebSocket 連線關閉時，客戶端會收到一個 <code>CloseEvent</code>，由 <code>WebSocket</code> 物件 <code>onclose</code> 屬性表示的監聽器接收。</p> +<h2 id="Attributes" name="Attributes">屬性</h2> +<table class="standard-table"> + <tbody> + <tr> + <td class="header">屬性</td> + <td class="header">形態</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>code</code></td> + <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td> + <td>WebSocket 伺服器給予的連線關閉代碼。「狀態代碼」列有所有可能值。</td> + </tr> + <tr> + <td><code>reason</code></td> + <td>{{ domxref("DOMString") }}</td> + <td>表示伺服器關閉連線的原因，這因不同的伺服器與子協定而定。</td> + </tr> + <tr> + <td><code>wasClean</code></td> + <td><code>boolean</code></td> + <td>表示連線關閉情況是否乾淨。</td> + </tr> + </tbody> +</table> +<h2 id="狀態代碼">狀態代碼</h2> +<p>以下列有所有合法的狀態代碼。</p> +<table class="standard-table"> + <tbody> + <tr> + <td class="header">狀態代碼</td> + <td class="header">描述</td> + </tr> + <tr> + <td>0-999</td> + <td><strong>尚未使用的保留值。</strong></td> + </tr> + <tr> + <td>1000</td> + <td>正常關閉，連線成功地達到建立時的目標。</td> + </tr> + <tr> + <td>1001</td> + <td>端點去離，伺服器故障或是瀏覽器從開啟連線的頁面離去的情形。</td> + </tr> + <tr> + <td>1002</td> + <td>因協定錯誤造成連線被端點消滅。</td> + </tr> + <tr> + <td>1003</td> + <td>因端點接收不能處理的資料形態（舉例來說，文字端點收到二進制資料）而消滅連線。</td> + </tr> + <tr> + <td>1004</td> + <td>端點收到過大的資料幀而消滅連線。</td> + </tr> + <tr> + <td>1005</td> + <td><strong>保留值。</strong>表示意外地未給予狀態代碼的情形。</td> + </tr> + <tr> + <td>1006</td> + <td><strong>保留值。</strong>用以表示在預期收到狀態代碼的情形下不正常（即未送關閉幀）的連線關閉。</td> + </tr> + <tr> + <td>1007-1999</td> + <td><strong>保留以作為未來的 WebSocket 標準之用。</strong></td> + </tr> + <tr> + <td>2000-2999</td> + <td><strong>保留以作為 WebSocket 擴展之用。</strong></td> + </tr> + <tr> + <td>3000-3999</td> + <td>程式庫與框架使用的值，應用程式<strong>可不</strong>使用。</td> + </tr> + <tr> + <td>4000-4999</td> + <td>應用程式使用的值。</td> + </tr> + </tbody> +</table> +<h2 id="參見">參見</h2> +<ul> + <li><a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket" title="zh tw/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></li> +</ul> +<h2 id="瀏覽器兼容">瀏覽器兼容</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko_備註">Gecko 備註</h3> +<p>此時此刻，Gecko 送至監聽器的 "close" 事件僅是簡單事件。</p> +<p>{{ languages ( {"en": "en/WebSockets/WebSockets_reference/CloseEvent"} ) }}</p> diff --git a/files/zh-tw/web/api/event/createevent/index.html b/files/zh-tw/web/api/document/createevent/index.html index e3fd9dcd4f..e3fd9dcd4f 100644 --- a/files/zh-tw/web/api/event/createevent/index.html +++ b/files/zh-tw/web/api/document/createevent/index.html diff --git a/files/zh-tw/web/api/document.createtreewalker/index.html b/files/zh-tw/web/api/document/createtreewalker/index.html index 9e74411a14..9e74411a14 100644 --- a/files/zh-tw/web/api/document.createtreewalker/index.html +++ b/files/zh-tw/web/api/document/createtreewalker/index.html diff --git a/files/zh-tw/web/api/document_object_model/事件/index.html b/files/zh-tw/web/api/document_object_model/events/index.html index ff4ecfe572..ff4ecfe572 100644 --- a/files/zh-tw/web/api/document_object_model/事件/index.html +++ b/files/zh-tw/web/api/document_object_model/events/index.html diff --git a/files/zh-tw/web/api/htmlelement/style/index.html b/files/zh-tw/web/api/elementcssinlinestyle/style/index.html index e9e6d1171a..e9e6d1171a 100644 --- a/files/zh-tw/web/api/htmlelement/style/index.html +++ b/files/zh-tw/web/api/elementcssinlinestyle/style/index.html diff --git a/files/zh-tw/web/api/geolocation/using_geolocation/index.html b/files/zh-tw/web/api/geolocation_api/index.html index cdc56770c4..cdc56770c4 100644 --- a/files/zh-tw/web/api/geolocation/using_geolocation/index.html +++ b/files/zh-tw/web/api/geolocation_api/index.html diff --git a/files/zh-tw/web/api/node/innertext/index.html b/files/zh-tw/web/api/htmlelement/innertext/index.html index 4c8a4272fc..4c8a4272fc 100644 --- a/files/zh-tw/web/api/node/innertext/index.html +++ b/files/zh-tw/web/api/htmlelement/innertext/index.html diff --git a/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html b/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..e0330135f4 --- /dev/null +++ b/files/zh-tw/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,68 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +<p>當資源載入被拒絕時將會觸發<strong><code>abort</code></strong>事件。</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-abort">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">介面</dt> + <dd style="margin: 0 0 0 120px;">若由使用者介面產生，為UIEvent，否則為Event。</dd> + <dt style="float: left; text-align: right; width: 120px;">是否向上(冒泡)</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">是否為可取消</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目標對象</dt> + <dd style="margin: 0 0 0 120px;">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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>事件的目標對象 (DOM樹中最頂層的對象)。</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>事件的型態。</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>事件是否向上冒泡。</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>事件是否能夠取消。</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (該文檔(Document)的<code>window</code>)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> diff --git a/files/zh-tw/web/api/htmlelement/dataset/index.html b/files/zh-tw/web/api/htmlorforeignelement/dataset/index.html index 690f8e1189..690f8e1189 100644 --- a/files/zh-tw/web/api/htmlelement/dataset/index.html +++ b/files/zh-tw/web/api/htmlorforeignelement/dataset/index.html diff --git a/files/zh-tw/web/api/messageevent/index.html b/files/zh-tw/web/api/messageevent/index.html new file mode 100644 index 0000000000..f5c0212f78 --- /dev/null +++ b/files/zh-tw/web/api/messageevent/index.html @@ -0,0 +1,80 @@ +--- +title: MessageEvent +slug: WebSockets/WebSockets_reference/MessageEvent +tags: + - WebSockets +translation_of: Web/API/MessageEvent +--- +<p>{{ draft() }}</p> +<p>當伺服器傳來資料時，客戶端會收到一個 <code>MessageEvent</code>，由 <code>WebSocket</code> 物件 <code>onmessage</code> 表示的監聽器接收。</p> +<h2 id="Attributes" name="Attributes">屬性</h2> +<table class="standard-table"> + <tbody> + <tr> + <td class="header">屬性</td> + <td class="header">形態</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ domxref("DOMString") }} | {{ domxref("Blob") }} | <a href="/zh_tw/JavaScript_typed_arrays/ArrayBuffer" title="zh tw/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a></td> + <td>伺服器傳來的資料。</td> + </tr> + </tbody> +</table> +<h2 id="參見">參見</h2> +<ul> + <li><a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket" title="zh tw/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></li> +</ul> +<h2 id="瀏覽器兼容">瀏覽器兼容</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko_備註">Gecko 備註</h3> +<div class="geckoVersionNote"> + <p>{{ gecko_callout_heading("6.0") }}</p> + <p>此時此刻，Gecko 不支援 <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> 或 {{ domxref("Blob") }} 作為 <code>data</code>。</p> +</div> +<p>{{ languages ( {"en": "en/WebSockets/WebSockets_reference/MessageEvent"} ) }}</p> diff --git a/files/zh-tw/web/api/performance.timing/index.html b/files/zh-tw/web/api/performance/timing/index.html index 33d0a54171..33d0a54171 100644 --- a/files/zh-tw/web/api/performance.timing/index.html +++ b/files/zh-tw/web/api/performance/timing/index.html diff --git a/files/zh-tw/web/api/permissions_api/index.html b/files/zh-tw/web/api/permissions_api/index.html new file mode 100644 index 0000000000..d58d8466be --- /dev/null +++ b/files/zh-tw/web/api/permissions_api/index.html @@ -0,0 +1,85 @@ +--- +title: 權限 (Permissions) +slug: WebAPI/Permissions +translation_of: Web/API/Permissions_API +--- +<p>{{ draft() }}</p> +<p>{{ non-standard_header }}</p> +<p>{{ B2GOnlyHeader2('certified') }}</p> +<h2 id="摘要">摘要</h2> +<p>Permissions API 可顯示 Apps 所要求的所有權限，以利使用者管理。Apps 可透過此 API 而讀取其他 Apps 的權限並進一步變更。</p> +<p>透過 <a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings" title="/en-US/docs/DOM/PermissionSettings"><code>PermissionSettings</code></a> 介面的 <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.mozPermissionSettings" title="/en-US/docs/DOM/window.navigator.mozPermissionSettings"><code>navigator.mozPermissionSettings</code></a> 屬性，即可存取 Permission Manager。</p> +<h2 id="已安裝_Apps_的權限">已安裝 Apps 的權限</h2> +<p>所有 Apps 均需透過自己的 manifest 檔案而要求權限。Apps 每次所使用的 API，均以「請求顯性權限 (Explicit Permission)」的 API 為主，並提示使用者是否通過權限。如果使用者選擇「不要再提示」，大概也就不太可能改變決定了。API 則能提供介面，以利使用者管理已發出的權限。</p> +<p>透過 <a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.get" title="/en-US/docs/DOM/PermissionSettings.get"><code>PermissionSettings.get()</code></a>、<a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.set" title="/en-US/docs/DOM/PermissionSettings.set"><code>set()</code></a>、<a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.isExplicit" title="/en-US/docs/DOM/PermissionSettings.isExplicit"><code>isExplicit()</code></a> 函式即可達到上述作業。</p> +<h3 id="讀取權限">讀取權限</h3> +<p>若要知道已發出權限的目前狀態，可使用 <a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.get" title="/en-US/docs/DOM/PermissionSettings.get"><code>PermissionSettings.get()</code></a> 函式。此函式可回傳字串，以顯示特定 Apps 權限的目前狀態。可能的數值有：</p> +<dl> + <dt> + <code>allow</code></dt> + <dd> + 已通過該權限，且不需使用者的進一步互動。</dd> + <dt> + <code>denied</code></dt> + <dd> + 已否決該權限；可能是系統或使用者所否決。</dd> + <dt> + <code>prompt</code></dt> + <dd> + 代表該權限將以明顯的提示方法，詢問使用者是否給予權限。</dd> + <dt> + <code>unknown</code></dt> + <dd> + 代表該 Apps 並未詢問此權限，也不會提示使用者是否給予權限。</dd> +</dl> +<pre class="brush: js">// Let's check all installed apps +var apps = navigator.mozApps.mgmt.getAll(); + +apps.onsuccess = function () { + var permission = navigator.mozPermissionSettings; + + // Let's check the permission of each app + apps.result.forEach(function (app) { + var request, appName = app.manifest.name; + + for (request in app.manifest.permission) { + // Let's get the current permission for each permission request by the application + var p = permission.get(request, app.manifestUrl, app.origine, false); + + console.log(appName + ' asked for "' + request + '" permission, which is "' + p + '"') + } + }); +} + +</pre> +<h3 id="設定權限">設定權限</h3> +<p>只要使用 <a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.set" title="/en-US/docs/DOM/PermissionSettings.set"><code>PermissionSettings.set()</code></a> 函式即可設定權限。可能的數值均與 <a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.get" title="/en-US/docs/DOM/PermissionSettings.get"><code>get</code></a> 函式所存取的相同。</p> +<div class="note"> + <p><strong>注意：</strong>根據 Apps 權限的不同，某些可能為隱性 (Implicit) 權限。若因為某種理由，Apps 嘗試將權限變更為隱性權限，就會產生錯誤。為了避免這種錯誤，可透過 <a href="https://developer.mozilla.org/en-US/docs/DOM/PermissionSettings.isExplicit" title="/en-US/docs/DOM/PermissionSettings.isExplicit"><code>PermissionSettings.isExplicit()</code></a> 函式而檢查是否為顯性權限。</p> +</div> +<pre class="brush: js">// Let's check all installed apps +var apps = navigator.mozApps.mgmt.getAll(); + +apps.onsuccess = function () { + var permission = navigator.mozPermissionSettings; + + // Let's grant the permission of each app + apps.result.forEach(function (app) { + var request, appName = app.manifest.name; + + for (request in app.manifest.permission) { + // If the permission is not explicit + if (!permission.isExplicit(request, app.manifestUrl, app.origine, false) { + // Let's ask the user for all permissions requested by the application + permission.set(request, app.manifestUrl, app.origine, false); + } + } + }); +}</pre> +<h2 id="規格">規格</h2> +<p>不屬於任何規格。</p> +<h2 id="另可參閱">另可參閱</h2> +<ul> + <li>{{domxref("window.navigator.mozPermissionSettings","navigator.mozPermissionSettings")}}</li> + <li>{{domxref("PermissionSettings")}}</li> +</ul> diff --git a/files/zh-tw/web/api/websocket/index.html b/files/zh-tw/web/api/websocket/index.html new file mode 100644 index 0000000000..8acd8d03d5 --- /dev/null +++ b/files/zh-tw/web/api/websocket/index.html @@ -0,0 +1,276 @@ +--- +title: WebSocket +slug: WebSockets/WebSockets_reference/WebSocket +tags: + - WebSockets +translation_of: Web/API/WebSocket +--- +<p>{{ SeeCompatTable() }}</p> + +<p>{{ draft() }}</p> + +<p><code>WebSocket</code> 物件提供了建立、管理 <a href="/zh_tw/WebSockets" title="zh tw/WebSockets">WebSocket</a> 伺服器連線的 API，它也有在連線中傳送、接收資料的能力。</p> + +<h2 id="Method_overview" name="Method_overview">方法一覽</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td> + </tr> + <tr> + <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">屬性</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">屬性</td> + <td class="header">形態</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>binaryType</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>表示連線傳輸的二進制資料形態的字串，若使用 {{ domxref("Blob") }} 物件則為 "blob"，使用 <a href="/zh_tw/JavaScript_typed_arrays/ArrayBuffer" title="zh tw/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> 物件則為 "arraybuffer"。</td> + </tr> + <tr> + <td><code>bufferedAmount</code></td> + <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td> + <td>呼叫 {{ manch("send") }} 隊列但尚未傳輸至網路上資料的位元數。連線關閉時此值不會重設為零。連續呼叫 {{ manch("send") }} 會讓此值不斷上升。<strong>唯讀</strong></td> + </tr> + <tr> + <td><code>extensions</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>伺服器選擇的擴展。目前僅有空字串或表示資料經過壓縮的 "deflate-stream"。<strong>唯讀</strong></td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>當 WebSocket 連線的 <code>readyState</code> 切換至 <code>CLOSED</code> 時呼叫的事件監聽器。監聽器接收命名為 "close" 的 <a href="/zh_tw/WebSockets/WebSockets_reference/CloseEvent" title="zh tw/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a>。</td> + </tr> + <tr> + <td><code>onerror</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>當錯誤發生時呼叫的事件監聽器。事件為命名 "error" 的簡單事件。</td> + </tr> + <tr> + <td><code>onmessage</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>當瀏覽器接收伺服器的訊息時呼叫的事件監聽器。監聽器接收命名為 "message" 的 <a href="/zh_tw/WebSockets/WebSockets_reference/MessageEvent" title="zh tw/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a>。</td> + </tr> + <tr> + <td><code>onopen</code></td> + <td>{{ domxref("EventListener") }}</td> + <td>當 WebSocket 連線的 <code>readyState</code> 切換至 <code>OPEN</code> 時呼叫的事件監聽器，表示連線已準備傳送、接收資料。事件為命名 "open" 的簡單事件。</td> + </tr> + <tr> + <td><code>protocol</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>伺服器選擇的子協定，這是建立 WebSocket 物件時 <code>protocols</code> 參數裡的其中一個字串。</td> + </tr> + <tr> + <td><code>readyState</code></td> + <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td> + <td>連線的目前狀態，是就緒狀態常數的其中一個。<strong>唯讀</strong></td> + </tr> + <tr> + <td><code>url</code></td> + <td>{{ DOMXref("DOMString") }}</td> + <td>建構方法解析出來的 URL，總是絕對 URL。<strong>唯讀</strong></td> + </tr> + </tbody> +</table> + +<h2 id="Constants" name="Constants">常數</h2> + +<h3 id="就緒狀態常數">就緒狀態常數</h3> + +<p><code>readyState</code> 屬性使用以下常數描述 WebSocket 的連線狀態。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">常數</td> + <td class="header">值</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>CONNECTING</code></td> + <td><code>0</code></td> + <td>連線尚未打開。</td> + </tr> + <tr> + <td><code>OPEN</code></td> + <td><code>1</code></td> + <td>連線已打開，可以進行通訊。</td> + </tr> + <tr> + <td><code>CLOSING</code></td> + <td><code>2</code></td> + <td>連線正在進行關閉程序。</td> + </tr> + <tr> + <td><code>CLOSED</code></td> + <td><code>3</code></td> + <td>連線已關閉／連線不能打開。</td> + </tr> + </tbody> +</table> + +<h2 id="Methods" name="Methods">方法</h2> + +<h3 id="close()" name="close()">close()</h3> + +<p>關閉 WebSocket 連線／連線嘗試，若連線已為 <code>CLOSED</code>，此方法沒有作用。</p> + +<pre class="eval">void close( + in optional unsigned short code, + in optional DOMString reason +); +</pre> + +<h6 id="Parameters" name="Parameters">參數</h6> + +<dl> + <dt><code>code</code> {{ optional_inline() }}</dt> + <dd>表示狀態代碼，狀態代碼用以解釋連線關閉的原因。若未指定參數，預設值為 1000（表示正常的「事務完結（transaction complete）」關閉）。請參考 <a href="/zh_tw/WebSockets/WebSockets_reference/CloseEvent" title="zh tw/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> 頁面的<a href="/zh_tw/WebSockets/WebSockets_reference/CloseEvent#.e7.8b.80.e6.85.8b.e4.bb.a3.e7.a2.bc" title="zh tw/WebSockets/WebSockets reference/CloseEvent#.e7.8b.80.e6.85.8b.e4.bb.a3.e7.a2.bc">狀態代碼列表</a>，有所有的合法值。</dd> + <dt><code>reason</code> {{ optional_inline() }}</dt> + <dd>解釋連線關閉原因的人類可讀字串，字串必不可大於 123 個 UTF-8 字符。</dd> +</dl> + +<h6 id="可丟例外">可丟例外</h6> + +<dl> + <dt><code>INVALID_ACCESS_ERR</code></dt> + <dd>指定不合法的 <code>code</code>。</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd><code>reason</code> 字串太長或是含有未配對的代理對。</dd> +</dl> + +<h3 id="send()" name="send()">send()</h3> + +<p>透過 WebSocket 連線傳輸資料至伺服器。</p> + +<pre class="eval">void send( + in DOMString data +); + +void send( + in ArrayBuffer data +); + +void send( + in Blob data +); +</pre> + +<h6 id="Parameters" name="Parameters">參數</h6> + +<dl> + <dt><code>data</code></dt> + <dd>要傳送至伺服器的字串。</dd> +</dl> + +<h6 id="可丟例外_2">可丟例外</h6> + +<dl> + <dt><code>INVALID_STATE_ERR</code></dt> + <dd>目前連線不為 <code>OPEN</code>。</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd>資料為帶有未配對代理對的字串。</dd> +</dl> + +<h6 id="註釋">註釋</h6> + +<div class="geckoVersionNote"> +<p>{{ gecko_callout_heading("6.0") }}</p> + +<p>Gecko <code>send()</code> 方法的實作與 Gecko 6.0 的規範有差別。Gecko 回傳一個 <code>boolean</code> 以表示連線是否仍處於開啟狀態（且資料成功隊列／傳輸）。另外，此時此刻，Gecko 不支援 <code><a href="/zh_tw/JavaScript_typed_arrays/ArrayBuffer" title="zh tw/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> 或 {{ domxref("Blob") }} 作為資料形態。</p> +</div> + +<h2 id="See_also" name="See_also">參見</h2> + +<ul> + <li><a href="/zh_tw/WebSockets/Writing_WebSocket_client_applications" title="zh_tw/WebSockets/Writing WebSocket client applications">製作 WebSocket 客戶端應用程式</a></li> + <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li> +</ul> + +<h2 id="瀏覽器兼容">瀏覽器兼容</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>子協定支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>子協定支援</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko_備註">Gecko 備註</h3> + +<p>自從 Gecko 6.0，建構方法有前輟，須使用 <code>MozWebSocket()</code>：</p> + +<pre>var mySocket = new MozWebSocket("<span class="plain">http://www.example.com/socketserver</span>"); +</pre> + +<p>{{ languages ( {"en": "en/WebSockets/WebSockets_reference/WebSocket"} ) }}</p> diff --git a/files/zh-tw/web/api/websockets_api/index.html b/files/zh-tw/web/api/websockets_api/index.html new file mode 100644 index 0000000000..3cbb630f41 --- /dev/null +++ b/files/zh-tw/web/api/websockets_api/index.html @@ -0,0 +1,155 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - WebSockets +translation_of: Web/API/WebSockets_API +--- +<p>{{ SeeCompatTable() }}</p> +<p>WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。這個 API 在不必輪詢（poll）伺服器下，讓使用者傳送訊息至伺服器並接受事件驅動回應。</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h4 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=WebSockets&language=zh-tw" title="Special:Tags?tag=WebSockets&language=zh-tw">文件</a></h4> + <dl> + <dt> + <a href="/zh_tw/WebSockets/Writing_WebSocket_client_applications" title="zh tw/WebSockets/Writing WebSocket client applications">製作 WebSocket 客戶端應用程式</a></dt> + <dd> + 指導如何製作在瀏覽器上跑 WebSocket 客戶端的教程。</dd> + <dt> + <a href="/zh_tw/WebSockets/WebSockets_reference" title="zh tw/WebSockets/WebSockets reference">WebSockets 參考手冊</a></dt> + <dd> + 客戶端的 WebSocket API 參考手冊。</dd> + <dt> + <a href="/en/WebSockets/The_WebSocket_protocol" title="en/WebSockets/The WebSocket protocol">The WebSocket protocol</a></dt> + <dd> + WebSocket 協定參考。</dd> + <dt> + <a href="/en/WebSockets/Writing_WebSocket_servers" title="en/WebSockets/Writing WebSocket servers">Writing WebSocket servers</a></dt> + <dd> + 處理 WebSocket 協定的伺服器端代碼書寫指引。</dd> + </dl> + <p><span class="alllinks"><a href="/Special:Tags?tag=WebSockets&language=zh-tw" title="Special:Tags?tag=WebSockets&language=zh-tw">所有文件...</a></span></p> + </td> + <td> + <h4 id="Tools" name="Tools">工具</h4> + <ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>：一個強大的跨平台 WebSocket API，建構在 <a class="external" href="http://cnodejs.org/" title="http://cnodejs.org/">Node.js</a> 之上。</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>：一個 WebSocket 伺服器 API 的實作，建構在 <a class="external" href="http://cnodejs.org/" title="http://cnodejs.org/">Node.js</a> 之上。</li> + </ul> + <p> </p> + <h4 id="Related_Topics" name="Related_Topics">相關主題</h4> + <dl> + <dd> + <a href="/zh_tw/AJAX" title="zh_tw/AJAX">AJAX</a>、<a href="/zh_tw/JavaScript" title="zh_tw/JavaScript">JavaScript</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> +<h2 id="參見">參見</h2> +<ul> + <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">WebSocket API Specification</a></li> + <li><a href="/en/Server-sent_events" title="en/Server-sent events">Server-Sent Events</a></li> +</ul> +<h2 id="瀏覽器兼容">瀏覽器兼容</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>版本 -76 {{ obsolete_inline() }}</td> + <td>6</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>11.00 (禁用)</td> + <td>5.0.1</td> + </tr> + <tr> + <td>協定版本 7</td> + <td>{{ CompatNo() }}</td> + <td> + <p>{{ CompatGeckoDesktop("6.0") }}</p> + <div class="note"> + 請用 <code>MozWebSocket</code>。</div> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>協定版本 10</td> + <td>14</td> + <td> + <p>{{ CompatGeckoDesktop("7.0") }}</p> + <div class="note"> + 請用 <code>MozWebSocket</code>。</div> + </td> + <td>HTML5 Labs</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>功能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>版本 -76 {{ obsolete_inline() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>協定版本 7</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>協定版本 8 (IETF 草案 10)</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("7.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Gecko_附註">Gecko 附註</h3> +<p>Firefox 的 WebSockets 支援正在持續追蹤發展中的 WebSocket 規範。Firefox 6 實作底層協定版號 7，Firefox 7 實作協定版號 8（IETF 草案 10 的內容）。Firefox mobile 在 7.0 版支援 WebSocket。</p> +<div class="geckoVersionNote"> + <p>{{ gecko_callout_heading("6.0") }}</p> + <p>Gecko 6.0 {{ geckoRelease("6.0") }} 之前，不該存在的 <code>WebSocket</code> 物件使得某些開發者認為 <code>WebSocket</code> 服務沒有前輟，此物件已被更名為 <code>MozWebSocket</code>。</p> +</div> +<div class="geckoVersionNote"> + <p>{{ gecko_callout_heading("7.0") }}</p> + <p>自從 Gecko 7.0 {{ geckoRelease("7.0") }}，偏好設定 <code>network.websocket.max-connections</code> 可以用來設定 WebSocket 連線同時開啟的最大個數。預設值為 200。</p> +</div> +<div class="warning"> + <strong>警告：</strong>雖然不是唯一的理由，但是目前 WebSockets 被 Firefox 4 與 5 禁用的關鍵原因是一個<a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">協定設計上的安全問題</a>，因此不建議在生產環境下使用這些 Firefox 版本的 WebSockets。若仍想測試 WebSockets，你可以開啟 <code>about:config</code> 並設定 <code>network.websocket.enabled</code> 的取值至 <code>true</code>，並需要同時設定 <code>network.websocket.override-security-block</code> 的取值至 <code>true</code> 才能允許 WebSocket 連線的初始化。</div> +<p>{{ HTML5ArticleTOC() }}</p> +<p>{{ languages ( {"en": "en/WebSockets", "es": "es/WebSockets"} ) }}</p> diff --git a/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..8f1299379f --- /dev/null +++ b/files/zh-tw/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,179 @@ +--- +title: 製作 WebSocket 客戶端應用程式 +slug: WebSockets/Writing_WebSocket_client_applications +tags: + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +<p>{{ draft() }}</p> + +<p>WebSocket 是一種讓瀏覽器與伺服器進行一段互動通訊的技術。使用這項技術的 Webapp 可以直接進行即時通訊而不需要不斷對資料更改進行輪詢（polling）。</p> + +<div class="note"><strong>注：</strong>當我們的系統架構可以寄存 WebSocket 範例之後，我們會提供聊天／伺服器系統實例的幾個範例。</div> + +<h2 id="哪裡有_WebSocket">哪裡有 WebSocket</h2> + +<p>若 JavaScript 代碼的範疇是 {{ domxref("Window") }} 物件或是實作 {{ domxref("WorkerUtils") }} 的物件，則可使用 WebSocket API。也就是可以從 Web Workers 使用 WebSocket。</p> + +<div class="note"><strong>注：</strong>WebSockets API（與底層協定）的開發還在進展中，且目前不同瀏覽器（甚至瀏覽器的不同版本）有很多兼容問題。</div> + +<h2 id="建立一個_WebSocket_物件">建立一個 WebSocket 物件</h2> + +<p>你必須建立一個 <a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket" title="zh tw/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a> 物件才能讓瀏覽器／伺服器得以以 WebSocket 協定進行通訊，此物件在被建立之後會自動與伺服器連線。</p> + +<div class="note"><strong>注：</strong>別忘記在 Firefox 6.0 中 <code>WebSocket</code> 物件仍有前輟，所以在這裡須改成 <code>MozWebSocket</code>。</div> + +<p>WebSocket 的建構方法有一個必要參數與一個選擇參數：</p> + +<pre>WebSocket WebSocket( + in DOMString url, + in optional DOMString protocols +); + +WebSocket WebSocket( + in DOMString url, + in optional DOMString[] protocols +); +</pre> + +<dl> + <dt><code>url</code></dt> + <dd>連線用的 URL，WebSocket 伺服器會回應這個 URL。<br> + <br> + 根據網際網路工程任務小組（Internet Engineering Task Force，IETF）定義之規範， URL 的協議類型必須是 <code>ws://</code> （非加密連線）或是 <code>wss://</code> （加密連線）</dd> + <dt><code>protocols</code> {{ optional_inline() }}</dt> + <dd>一個表示協定的字串或者是一個表示協定的字串構成的陣列。這些字串可以用來指定子協定，因此一個伺服器可以實作多個 WebSocket 子協定（舉例來說，你可以讓一個伺服器處理不同種類的互動情形，各情形以 <code>protocol</code> 分別）。若不指定協定字串則預設值為空字串。</dd> +</dl> + +<p>此建構方法可能拋出以下例外：</p> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>連線使用的埠被阻擋。</dd> +</dl> + +<h3 id="範例">範例</h3> + +<p>此簡單範例建立了一個新的 WebSocket，連到位於 <code><span class="nowiki">http://www.example.com/socketserver</span></code> 的伺服器。指定的子協定是 "my-custom-protocol"。</p> + +<pre>var mySocket = new WebSocket("<span class="plain">ws://www.example.com/socketserver</span>", "my-custom-protocol"); +</pre> + +<p>回傳之後，<code>mySocket</code> 的 <code>readyState</code> 會變成 <code>CONNECTING</code>。當連線已可以傳輸資料時 <code>readyState</code> 會變成 <code>OPEN</code>。</p> + +<p>要建立一個連線但不指定單一個特定協定，可以指定一個協定構成的陣列：</p> + +<pre>var mySocket = new WebSocket("<span class="plain">ws://www.example.com/socketserver</span>", ["protocol1", "protocol2"]); +</pre> + +<p>當連線建立的時候（也就是 <code>readyState</code> 變成而 <code>OPEN</code> 的時候），<code>protocol</code> 屬性會回傳伺服器選擇的協定。</p> + +<h2 id="傳資料給伺服器">傳資料給伺服器</h2> + +<p>連線開啟之後即可開始傳資料給伺服器。呼叫 <code>WebSocket</code> 的 <a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket#send()" title="zh tw/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> 來發送訊息：</p> + +<pre>mySocket.send("這是伺服器正迫切需要的文字！"); +</pre> + +<p>可以被傳送的內容包括字串、<a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a> 或是 <a href="/zh_tw/JavaScript_typed_arrays/ArrayBuffer" title="zh tw/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>。</p> + +<div class="note"><strong>注：</strong>Firefox 目前只支援字串傳送。</div> + +<h3 id="用_JSON_傳輸物件">用 JSON 傳輸物件</h3> + +<p>有一個很方便的方法是用 <a href="/en/JSON" title="en/JSON">JSON</a> 傳送複雜的資料給伺服器，舉例來說，聊天程式可以設計一種協定，這個協定傳送以 JSON 封裝的資料封包：</p> + +<pre class="brush: js">// 透過伺服器傳送文字給所有使用者 + +function sendText() { + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; + + mySocket.send(JSON.stringify(msg)); + document.getElementById("text").value = ""; +} +</pre> + +<p>這份代碼先建立一個物件：<code>msg</code>，它包含伺服器處理訊息所需的種種資訊，然後呼叫 <a href="/en/JavaScript/Reference/Global_Objects/JSON/stringify" title="en/JavaScript/Reference/Global Objects/JSON/stringify"><code>JSON.stringify()</code></a> 使該物件轉換成 JSON 格式並呼叫 WebSocket 的 <a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket#send()" title="zh tw/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> 方法來傳輸資料至伺服器。</p> + +<h2 id="從伺服器接收訊息">從伺服器接收訊息</h2> + +<p>WebSockets 是一個事件驅動 API，當瀏覽器收到訊息時，一個「message」事件被傳入 <code>onmessage</code> 函數。使用以下方法開始傾聽傳入資料：</p> + +<pre class="brush: js">mySocket.onmessage = function(e) { + console.log(e.data); +} +</pre> + +<h3 id="接收並解讀_JSON_物件">接收並解讀 JSON 物件</h3> + +<p>考慮先前在「用 JSON 傳輸物件」談起的聊天應用程式。客戶端可能收到的資料封包有幾種：</p> + +<ul> + <li>登入握手</li> + <li>訊息文字</li> + <li>更新使用者清單</li> +</ul> + +<p>用來解讀傳入訊息的代碼可能像是：</p> + +<pre class="brush: js">connection.onmessage = function(evt) { + var f = document.getElementById("chatbox").contentDocument; + var text = ""; + var msg = JSON.parse(evt.data); + var time = new Date(msg.date); + var timeStr = time.toLocaleTimeString(); + + switch(msg.type) { + case "id": + clientID = msg.id; + setUsername(); + break; + case "username": + text = "<b>使用者 <em>" + msg.name + "</em> 登入於 " + timeStr + "</b><br>"; + break; + case "message": + text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; + break; + case "rejectusername": + text = "<b>由於你選取的名字已被人使用，你的使用者名稱已被設置為 <em>" + msg.name + "</em>。"; + break; + case "userlist": + var ul = ""; + for (i=0; i < msg.users.length; i++) { + ul += msg.users[i] + "<br>"; + } + document.getElementById("userlistbox").innerHTML = ul; + break; + } + + if (text.length) { + f.write(text); + document.getElementById("chatbox").contentWindow.scrollByPages(1); + } +}; +</pre> + +<p>這裡我們使用 <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> 使 JSON 物件轉換成原來的物件，檢驗並根據內容採取行動。</p> + +<h2 id="關閉連線">關閉連線</h2> + +<p>當你想結束 WebSocket 連線的時候，呼叫 WebSocket 的 <a href="/zh_tw/WebSockets/WebSockets_reference/WebSocket#close()" title="zh tw/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a> 方法：</p> + +<pre>mySocket.close(); +</pre> + +<h2 id="參考資料">參考資料</h2> + +<p><a href="https://tools.ietf.org/html/draft-abarth-thewebsocketprotocol-01">IETF: The WebSocket protocol draft-abarth-thewebsocketprotocol-01</a></p> + +<p> </p> + +<p>{{ languages ( {"en": "en/WebSockets/Writing_WebSocket_client_applications"} ) }}</p> + +<dl> +</dl> diff --git a/files/zh-tw/web/api/web_video_text_tracks_format/index.html b/files/zh-tw/web/api/webvtt_api/index.html index e565d2d129..e565d2d129 100644 --- a/files/zh-tw/web/api/web_video_text_tracks_format/index.html +++ b/files/zh-tw/web/api/webvtt_api/index.html diff --git a/files/zh-tw/web/api/window/domcontentloaded_event/index.html b/files/zh-tw/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..0ec78423ec --- /dev/null +++ b/files/zh-tw/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,133 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<p><code>DOMContentLoaded事件是當document被完整的讀取跟解析後就會被觸發</code>,不會等待 stylesheets, 圖片和subframes完成讀取 (<code><a href="/en-US/docs/Mozilla_event_reference/load">load</a>事件可以用來作為判斷頁面已經完整讀取的方法</code>).</p> + +<div class="note"> +<p><strong>Note:</strong> <a class="external" href="http://molily.de/weblog/domcontentloaded" title="http://molily.de/weblog/domcontentloaded">Stylesheet loads block script execution</a>, 如果 <code><script></code> 被放在 <code><link rel="stylesheet" ...>後面的話</code>, 須等到前面的stylesheet載入並完成解析，此時 <code>DOMContentLoaded才會被觸發。</code></p> +</div> + +<h2 id="Speeding_up">Speeding up</h2> + +<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><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;">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;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes (although specified as a simple event that isn't cancelable)</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document</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>{{ 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>0.2</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>9.0</td> + <td>9.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>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>{{ CompatGeckoMobile("1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p><span style="font-size: 14px; line-height: 18px;">Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</span></p> + +<h3 id="Cross-browser_fallback">Cross-browser fallback</h3> + +<p>Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect that the DOM is ready. In earlier version of Internet Explorer, this state can be detected by regularily trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.</p> + +<p>General-purpose JS libraries such as jQuery offer cross-browser methods to detect that the DOM is ready. There are also standalone scripts that offer this feature : <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> (supports only one listener) and <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> (doesn't depend on jQuery, despite its name).</p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/zh-tw/web/api/window.history/index.html b/files/zh-tw/web/api/window/history/index.html index 67b79c5f82..67b79c5f82 100644 --- a/files/zh-tw/web/api/window.history/index.html +++ b/files/zh-tw/web/api/window/history/index.html diff --git a/files/zh-tw/web/api/window/load_event/index.html b/files/zh-tw/web/api/window/load_event/index.html new file mode 100644 index 0000000000..7c6d314925 --- /dev/null +++ b/files/zh-tw/web/api/window/load_event/index.html @@ -0,0 +1,88 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +<p><code>load</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/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">介面</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">起泡事件</dt> + <dd style="margin: 0 0 0 120px;">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;">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><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="範例">範例</h2> + +<pre class="brush: html"><script> + window.addEventListener("load", function(event) { + console.log("All resources finished loading!"); + }); +</script> +</pre> + +<p> </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> +</ul> diff --git a/files/zh-tw/web/api/window.requestanimationframe/index.html b/files/zh-tw/web/api/window/requestanimationframe/index.html index 55aa85d292..55aa85d292 100644 --- a/files/zh-tw/web/api/window.requestanimationframe/index.html +++ b/files/zh-tw/web/api/window/requestanimationframe/index.html diff --git a/files/zh-tw/web/api/window/sidebar/adding_search_engines_from_web_pages/index.html b/files/zh-tw/web/api/window/sidebar/adding_search_engines_from_web_pages/index.html deleted file mode 100644 index 780e92fb84..0000000000 --- a/files/zh-tw/web/api/window/sidebar/adding_search_engines_from_web_pages/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: 自網頁添加搜尋引擎 -slug: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages -tags: - - 搜尋模組 -translation_of: Web/OpenSearch -translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages ---- -<p>Firefox 可以用 JavaScript 安裝搜尋引擎模組，且支援 <a href="zh_tw/%e8%a3%bd%e4%bd%9c_OpenSearch_%e6%90%9c%e5%b0%8b%e6%a8%a1%e7%b5%84">OpenSearch</a> 及 Sherlock 兩種模組格式。 -</p> -<div class="note"><b>註：</b> 自 Firefox 2 起，偏好的模組格式為 OpenSearch。</div> -<p>當 JavaScript 程式碼要安裝新的搜尋模組時，Firefox 會詢問使用者是否允許安裝。 -</p> -<h2 id=".E5.AE.89.E8.A3.9D_OpenSearch_.E6.A8.A1.E7.B5.84">安裝 OpenSearch 模組</h2> -<p>要安裝 OpenSearch 模組，必須使用 <code>window.external.AddSearchProvider()</code> DOM 方法。此方法的語法為： -</p> -<pre class="eval">window.external.AddSearchProvider(<i>搜尋模組 URL</i>); -</pre> -<p>其中 <i>搜尋模組 URL</i> 為搜尋引擎模組之 XML 檔的絕對連結 URL。 -</p> -<div class="note"><b>注意：</b> OpenSearch 自 Firefox 2 起的版本才支援。</div> -<h2 id=".E5.AE.89.E8.A3.9D_Sherlock_.E6.A8.A1.E7.B5.84">安裝 Sherlock 模組</h2> -<p>要安裝 Sherlock 模組，必須叫用 <code>window.sidebar.addSearchEngine()</code> 方法，語法為： -</p> -<pre class="eval">window.sidebar.addSearchEngine(<i>搜尋模組 URL</i>, <i>圖示 URL</i>, <i>建議名稱</i>, <i>建議分類</i>); -</pre> -<ul><li> <code>搜尋模組 URL</code> 參數為欲安裝的 Sherlock 格式檔（「.src」檔）URL。 -</li><li> <code>圖示 URL</code> 參數為此模組的圖示 URL。 -</li><li> <code>建議名稱</code> 參數僅於請求使用者確認安裝模組時才使用，安裝時訊息為「Do you want to install <i>建議名稱</i> from <i>搜尋模組 URL</i>？」 -</li><li> <code>建議分類</code> 參數並不使用，可以指定為空字串（<code>""</code>）或 <code>null</code>。 -</li></ul> -<p>Sherlock 的相關資訊可參考 <a class=" external" href="http://developer.apple.com/macosx/sherlock/">http://developer.apple.com/macosx/sherlock/</a> -</p> -<div class="noinclude"> -</div> -{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "es": "es/A\u00f1adir_motores_de_b\u00fasqueda_desde_p\u00e1ginas_web", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW" } ) }} diff --git a/files/zh-tw/web/api/windowbase64/index.html b/files/zh-tw/web/api/windowbase64/index.html deleted file mode 100644 index 6cf618070e..0000000000 --- a/files/zh-tw/web/api/windowbase64/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="屬性">屬性</h2> - -<p><em>This helper neither defines nor inherits any properties.</em></p> - -<h2 id="方法">方法</h2> - -<p><em>This helper does not inherit any methods.</em></p> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> - -<h2 id="規範">規範</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="瀏覽器相容性">瀏覽器相容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> - -<h2 id="參見">參見</h2> - -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/zh-tw/web/api/window.onpopstate/index.html b/files/zh-tw/web/api/windoweventhandlers/onpopstate/index.html index d98464d356..d98464d356 100644 --- a/files/zh-tw/web/api/window.onpopstate/index.html +++ b/files/zh-tw/web/api/windoweventhandlers/onpopstate/index.html diff --git a/files/zh-tw/web/api/windowtimers/index.html b/files/zh-tw/web/api/windowtimers/index.html deleted file mode 100644 index c38c15b821..0000000000 --- a/files/zh-tw/web/api/windowtimers/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.</p> - -<h2 id="屬性">屬性</h2> - -<p><em>WindowTimers 介面沒有繼承也沒有定義任何屬性。</em></p> - -<h2 id="方法">方法</h2> - -<p><em>除以下自身方法外，WindowTimers 介面提沒有任何繼承方法。</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h2 id="規範">規範</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="瀏覽器相容性">瀏覽器相容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="參見">參見</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> |