mozbrowserloadend 编辑

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

detail

The detail property returns an anonymous JavaScript object with the following properties:

backgroundColor

A 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.

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

• mozbrowserasyncscroll
• mozbrowserclose
• mozbrowsercontextmenu
• mozbrowsererror
• mozbrowsericonchange
• mozbrowserloadstart
• mozbrowserlocationchange
• mozbrowseropenwindow
• mozbrowsersecuritychange
• mozbrowsershowmodalprompt
• mozbrowsertitlechange
• mozbrowserusernameandpasswordrequired

See also

• Using the Browser API