使用srcdoc =时不会触发iframe滚动事件

Question

我正在使用iframe显示html文档。 我需要在iframe中检测滚动事件。 使用src =可以正常工作，但是srcdoc =不会触发滚动事件。

HTML：

<iframe id="TermsConditionsText" srcdoc="<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;><head><meta http-equiv=&quot;Content-Type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot; /><title></title></head><body><div class=&quot;Section0&quot;> ... </div></body></html>" class="form-control" style="overflow-y: scroll; height: 600px;"></iframe>

jQuery的：

jQuery(document).ready(function () {
    var termsWereScrolled = false;

    $("#TermsConditionsText").scroll(function () {
        if (termsWereScrolled) return true;

        if ($(this).scrollTop() + $(this).innerHeight() + 2 >= $(this)[0].scrollHeight) {
            termsWereScrolled = true;
        }
    });
});

使用srcdoc =时，iframe是否触发滚动事件？

Answer 1

使用srcdoc =时，iframe是否触发滚动事件？

是的，使用srcdoc时会触发滚动事件。

iframe是它是一个新窗口，并且具有自己的文档。 因此，您必须将事件附加到其文档而不是元素本身。 尽管如此，您要做的就是查询iframe的内容，例如$("#TermsConditionsText").contents()来附加事件。 看一下这个：

var iframeContents = $("#TermsConditionsText").contents();

$(iframeContents).scroll(function () {
    console.log('scroll');

    var html = $(this)[0].scrollingElement;
    console.log('scrollHeight', html.scrollHeight);
});

使用srcdoc =时不会触发iframe滚动事件

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-08-15 15:58:40

使用srcdoc =时不会触发iframe滚动事件

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-08-15 15:58:40

解决方案1
1 已采纳 2018-08-15 15:58:40