Subscribe to RSS Feed

One of the new improvements introduced in Firebug 1.11 beta 1 is better monitoring of messages sent between frames/windows. These messages are sent via window.postMessage.

Couple of quick notes about window.postMessage:

  • It enables cross-origin communication.
  • It places a message in the message queue associated with the thread that created the specified window and returns without waiting for the thread to process the message.

window.postMessage()

Let's see a quick example showing how to use postMessage().

Posting a message:

var iframe = document.getElementById("iframe");
iframe.contentWindow.postMessage("Hello World!", "*");

Receiving a message:

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    console.log(event.data);
}

monitorEvents()

In order to monitor messages sent to the iframe in the previous example we'll utilize monitorEvents command available on Firebug's Command Line (see also Log DOM Events)

All you need to do is execute the following expression on the Command Line:

monitorEvents($("iframe").contentWindow, "message")

To stop monitoring, you need:

unmonitorEvents($("iframe").contentWindow, "message")

As soon as the monitoring is on and a message is sent to iframe, you should see a log in the Console panel.

The log has three parts:

  • origin window/iframe URL
  • data associated with the message
  • target window/iframe object

If you click the log you'll be navigated into the DOM panel for detailed inspection of the MessageEvent object. Check out the next screenshot.


Install Firebug 1.11 beta 1 and checkout live example!


Rss Commenti

1 Comment

  1. [...] detailed explanation of the [...]

    #1 Firebug 1.11 New Features ✩ Mozilla Hacks – the Web developer blog

Sorry, the comment form is closed at this time.