[英]javascript-How to detect scroll event in iframe?
I have a problem when I try add event scroll with iframe tage. 我尝试使用iframe tage添加事件滚动时出现问题。 generally, I use scroll event with div tag It was working well. 一般来说,我使用带有div标签的滚动事件它运行良好。 but when I add scroll event in iframe tag to detect user scroll pdf page, It was not working. 但是当我在iframe标签中添加滚动事件以检测用户滚动pdf页面时,它无法正常工作。 why cannot I access html elements in iframe?, I have code inspect below: 为什么我不能在iframe中访问html元素?我在下面有代码检查:
and I try to add javascript scroll event with iframe : 我尝试使用iframe添加javascript滚动事件:
HTML Code: HTML代码:
<iframe id="myframe" src="doc.pdf"></iframe>
JavaScript Code: JavaScript代码:
document.getElementById('myframe').onscroll = function(){ alert('scrolling page'); };
JavaScript provide us onscroll as an attribute which passes parameters (Can be a function). JavaScript为我们提供了onscroll作为传递参数的属性(可以是一个函数)。 But we got iframe here, try the following code snippet (jQuery). 但我们在这里得到iframe,尝试以下代码片段(jQuery)。
$("#yourFrameId").load(function () {
var iframe = $("#yourFrameId").contents();
$(iframe).scroll(function () {
//your code here
});
});
An iframe
does not have a scroll method, the document
of the iframe
does - you need to reference the inner document
rather than your <iframe>
tag. iframe
没有滚动方法, iframe
的document
也是如此 - 您需要引用内部document
而不是<iframe>
标记。
You can reference it with iframe.contentDocument
: 您可以使用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>
See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement for more information 有关更多信息,请参阅: https : //developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement
I have faced the issue and here's one of my implementation. 我遇到了这个问题,这是我的实施之一。
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);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.