Browser API

非標準

This API is available on Firefox OS for privileged or certified applications only.

摘要

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

  • 針對嵌入式內容,讓 iframe 行為如同最上層的瀏覽器視窗。也就是說 window.topwindow.parentwindow.frameElement 都不該顯示出上層的頁框階層 (Frame hierarchy)。在不同情況下,也能用來說明嵌入式內容是否為 Open Web Apps。
  • 用以控制並監聽嵌入式內容狀態變化的 API。

另在「嵌入式內容就是 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。

  • getScreenshot():針對瀏覽器 <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;
  });
});

另可參閱

文件標籤與貢獻者

 此頁面的貢獻者: MashKao
 最近更新: MashKao,