非標準
This API is available on Firefox OS for privileged or certified applications only.
摘要
HTML Browser API 其實是 HTML <iframe> 元素的延伸，可讓 Web Apps 建構瀏覽器或類似瀏覽器的 Apps。主要可分為 2 大項：
- 針對嵌入式內容，讓
iframe行為如同最上層的瀏覽器視窗。也就是說window.top、window.parent、window.frameElement都不該顯示出上層的頁框階層 (Frame hierarchy)。在不同情況下，也能用來說明嵌入式內容是否為 Open Web Apps。 - 用以控制並監聽嵌入式內容狀態變化的 API。
另在「嵌入式內容就是 1 個 Open Web App」的情況下，將於合適的 Apps 環境 (如權限) 中載入該內容。
用途
設定了 mozbrowser 屬性之後，即可將 <iframe> 轉為瀏覽器框架：
<iframe src="https://hostname.tld" mozbrowser>
如果要嵌入 Open Web Apps，就必須提供 mozapp 屬性，且導向 Apps 的 manifest 檔案之路徑應為：
<iframe src="https://hostname.tld" mozapp='https://path/to/manifest.webapp' mozbrowser>
最後透過 remote 屬性，<iframe> 內容可載入至本身的子處理程序 (Child process) 中，藉以分離出「嵌入此 <iframe> 頁面」的處理程序。
<iframe src="https://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> 的瀏覽記錄，為建構「停止」、「上一頁」、「下一頁」、「重新載入」等按鈕所必備。
reload()：重新載入<iframe>的內容。stop()：停止載入<iframe>的內容。getCanGoBack()：得知是否能存取上一頁。goBack()：針對瀏覽記錄中的上個位置，更改<iframe>的位置。getCanGoForward()：得知是否能存取下一頁。goForward()：針對瀏覽記錄中的下個位置，更改<iframe>的位置。
效能函式
這些函式可管理瀏覽器 <iframe> 所使用的資源。特別適於建構分頁式瀏覽器的應用。
setVisible()：更改瀏覽器<iframe>的顯示狀態。如此可能影響資源分配與某些函式 (如requestAnimationFrame)。getVisible()：得知瀏覽器<iframe>目前的顯示狀態。purgeHistory()：清除瀏覽器<iframe>的所有相關資源 (cookies、localStorage、快取等)。
事件函式
為了管理瀏覽器 <iframe> 的內容，另新增了許多新事件 (如下所示)。下列函式即用以處理這些事件：
<iframe>現已支援EventTarget介面的函式：addEventListener()、removeEventListener()、dispatchEvent()。sendMouseEvent()：傳送MouseEvent至<iframe>的內容。sendTouchEvent()：傳送TouchEvent至<iframe>的內容。另請注意此函式僅能用於觸控式裝置。addNextPaintListener()：定義處理器 (Handler) 以監聽瀏覽器<iframe>中的下一個 MozAfterPaint 事件。removeNextPaintListener()：移除先前以addNextPaintListener()所設定的處理器。
其他函式
這些函式適於使用瀏覽器 <iframe> 的 Apps。
getScreenshot()：針對瀏覽器<iframe>的內容進行截圖。特別適合在分頁式瀏覽器 Apps 中取得分頁的圖示。
事件
若要讓 Apps 管理瀏覽器 <iframe>，則該 Apps 將監聽瀏覽器 <iframe> 中發生的新事件。監聽的新事件如下：
- mozbrowserasyncscroll：瀏覽器
<iframe>中的捲動位置改變，隨即送出此函式。 - mozbrowserclose：在瀏覽器
<iframe>中呼叫window.close()，隨即送出此函式。 - mozbrowsercontextmenu：瀏覽器
<iframe>嘗試開啟右鍵選單，隨即送出此函式。此函式將處理瀏覽器<iframe>內容中的可用<menuitem>元素。 - mozbrowsererror：在瀏覽器
<iframe>中載入內容而發生錯誤時，隨即送出此函式。 - mozbrowsericonchange：瀏覽器
<iframe>的網站圖示變更時，隨即送出此函式。 - mozbrowserloadend：瀏覽器
<iframe>完成載入所有的外部檔案 (Assets) 時，隨即送出此函式。 - mozbrowserloadstart：瀏覽器
<iframe>開始載入新頁面時，隨即送出此函式。 - mozbrowserlocationchange：瀏覽器
<iframe>的位置改變時，隨即送出此函式。 - mozbrowseropenwindow：在瀏覽器
<iframe>中呼叫window.open()時，隨即送出此函式。 - mozbrowsersecuritychange：在瀏覽器
<iframe>中變更 SSL 狀態時，隨即送出此函式。 - mozbrowsershowmodalprompt：在瀏覽器
<iframe>中呼叫alert()、confirm()，或prompt()時，隨即送出此函式。 - mozbrowsertitlechange：在瀏覽器
<iframe>中變更 document.title 時，隨即送出此函式。 - mozbrowserusernameandpasswordrequired：請求 HTTP 的認證 (Authentification) 時，隨即送出此函式。
- mozbrowseropensearch：只要發現搜尋引擎的鏈結，隨即送出此函式。
範例
此範例可建構最基本的瀏覽器 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;
});
});