包含外部wesbite的Iframe不会触发onscroll事件处理程序

iframe containing external wesbite does not fire the onscroll event handler

本文关键字：onscroll 事件处理 程序 wesbite Iframe 包含外      更新时间：2023-09-26

我明白，为了在iframe中正常触发onscroll事件处理程序，iframe必须包含与包含iframe的页面具有相同域名的站点。但是无论如何，这可以为包含外部站点的iframe完成吗?

onscroll事件处理程序:

<script type="text/javascript">
    window.onload = function() {
       var frm = document.getElementById("test").contentWindow;
       frm.onscroll = function(){
          alert("iframe scrolled");
       }
    }
</script>

上面的js代码可以正常工作:

<iframe id="test" src="http://www.<myDomain>.com"></iframe>

而不是for this:

<iframe id="test" src="http://www.<anExternalSite>.com"></iframe>

如果我不能做到这一点，我的整个应用程序将是无用的。有什么解决办法吗?黑客吗?

任意外部站点?没有。

合作外部站点?将滚动事件侦听器绑定到站点本身(绑定到它的body元素)，并使用postMessage来传递事件数据。

看看Quentin的回答或者做一些更黑客的事情，使用代理(http://httpd.apache.org/docs/2.2/mod/mod_proxy.html)从您自己的域提供外部站点，因为跨域策略不允许您这样做。

请注意，代理将增加您服务器上的流量。

使用

  <html>
    <head>
      <style>
        #iframeoverlay { position: absolute; width: same-as-iframe; height: sams-as-iframe; anything-else: sams-as-iframe; z-index: 1-or-higher-if-the-iframe-is-over-1; }
      </style>
      <script>
        function alert() {
          alert("iframe scrolled");
        }
      </script>
    </head>
    <body>
      <iframe ... ></iframe><div id="iframeoverlay" onscroll="alert"></div>
    </body>
  </html>

不知道它是否会工作，但尝试一下。

相关文章：