Crossdomain Calls Using Hash

Hash is a read/write string property of the URL object. It marks the rest of the URL as a fragment identifier. For crossdomain calls in javascript we can use this hash value.

ParentPage Js File:-

        //Last recieved value.

                var last = 0;

        //Url of iframe page

        var url = "iframe page url";

        //Send message to iframe.

        function toIFrame() {

            //Get the iframe.
            var iFrame = document.getElementById("iframepage").contentWindow;

            //Send the message to iframe.

            iFrame.location = url + "#message=" + new Date().getTime();
        }

        //Get the message on time interval.

        function getMessage() {

            //Get the hash value.
            var hash = window.location.hash;

            //Check the hash value.

            if (hash) {

                 //Message

                var message;

                //Get the messgage.
                message = hash.split('=')[1];

                //Check the last value with current value.

                if (last != message) {

                    //Assign last value.

                    last = message;

                    //Append the message to body.

                    $('<div/>').html(message).appendTo('#output');
                }
            }
        }
        //Timer for getting messages.
        setInterval(getMessage, 200);

<div>
   <div>
     <input type="button" value="ToIFrame" onclick="return toIFrame();" />
        </div>
           <iframe id="iframepage" src="iframe page url "
            width="400" height="300" border="1"></iframe>
        <div id="output">
        </div>
</div>

IFramePage Js File:-

        //Last recieved value.

      var last = 0;

      //Url of parent page

      var url = "parent page url ";

      //Send message to parent page.

      function toParent() {

       //Send message to parent.

               window.parent.location = url+"#message=" + new Date().getTime();
     }

        //Get the message on time interval.

        function getMessage() {

            //Get the hash value.
            var hash = window.location.hash;

            //Check the hash value.

            if (hash) {

                //Message

                var message;

                //Get the messgage.

                message = hash.split('=')[1];

                //Check the last value with current value.
                if (last != message) {

                    //Assign last value.

                    last = message;

                    //Append the message to body.

                    $('<div/>').html(message).appendTo('#output');
                }
            }
        }

        //Timer for getting messages.
        setInterval(getMessage, 200);

<div>

   <div>
     <input type="button" value="ToParent" onclick="return toParent();" />
   </div>
   <div id="output">
   </div>
</div>

Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…

sekhartechblog@gmail.com