Jquery accessing $(parent.document).scrollTop from iFrame and SOP

Question

I am trying to access scrollTop value from within an iFrame with src= http://www.domain.com/folder/ while the page containing the iFrame is at http://sub-domain.domain.com/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.com" 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

`postMessage` API should work: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage — m90, Jul 12 '14 at 13:27
http://stackoverflow.com/questions/1481251/what-does-document-domain-document-domain-do — Bilal, Jul 12 '14 at 13:32

score 4 · Accepted Answer · answered Jul 17 '14 at 09:31

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

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

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

B. In the page containing the iframe at http://sub-domain.domain.com/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.com');              
      });
</script>

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

I see now what you were asking for. Glad this worked. – fgshepard Jul 17 '14 at 14:57 — fgshepard, Jul 17 '14 at 14:57

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

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.com/another-folder/ and you would try to Iframe http://www.domain.com/folder/ than the following code should help you: document.domain = 'domain.com'.

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

edited May 23 '17 at 11:45

Community

1
1

answered Jul 12 '14 at 14:01

Salvador Dali

214,103
147
703
753

Just to clarify my page http://sub-domain.domain.com/another-folder/ contains an iframe which loads http://www.domain.com/folder/. Now the page loaded by the iframe (http://www.domain.com/folder/) is the page containing the script which is trying to access scrollTop in the page http://sub-domain.domain.com/another-folder/ makes sense? – MChan Jul 12 '14 at 23:52

score 0 · Answer 3 · answered Nov 20 '15 at 04:37

0

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

parent.scrollTo(0, 0);

answered Nov 20 '15 at 04:37

Kiran

21
2

fgshepard · Answer 4 · 2014-07-12T14:46:55.413

-1

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.org: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.

edited Jul 12 '14 at 14:46

answered Jul 12 '14 at 14:28

fgshepard

249
3
15

I've just tried your example and it didn't work. First error I am getting is childWindow is not defined. Is it possible to please provide more complete example please? On a minor note the message should be sent from parent page (which contains the iframe) to the page loaded by the iframe not vice versa. Thanks – MChan Jul 15 '14 at 19:32
childWindow is just an example name for the window. You would need to use the reference you establish in your code. Since you didn't provide any actual code, I don't have access to your variable names. The same goes for parentWindow. PS Downvoting seems a little aggressive to me. – fgshepard Jul 15 '14 at 20:58
my example uses bidirectional communication -- it goes both ways. the child asks and the parent responds. – fgshepard Jul 15 '14 at 20:59
As far as I can see most answers in SO come with either JsFiddle examples or with detailed explanation / sample...none of which I found in your answer. Yet thanks for the brief reply but it really didn't help much in my problem as even with following your approach I still face the SOP problem as described in my problem. – MChan Jul 15 '14 at 23:26
postMessage will get around your SOP issue so long as you have control over both documents (to the extent that you can insert the necessary code in them). – fgshepard Jul 16 '14 at 00:14
thanks but once again your reply didn't bring us a step forward towards solving the problem as I already know this but I am still getting an SOP issue because one of the documents is in a sub-domain and yes I have full control over both documents. Thanks anyway – MChan Jul 16 '14 at 01:07

Jquery accessing $(parent.document).scrollTop from iFrame and SOP

4 Answers4