0
563
Viewsjavascript-How to detect scroll event in iframe?
I have a problem when I try add event scroll with iframe tage. generally, I use scroll event with div tag It was working well. but when I add scroll event in iframe tag to detect user scroll pdf page, It was not working. why cannot I access html elements in iframe?, I have code inspect below:
and I try to add javascript scroll event with iframe :
HTML Code:
<iframe id="myframe" src="doc.pdf"></iframe>JavaScript Code:
document.getElementById('myframe').onscroll = function(){
alert('scrolling page');
};3 answers
Answer question0
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.
You can reference it with 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
0
JavaScript provide us onscroll as an attribute which passes parameters (Can be a function). But we got iframe here, try the following code snippet (jQuery).
$("#yourFrameId").load(function () {
var iframe = $("#yourFrameId").contents();
$(iframe).scroll(function () {
//your code here
});
});
0
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);
}
}
}