We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

非標準
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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,