I am trying to access scrollTop value from within an iFrame with src= / while the page containing the iFrame is at / using the code shown below yet I am getting the following error:

var stopval = $(parent.document).scrollTop();

Error:

Error: Blocked a frame with origin "" from accessing a cross-origin frame.

Obviously it is an SOP issue, so was wondering if there were any work arounds...approaches to solve this issue? I've searched the web but couldn't find a solution getting scrollTop value from the iFrame page without receiving this error. Thanks

I am trying to access scrollTop value from within an iFrame with src= http://www.domain./folder/ while the page containing the iFrame is at http://sub-domain.domain./another-folder/ using the code shown below yet I am getting the following error:

var stopval = $(parent.document).scrollTop();

Error:

Error: Blocked a frame with origin "http://www.domain." from accessing a cross-origin frame.

Obviously it is an SOP issue, so was wondering if there were any work arounds...approaches to solve this issue? I've searched the web but couldn't find a solution getting scrollTop value from the iFrame page without receiving this error. Thanks

• javascript
• jquery
• html
• iframe

• 1 postMessage API should work: developer.mozilla/en-US/docs/Web/API/Window.postMessage – m90 Commented Jul 12, 2014 at 13:27
• stackoverflow./questions/1481251/… – Bilal Commented Jul 12, 2014 at 13:32

4 Answers 4

As fgshepard mentioned problem can be solved using window.postmessage as follows:

A. In the iFrame with src= http://www.domain./folder/ add:

<script type="text/javascript">
    window.addEventListener("message", listener, false);
    function listener(event){    
      if ( event.origin !== "http://sub-domain.domain." )
        return
        console.log('Message Received : '+event.data);
      }
</script>

B. In the page containing the iframe at http://sub-domain.domain./another-folder/ just below the add:

<script type="text/javascript">
      var win = document.getElementById("iframeid").contentWindow;
      $(window).scroll(function(){
          var wintop = $(window).scrollTop();
          win.postMessage($(window).scrollTop(), 'http://domain.');              
      });
</script>

The above code shall send the scrollTop() value from the page containing the iframe to the iframe src page.

I think that your answer is mostly explained here. You can set the value of document.domain to a suffix of the current domain.

If your page would be http://sub-domain.domain./another-folder/ and you would try to Iframe http://www.domain./folder/ than the following code should help you: document.domain = 'domain.'.

Your case is pletely other way around. Your page is http://www.domain./folder/ assessing iframing content from http://sub-domain.domain./another-folder/. But it looks like you can not do document.domain = 'sub-domain.domain.' because it is not a suffix of your current domain (but please try).

The scrollTo() controls the vertical and horizontal positions. Hope this could be useful

parent.scrollTo(0, 0);

You can use window.postMessage for this purpose if you have control over the documents in both locations. This allows you to pass messages between documents and across domains, and also provides some level of security. For example, in this scenario, when you need to get the scrollTop value from the parent window, you could send it a message:

parentWindow.postMessage('scrollTop', targetOrigin, [...]);

The parent window would have a listener for the message that could respond with the information:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
    var response = null;
    if (event.origin !== "http://example:8080") {
        return;
    }
    if (event.data === 'scrollTop') {
        response = $(document).scrollTop();
        childWindow.postMessage(response, targetOrigin, [...]);
        return response;
    }
    return false;
}

The child window would also have a listener:

window.addEventListener("message", receiveMessage, false);

The receiveMessage function would then use the received information.

If you wanted a more general purpose solution, your parent Window's receiveMessage function could simply respond with the result of the following:

response = $(document)[message]();

where message would contain whatever jQuery call you were interested in receiving. Further abstractions could be made, of course.