In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > initMessageEvent (event)

initMessageEvent method (event)

Browser support:

9	3	10.6

Initializes an event object created by the createEvent method with type of 'MessageEvent'.

Note: The initMessageEvent method is supported in Firefox from version 3, Opera from version 10.6 and Internet Explorer from version 9.

An event object created by the createEvent method with type of 'MessageEvent' implements the MessageEvent interface.

After initialization, the event can be dispatched with the dispatchEvent method.

The postMessage method can also be used to fire an event with type of 'MessageEvent'.

In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.

Syntax:

object.initMessageEvent (eventName, bubbles, cancelable, data, origin, lastEventId, source, ports);

You can find the related objects in the Supported by objects section below.

Parameters:

eventName

Required. String that specifies the name (type) of the event to initialize.

This parameter is case sensitive! Sets the type property of the event object. For a complete list of events, see the page for Events in JavaScript. The initMessageEvent method is appropriate for initialization of MessageEvent types principally, for other events, use the type-specific initialization methods.

Note: custom event names are also allowed.
Events represented by the MessageEvent interface:

message

bubbles

Required. Boolean that specifies whether the event can bubble or not. Sets the bubbles property of the event object.

One of the following values:

false

The event cannot bubble up.

true

The event can bubble up.

cancelable

Required. Boolean that specifies whether the event can be canceled or not. Sets the cancelable property of the event object.

One of the following values:

false

The event cannot be canceled.

true

The event can be canceled.

data

Required. String that specifies the message for the event. Sets the data property of the event object.

origin

Required. String that specifies the scheme, hostname and port of the document that caused the event. Sets the origin property of the event object.

lastEventId

Required. String that specifies the identifier of the last event. Sets the lastEventId property of the event object.

source

Required. Refers to the window object that contains the document that caused the event. Sets the source property of the event object.

ports

Required in Opera, optional in Safari and Google Chrome, not supported and omitted in Firefox and Internet Explorer. Specifies the message ports. Default is null.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the initMessageEvent method:

Code

message.htm

<head>
    <script type="text/javascript">
        function Init () {
            if (window.addEventListener) {
                window.addEventListener ("message", OnMessage, false);
            }
        }

        function GetState () {
            if (document.createEvent) {
                var frame = document.getElementById ("myFrame");

                    // send the 'getstate' message to the frame window
                    // use the dispatchEvent instead of the postMessage method
                var messageEvent = null;
                try {
                    messageEvent = document.createEvent('MessageEvent');
                }
                catch (e) {
                    alert ("Your browser does not support the createEvent method for the MessageEvent event type!");
                    return;
                }

                var message = "getstate";
                var origin = window.location.protocol + "//" + window.location.host;
                var lastEventId = 12;
                if (messageEvent.initMessageEvent) {
                    messageEvent.initMessageEvent ("message", true, true, message, origin, lastEventId, window, null);
                    frame.contentWindow.dispatchEvent (messageEvent);
                }
                else {
                    alert ("Your browser does not support the initMessageEvent method!");
                }
            }
            else {
                alert ("Your browser does not support the createEvent method!");
            }
        }

        function OnMessage (event) {
            var message = event.data;
            var arr = message.split (",");
            if (arr[0] == "true") {
                alert ("The check box is checked.");
            }
            else {
                alert ("The check box is not checked.");
            }

            var selIndex = Number (arr[1]);
            alert ("The " + (selIndex + 1) + ". option is selected.");
        }
    </script>
</head>
<body onload="Init ();">
    <iframe id="myFrame" src="message.htm" width="500" height="200px"></iframe>
    <br /><br />
    <button onclick="GetState ()">Get the state of controls in the frame</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Message handling example</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function Init () {
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("message", OnMessage, false);
            }
            else {
                if (window.attachEvent) {   // IE before version 9
                    window.attachEvent("onmessage", OnMessage);     // Internet Explorer from version 8
                }
            }
        }

        function OnMessage (event) {
                // Check the location of the caller
            
                // Opera earlier than version 10
            if ('domain' in event) {
                if (event.domain != "help.dottoro.com") {
                    return;
                }
            }
                // Firefox, Safari, Google Chrome, Internet Explorer from version 8 and Opera from version 10
            if ('origin' in event) {
                if (event.origin != "http://help.dottoro.com") {
                    return;
                }
            }
            
            DumpMessageInfo (event);
            
            if (event.data == "getstate") {
                    // create the message
                var checkBox = document.getElementById ("myCheck");
                var select = document.getElementById ("mySelect");
                var message = checkBox.checked + "," + select.selectedIndex;
                
                    // send back the response message
                event.source.postMessage (message, event.origin);
            }
        }
        
        function DumpMessageInfo (event) {
            var info =  document.getElementById ("info");
            info.innerHTML = "message: " + event.data;
                // Opera earlier than version 10
            if ('domain' in event) {
                info.innerHTML += "<br />domain: " + event.domain;
            }
                // Opera earlier than version 10
            if ('uri' in event) {
                info.innerHTML += "<br />url: " + event.uri;
            }
                // Firefox, Safari, Google Chrome, Internet Explorer from version 8 and Opera from version 10
            if ('origin' in event) {
                info.innerHTML += "<br />origin: " + event.origin;
            }
                // Firefox, Safari and Google Chrome
            if ('lastEventId' in event) {
                info.innerHTML += "<br />lastEventId: " + event.lastEventId;
            }
        }

    </script>
<body onload="Init ();" style=background-color:#e0b0a0;>
    <input type="checkbox" id="myCheck" />Sample check box<br />
    <select id="mySelect">
        <option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
    </select>
    <br /><br />
    Information about the message:
    <div id="info" style="background-color:#f0f0b0;"></div>
</body>
</html>