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.
General info
- Specification
- Non standard
- Interface
CustomEvent- Bubbles
- Yes
- Cancelable
- Yes
- Target
<iframe>- Default Action
- None
Properties
| 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? |
detail Read only |
object |
A custom object |
detail
The detail property returns an anonymous JavaScript object with the following properties:
- backgroundColor
- A
DOMStringrepresenting 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.
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';
});
Related Events
mozbrowserasyncscrollmozbrowserclosemozbrowsercontextmenumozbrowsererrormozbrowsericonchangemozbrowserloadstartmozbrowserlocationchangemozbrowseropenwindowmozbrowsersecuritychangemozbrowsershowmodalpromptmozbrowsertitlechangemozbrowserusernameandpasswordrequired