mozilla
您的搜尋結果

    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;
      });
    });

    另可參閱

    Document Tags and Contributors

    Contributors to this page: MashKao
    最近更新: MashKao,