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

You are here: Reference > JavaScript > client-side > event handling > properties > origin (event)

origin property (event)

Browser support:

8	3	10

Returns the scheme, hostname and port of the document that caused the onmessage event.

An onmessage event occurs when the postMessage method sends a message to the current window.

Note: The origin property is supported in Firefox from version 3 and Internet Explorer from version 8.
Note: The origin property is supported in Opera from version 10. In earlier versions, it supports the uri and domain properties instead. In Opera 10, the support for the uri and domain properties has been removed.

For further details, see the pages for the postMessage method and the onmessage event.

Syntax:

object.origin;

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

This property is read-only.

Possible values:

String that retrieves scheme, hostname and port.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the origin property:

Code

message.htm

<head>
    <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);
                }
            }
        }

        function GetState () {
            var frame = document.getElementById ("myFrame");
                // send the 'getstate' message to the frame window
            var message = "getstate";
            if (frame.contentWindow.postMessage) {
                frame.contentWindow.postMessage (message, "*");
            }
            else {
                alert ("Your browser does not support the postMessage 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>