将滚动事件绑定到 iframe [重复]答案

【问题标题】：Binding scroll event to iframe [duplicate]将滚动事件绑定到 iframe [重复]
【发布时间】：2014-12-18 09:06:45
【问题描述】：

我正在使用 iframe 加载外部 URL。这是结构 -

<iframe id="iframe-wrapper" src="http://blog.kpmg.ch/" style="width: 100%; height: 100%; overflow-y: scroll"></iframe>

当我滚动浏览 iframe 内容时，我正在尝试做一些事情。我尝试了各种方法，都没有奏效。以下是我已经尝试过的一些事情 -

1) jQuery iframe scroll event (IE)

    $(window).load(function(){
      $($('#iframe-wrapper').contents()).scroll(function(){
       alert("Scrolling");
      }); 
    });

2)jQuery iframe scroll event (IE)

    $('#iframe-wrapper').load(function(){
      $($(this)[0].contentWindow).scroll(function(){
        alert("Scrolling");
      });
    });

3)How to make IFRAME listen to scroll events as parent when click event within parent iframe is triggered

$("#iframe-wrapper").load(function(){
    var iframeContent = getFrameTargetElement( document.getElementById("iframe-wrapper") );
    iframeContent.onscroll = function(e){
        alert("Scrolling");
    };        
});

4) Jquery and binding an event to an iframe

$("#iframe-wrapper").load(function(){
    $("#iframe-wrapper").contents().find("body").scroll( function(e) {
        alert("Scrolling");
    });
});

【问题讨论】：

$("#iframe-wrapper").scroll(fn);你试过了吗？
duplicate 是您没有见过或尝试过的东西，它可以工作！我已经尝试了链接，检查我展示的第三个示例，如果你能在我做错的地方请帮助我。在完成并理解完整问题之前不要找到重复项。 :)
@Jai，是的，我已经尝试过了，但对我不起作用。我不知道这里出了什么问题。我发现在 iframe 完全加载后应该绑定事件的地方。所以我不再那样尝试了。
@Shuvro 您是否考虑过您的问题可能在于调用 alert() 函数，而不是 iframe 本身？你看过这个stackoverflow.com/questions/12139953/…
@KhalidT。感谢您指出这一点。但我已经尝试过这种方式。也没有用。 :)

标签： javascript jquery html iframe

【解决方案1】：

这是行不通的。这是因为同源政策。因为您的页面和 iFrame 的源不在同一个域中，所以该事件永远不会在您的主页上触发。在此处阅读更多信息：
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

也许您可以使用以下解决方案之一使其工作：
Ways to circumvent the same-origin policy

所以对于外部 URL（不在同一个域中），这总是有问题的。

【讨论】：

感谢您的回复和链接。至少现在我知道是什么导致了问题，我应该怎么做。这就是为什么其他解决方案对我不起作用的原因。需要找到解决方法。
我确实将您引导到另一个线程（在对您的问题的评论中），他们建议如何绕过它（使用 postMessage API），但这只有在您可以控制两个页面时才有效（父母和 iframe），如果不是这种情况，那么你真的没有办法做你想做的事，而且有充分的理由。