javascript-如何在iframe中检测滚动事件？

Question

当我尝试使用iframe tage添加事件滚动时出现问题。一般来说，我使用带有div标签的滚动事件它运行良好。但是当我在iframe标签中添加滚动事件以检测用户滚动pdf页面时，它无法正常工作。为什么我不能在iframe中访问html元素？我在下面有代码检查：

我尝试使用iframe添加javascript滚动事件：

HTML代码：

＆＃13;

＆＃13;

<iframe id="myframe" src="doc.pdf"></iframe>

＆＃13;

＆＃13;

＆＃13;

JavaScript代码：

＆＃13;

＆＃13;

document.getElementById('myframe').onscroll = function(){
	 	alert('scrolling page');
};

＆＃13;

＆＃13;

＆＃13;

Answer 1

JavaScript为我们提供 onscroll 作为传递参数的属性（可以是函数）。但我们在这里得到了iframe，请尝试以下代码片段（jQuery）。

$("#yourFrameId").load(function () {
     var iframe = $("#yourFrameId").contents();

    $(iframe).scroll(function () { 
        //your code here
    });
});

Answer 2

iframe没有滚动方法，document的{​​{1}}也是如此 - 您需要引用内部iframe而不是document标签

您可以使用<iframe>：

来引用它

＆＃13;

＆＃13;

iframe.contentDocument

＆＃13;

var iframe = document.getElementById('frame');

iframe.contentDocument.body.innerHTML = 'a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>';

iframe.contentDocument.addEventListener('scroll', function(event) {
  console.log(event);
}, false);

＆＃13;

＆＃13;

＆＃13;

有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement

Answer 3

我已经遇到了这个问题，这是我的实现之一。

var currAgreementTab = this.get('parentController').get('currAgreement');
var contractContainer = Ember.$('div#marginContractContainer');
var iframe = contractContainer.children(currAgreementTab.element)[0].contentWindow;

if (iframe) {
  iframe.onscroll = function() {
    var scrolledHeight = Ember.$(iframe).height() === Ember.$(iframe.document).innerHeight() ? Ember.$(iframe).height() : Ember.$(iframe.document).innerHeight() - Ember.$(iframe).height();

    if (Ember.$(iframe).scrollTop()  === scrolledHeight) {
      var currAgreementTab = that.get('parentController').get('currAgreement');
      Ember.set(currAgreementTab, 'checkDisabled', false);
    }
  }
}