javascript-如何检测 iframe 中的滚动事件？答案

【问题标题】：javascript-How to detect scroll event in iframe?javascript-如何检测 iframe 中的滚动事件？
【发布时间】：2017-09-02 00:13:26
【问题描述】：

当我尝试使用 iframe 标记添加事件滚动时遇到问题。通常，我使用带有 div 标签的滚动事件它运行良好。但是当我在 iframe 标签中添加滚动事件以检测用户滚动 pdf 页面时，它不起作用。为什么我不能访问 iframe 中的 html 元素？，我在下面有代码检查：

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

HTML 代码：

&lt;iframe id="myframe" src="doc.pdf"&gt;&lt;/iframe&gt;

JavaScript 代码：

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

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

iframe 没有滚动方法，iframe 的 document 有 - 您需要引用内部 document 而不是 <iframe> 标记。

你可以用iframe.contentDocument引用它：

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

&lt;iframe id="frame"&gt;&lt;/iframe&gt;

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement 了解更多信息

【讨论】：

那么，如果我想与 pdf 一起使用，我应该与任何一个（对象、嵌入、iframe）一起使用吗？
无法获取 iframe.contentDocument，它为空

【解决方案2】：

JavaScript 为我们提供了 onscroll 作为传递参数的属性（可以是函数）。但是我们这里有 iframe，试试下面的代码 sn-p (jQuery)。

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

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

【讨论】：

contentDocument 与 contents() 有什么不同？
当然。 contentDocument 属性仅返回由 frame 或 iframe 元素生成的 Document 对象。而 contents() 方法允许我们在 DOM 树中搜索这些元素的直接子元素，并从匹配的元素构造一个新的 jQuery 对象。

【解决方案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);
    }
  }
}

【讨论】：

点评来源：您好，请不要只回答源代码。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢