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

Posted 2023-03-06

【中文标题】javascript-如何检测 iframe 中的滚动事件？

【英文标题】：javascript-How to detect scroll event in iframe?

【发布时间】：2017-09-02 00:13:26

【问题描述】：

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

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

HTML 代码：

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

JavaScript 代码：

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

【参考方案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);

<iframe id="frame"></iframe>

请参阅：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?。谢谢