在 Javascript 的 iFrame 中触发滚动事件时出现问题

Question

我在这方面遇到了困难，虽然网上很多人似乎都有同样的问题，但网上没有一个解决方案对我有用。

我有以下 html 代码：

<iframe id="documentIFrame" src='http://localhost:49551//Documents/System/ef4be80c-a8d8-482e-9792-50c5692aa07f.pdf' width='100%' height='100%' frameborder='0'></iframe>

然后这是我试过的以下 js 代码：

1)

$("#documentIFrame").on('load', function () {
                var iframe = document.getElementById('documentIFrame');
                iframe.contentDocument.addEventListener('scroll', function (event) {
                    console.log("SCROLL");
                }, false);
            });

这个显示不出结果，连函数都进不去

2.

            var iframe = $("#documentIFrame").contentWindow;
            
            $(iframe).scroll(function () {
                console.log("NOW SCROLLING...");
                if ($(iframe).scrollTop() == $(iframe).height() - $("#documentIFrame").height()) {
                    alert("Reached bottom!");
                }
            });

和之前一样，完全没有结果。

3)

                var iframe = document.getElementById("documentIFrame").contentWindow;
                console.log(iframe);


                iframe.onscroll = function () {
                    console.log("scrolling...");
                }

一样，没有结果。

编辑： 关于这个的一些额外信息，在这种情况下，如果我 console.log() iframe 在我将函数分配给 onscroll 事件，我在 iframe 中搜索，onscroll 事件显示为 null.

编辑 2： 这对你们中的一些人可能会派上用场，使用 jQuery 到 select .contentWindow 不起作用对我来说，它是 undefined，但如果我使用纯 JS 代码：

document.getElementById("documentIFrame").contentWindow;

...然后它 returns 元素就好了。

我也试过用.contents()和contentDocument代替contentWindow，结果是一样的；如果我尝试 console.log() 这些元素，它们总是未定义。

我尝试在 document.ready() 上设置滚动功能，也在我调用由不同组件触发的 onclick 事件的功能上设置滚动功能；总是相同的结果。

我读过一些关于同源政策的内容，但我认为不应该是这样，因为这份文件（iframe 的 src 中的那个）来自本地主机，应该作为“同源”传递，对吗？

如有任何帮助，我们将不胜感激。

Answer 1

这似乎对我有用：

document
  .querySelector('#documentIFrame')
  .addEventListener('load', e => {
    e.target.contentWindow.addEventListener('scroll', e => {
      console.log('scrollin');
    });
  });

在 Javascript 的 iFrame 中触发滚动事件时出现问题

Problem triggering a scroll event in an iFrame in Javascript

html

javascript

iframe

jquery

dom-events