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

Posted 2023-05-09

【中文标题】在 Javascript 中的 iFrame 中触发滚动事件的问题

【英文标题】：Problem triggering a scroll event in an iFrame in Javascript

【发布时间】：2020-10-15 08:43:46

【问题描述】：

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

我有以下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 事件之后，我在 @ 中搜索987654328@，onscroll 事件显示为null。

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

document.getElementById("documentIFrame").contentWindow;

...然后它返回元素就好了。

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

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

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

任何帮助将不胜感激。

【问题讨论】：

iframe 文档是否与宿主文档来自同一来源？主机名、端口和协议必须相同。如果没有，那么您的能力将受到严重限制。

@Jacob 文档是由用户上传的，但是我将它复制到解决方案文件夹本身的临时文件夹中，事实上，如果我运行项目并检查 iframe 元素，如果我点击src 中的链接，文件将下载，所以我认为它在主机名中，但我可能误解了 SO 的工作原理。

当我说“文档”时，我指的是 HTML 文档。外部 URL 和内部 URL 是否共享相同的来源？听起来像，但只是想确保它不是像不同的端口号那样愚蠢的东西。

@Jacob 哦，明白了！是的，它们确实有相同的起源。

【参考方案1】：

这似乎对我有用：

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

【讨论】：

我只是试了一下。不适合我。我试过这个： document.querySelector('#documentIFrame') .addEventListener('load', e => e.target.contentWindow.addEventListener('scroll', e => console.log('scrollin'); ); );它到达“ABOUT TO SCROLL”日志，但之后没有任何反应......

另外，只有当我在 $(document).ready(...) 函数中添加此代码时才会发生这种情况，如果我把它放在另一个函数中，“ABOUT TO SCROLL”日志不会出现。

ABOUT TO SCROLL 在哪里？我在你的代码中没有看到。

哦，您知道我刚刚注意到您的文档是 PDF；我不认为您可以观看 PDF 查看器的滚动，而只能观看另一个 HTML 文档。基本上，滚动的不是 iframe 窗口，而是滚动的 PDF 查看器。

Ooooooooh 这很有道理.. 是的，绝对可以。我会检查***.com/questions/36193354/… 这个，谢谢！