Search code examples
javascriptjqueryhtmllocal-storagesame-origin-policy

Document.domain blocked javascript code

I have implemented same-origin-policy in which i am using iframe and javascripts document.domain property.

Here is the iframe:

<iframe name="ss_iframe" id="ss_iframe" style="display:none" src="http://www.onedomain.com/sample/a"></iframe>

and the code of this iframe is:

<html>
  <head>
    <script type="text/javascript" src="pathto/js/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript">
      document.domain = 'example.com';
      (function ($) {
         $.shbar = {
         init : function()
        {
           parent.$.shbar.init( $.shbar );

         },

         ajax : function(options){
           $.ajax(options);
         }
      };
      })(jQuery);

     $(document).ready(function() {
       $.shbar.init();
    });
   </script>
 </head>
 <body></body>
</html>

I have one javascript file which is loading this iframe. Now the js which i am using in website is having the below code for same origin policy:

document.domain = 'example.com';

In this js file, I have implemented localstorage of html5 which is working fine. But when i am using the following code:

window.addEventListener('storage', function(storageEvent){
    var curId = window.localStorage.getItem('curId');
    if( curId != '' && storageEvent.key == 'samplestorage'){
        $('#msgCount_'+curId ).remove();
    }
}, false);

this code runs well in mozilla, But in chrome this is not working. But if i remove the line document.domain from js file,it works fine in chrome as well.

Even if used focus event on window is not working if there is document.domain and working fine after commenting document.domain.

I dont understand why document.domain blocking that code, whether it is actually because of document.domain or something else.

Solution

  • Thanx @zer00ne and techie_28 for your response and time.

    I have found a workaround to resolve my issue. Posting that in case anybody faces same issue:

    var storageEvent= $.Event("storage");

$(document).ready(function ()
{
    $(window).bind('storage', onStorageEvent);
});

function onStorageEvent(storageEvent) {
   //your code which should run in other tabs
};

window.onfocus = function(event){
   event.stopPropagation();
   $(window).trigger(storageEvent);
};