Non-standard
This feature is not on a current W3C standards track, but it is supported on the Firefox OS platform. Although implementations may change in the future and it is not supported widely across browsers, it is suitable for use in code dedicated to Firefox OS apps.
The mozbrowserloadend
event is fired when the browser <iframe>
has finished loading all its assets, or has failed to load.
This can be used when the embedder wants to stop spinning a loading indicator, or update the UI in some other way to indicate loading is complete.
CustomEvent
<iframe>
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The browser iframe |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not. |
cancelable Read only |
Boolean |
Whether the event is cancellable or not. |
details Read only |
Object |
A custom object. |
The detail
property returns an anonymous JavaScript object with the following properties:
DOMString
representing the main background color of the browser <iframe>
content, expressed as an RGB value. Can be used to make the theme of the surrounding UI complement the theme of the currently loaded content, for example.In this example the mozbrowserloadstart
and mozbrowserloadend
events are used to change the icon shown on the stop/reload button between stop (x) and reload (R), as appropriate. In addition, the background of the controls UI bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. When the front page of https://developer.mozilla.org
is loaded, for example, the e.detail.backgroundColor
value reported is rgb(0, 83, 159)
.
var browser = document.querySelector("iframe"); browser.addEventListener('mozbrowserloadend',function(e) { stopReload.textContent = 'R'; console.log(e.detail.backgroundColor); controls.style.background = e.detail.backgroundColor; }); browser.addEventListener('mozbrowserloadend',function() { stopReload.textContent = 'R'; });
mozbrowserasyncscroll
mozbrowserclose
mozbrowsercontextmenu
mozbrowsererror
mozbrowsericonchange
mozbrowserloadstart
mozbrowserlocationchange
mozbrowseropenwindow
mozbrowsersecuritychange
mozbrowsershowmodalprompt
mozbrowsertitlechange
mozbrowserusernameandpasswordrequired