Friday 3 February 2012

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

No comments:

Post a Comment