javascript-How to detect scroll event in iframe?

Question

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

skyline3000 · Answer 1 · 2023-08-23T15:45:56.293

12

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 and add a scroll even listener:

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

Edit August 2023:

Reading the contents of an iframe is subject to the Same Origin policy, so this method only works if the iframe content is part of the same protocol and URL as the host document. Otherwise, iframe.contentDocument will return null. This is defined in the specification.

edited Aug 23 '23 at 15:45

answered Apr 06 '17 at 19:35

skyline3000

7,639
2
24
33

so, if I want to use with pdf, should I use with any one ( object, embed, iframe) ? – DevScripts Apr 06 '17 at 19:44
2

can't get the iframe.contentDocument, it's null – xgqfrms Dec 03 '21 at 07:58
your snippet is not working :( – Damjan Pavlica Aug 18 '23 at 21:18
The snippet no longer works because StackOverflow changed the URL of where they host the snippets, and reading the contents of the iframe is subject to the Same Origin policy. This method still works otherwise - I will update the answer. – skyline3000 Aug 23 '23 at 14:52

score 10 · Answer 2 · answered Apr 06 '17 at 19:33

10

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

answered Apr 06 '17 at 19:33

haMzox

2,073
1
12
25

what is different from contents() with contentDocument ? – DevScripts Apr 06 '17 at 19:48
1

Sure. The contentDocument property returns the Document object generated by a frame or iframe element only. Whereas contents() method allows us to search through the immediate children of these elements in the DOM tree and construct a new jQuery object from the matching elements. – haMzox Apr 06 '17 at 19:52

score 0 · Answer 3 · edited Jan 09 '19 at 04:27

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

From Review: Hi, please don't answer just with source code. Try to provide a nice description about how your solution works. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Thanks — sɐunıɔןɐqɐp, Nov 07 '18 at 08:45

javascript-How to detect scroll event in iframe?

3 Answers3

Edit August 2023:

Linked