javascript - Jquery 从 iFrame 和 SOP 访问 $(parent.document).scrollTop

Question

我正在尝试从 src= http://www.domain.com/folder/ 的 iFrame 中访问 scrollTop 值而包含 iFrame 的页面位于 http://sub-domain.domain.com/another-folder/使用下面显示的代码但我收到以下错误:

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

错误:

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

显然这是一个 SOP 问题，所以想知道是否有任何解决方法...解决此问题的方法？我在网上进行了搜索，但找不到在没有收到此错误的情况下从 iFrame 页面获取 scrollTop 值的解决方案。谢谢

Answer 1

正如 fgshepard 提到的问题可以使用 window.postmessage 解决如下:

一个。在 src= http://www.domain.com/folder/ 的 iFrame 中添加:

<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.在包含位于 http://sub-domain.domain.com/another-folder/ 的 iframe 的页面中就在下面添加:

<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>

上述代码应将包含 iframe 的页面的 scrollTop() 值发送到 iframe 源页面。