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

Question

我尝试使用iframe tage添加事件滚动时出现问题.一般来说,我使用带有div标签的滚动事件它运行良好.但是当我在iframe标签中添加滚动事件以检测用户滚动pdf页面时,它无法正常工作.为什么我不能在iframe中访问html元素？我在下面有代码检查:

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

HTML代码:

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

JavaScript代码:

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

Answer 1

JavaScript为我们提供了onscroll作为传递参数的属性(可以是一个函数).但我们在这里得到iframe,尝试以下代码片段(jQuery).

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

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

Answer 2

一个iframe没有滚动的方法,该document的iframe那样-你需要引用内部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