From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../gecko/chrome/api/browser_api/index.html | 158 +++++++++++++++++++++ files/zh-tw/mozilla/gecko/chrome/api/index.html | 14 ++ 2 files changed, 172 insertions(+) create mode 100644 files/zh-tw/mozilla/gecko/chrome/api/browser_api/index.html create mode 100644 files/zh-tw/mozilla/gecko/chrome/api/index.html (limited to 'files/zh-tw/mozilla/gecko/chrome/api') diff --git a/files/zh-tw/mozilla/gecko/chrome/api/browser_api/index.html b/files/zh-tw/mozilla/gecko/chrome/api/browser_api/index.html new file mode 100644 index 0000000000..faa28e0f03 --- /dev/null +++ b/files/zh-tw/mozilla/gecko/chrome/api/browser_api/index.html @@ -0,0 +1,158 @@ +--- +title: Browser API +slug: Mozilla/Gecko/Chrome/API/Browser_API +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using +--- +

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('privileged') }}

+

摘要

+

HTML Browser API 其實是 HTML <iframe> 元素的延伸，可讓 Web Apps 建構瀏覽器或類似瀏覽器的 Apps。主要可分為 2 大項：

+ +

另在「嵌入式內容就是 1 個 Open Web App」的情況下，將於合適的 Apps 環境 (如權限) 中載入該內容。

+

用途

+

設定了 mozbrowser 屬性之後，即可將 <iframe> 轉為瀏覽器框架：

+
<iframe src="http://hostname.tld" mozbrowser>
+

如果要嵌入 Open Web Apps，就必須提供 mozapp 屬性，且導向 Apps 的 manifest 檔案之路徑應為：

+
<iframe src="http://hostname.tld" mozapp='http://path/to/manifest.webapp' mozbrowser>
+

最後透過 remote 屬性，<iframe> 內容可載入至本身的子處理程序 (Child process) 中，藉以分離出「嵌入此 <iframe> 頁面」的處理程序。

+
<iframe src="http://hostname.tld" mozbrowser remote>
+
+

警告：因應安全考量，若要從未知/未經信任的來源下載內容，則必備最後一項屬性。若要略過此屬性，則 Apps 可能受到惡意網站的危害。

+
+

權限

+

任何 Apps 若要嵌入瀏覽器框架，則其 app manifest 檔案中必備 browser 權限。

+
{
+  "permissions": {
+    "browser": {}
+  }
+}
+

此外，若要嵌入 Open Web Apps，則該 App 亦需具備 embed-apps 權限。

+
{
+  "permissions": {
+    "browser": {},
+    "embed-apps": {}
+  }
+}
+

其他函式

+

為因應瀏覽器 <iframe> 的需求，Firefox OS 另擴充了 HTMLIFrameElement DOM 介面。下列新函式將為 <iframe> 提供更多功能：

+

存取 (Navigation) 函式

+

這些函式可存取 <iframe> 的瀏覽記錄，為建構「停止」、「上一頁」、「下一頁」、「重新載入」等按鈕所必備。

+ +

效能函式

+

這些函式可管理瀏覽器 <iframe> 所使用的資源。特別適於建構分頁式瀏覽器的應用。

+ +

事件函式

+

為了管理瀏覽器 <iframe> 的內容，另新增了許多新事件 (如下所示)。下列函式即用以處理這些事件：

+ +

其他函式

+

這些函式適於使用瀏覽器 <iframe> 的 Apps。

+ +

事件

+

若要讓 Apps 管理瀏覽器 <iframe>，則該 Apps 將監聽瀏覽器 <iframe> 中發生的新事件。監聽的新事件如下：

+ +

範例

+

此範例可建構最基本的瀏覽器 Apps。

+

HTML

+

在 HTML 中，我們只要新增 1 組 URL 位址列、1個「Go」與「Stop」按鈕、1 組瀏覽器 <iframe>。

+
<header>
+  <input id="url">
+  <button id="go">Go</button>
+  <button id="stop">Stop</button>
+</header>
+
+<iframe src="about:blank" mozbrowser remote></iframe>
+
+

CSS

+

變個小小的 CSS 戲法，即可切換按鈕為「Go」與「Stop」。

+
button:disabled {
+  display: none;
+}
+

JavaScript

+

現在可加進必要的功能：

+
document.addEventListener("DOMContentLoaded", function () {
+  var url  = document.getElementById("url");
+  var go   = document.getElementById("go");
+  var stop = document.getElementById("stop");
+
+  var browser = document.getElementsByTagName("iframe")[0];
+
+  // This function is used to switch the Go and Stop button
+  // If the browser is loading content, "Go" is disabled and "Stop" is enabled
+  // Otherwise, "Go" is enabled and "Stop" is disabled
+  function uiLoading(isLoading) {
+      go.disabled =  isLoading;
+    stop.disabled = !isLoading;
+  }
+
+  go.addEventListener("touchend", function () {
+    browser.setAttribute("src", url.value);
+  });
+
+  stop.addEventListener("touchend", function () {
+    browser.stop();
+  });
+
+  // When the browser starts loading content, we switch the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadstart', function () {
+    uiLoading(true);
+  });
+
+  // When the browser finishes loading content, we switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadend', function () {
+    uiLoading(false);
+  });
+
+  // In case of error, we also switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowsererror', function (event) {
+    uiLoading(false);
+    alert("Loading error: " + event.detail);
+  });
+
+  // When a user follows a link, we make sure the new location is displayed in the address bar
+  browser.addEventListener('mozbrowserlocationchange', function (event) {
+    url.value = event.detail;
+  });
+});
+

另可參閱

+ diff --git a/files/zh-tw/mozilla/gecko/chrome/api/index.html b/files/zh-tw/mozilla/gecko/chrome/api/index.html new file mode 100644 index 0000000000..7c32384981 --- /dev/null +++ b/files/zh-tw/mozilla/gecko/chrome/api/index.html @@ -0,0 +1,14 @@ +--- +title: Chrome-only API reference +slug: Mozilla/Gecko/Chrome/API +translation_of: Mozilla/Gecko/Chrome/API +--- +
{{FirefoxSidebar}}
+ +

此頁面列出了僅能在 Gecko Chrome 中執行的 APIs（and sometimes in other privileged circumstances.）。

+ +
+

Note: Most of the APIs exposed to the Web in general are also usable in Chrome code: see Web APIs for a list of these.

+
+ +

{{SubpagesWithSummaries}}

-- cgit v1.2.3-54-g00ecf