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

【问题标题】：iframe containing external wesbite does not fire the onscroll event handler包含外部 wesbite 的 iframe 不会触发 onscroll 事件处理程序
【发布时间】：2013-04-29 11:57:45
【问题描述】：

我了解，为了正常触发 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>

但不是为了这个：

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

如果我不能这样做，我的整个应用程序将毫无用处。有什么解决方法吗？有什么技巧吗？

【问题讨论】：

我希望不会，xss 已经很强大了：P

标签： javascript jquery html iframe scroll

【解决方案1】：

任意外部网站？没有。

合作的外部网站？让滚动事件侦听器被站点本身（绑定到它的 body 元素）并使用 postMessage 传递事件数据。

【讨论】：

这可能是解决这个问题的方法。但不是我的情况，因为我无法与外部网站合作。关于这件事我已经问了另一个问题。Rails: Serve an external webpage as my own domain - URL to be used in iframe

【解决方案2】：

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

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

【讨论】：

stumbleupon.com 是这样做的吗？
抱歉，我是 stumbleupon.com 的新手，在哪里可以看到这个？
[链接](gttp://stumbleupon.com)。这是一个偶然发现的 URL 示例：stumbleupon.com/su/8eOp42/www.calm.com
不，他们正在从外部域加载该站点，但是，我没有看到滚动时发生任何事情...您想像他们一样调整 iframe 的高度吗？不需要为此监听 iframe 的内部滚动事件。
对不起，我的错。查看偶然发现的页面的 url，我希望 stumbleupon 也可以为外部网站提供服务。但是看了一下代码，发现他们只是使用带有外部站点 url 作为源的 iframe。有没有一个使用代理的例子，你可以指出我吗？您认为对于拥有许多（可能数百万）并发用户的应用来说，这仍然是正确的方法吗？

【解决方案3】：

使用这个：

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

不确定它是否会起作用，但请尝试一下。

【讨论】：

位于 iframe 顶部的 #iframeoverlay 不会让 iframe 滚动。我也无法设置包含外部网站的 iframe 的 scrollTop 值。