jQuery iframe 滚动事件 (IE)答案

【问题标题】：jQuery iframe scroll event (IE)jQuery iframe 滚动事件 (IE)
【发布时间】：2023-04-08 22:11:02
【问题描述】：

在 Internet Explorer 7 中无法监听滚动事件。

我试过了：

$("#myIframe").scroll(function() { alert('hi'); })

为 FF 工作：

$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })

让按键工作：

$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })

【问题讨论】：

标签： javascript jquery internet-explorer iframe

【解决方案1】：

尽管我很喜欢 jQuery。我不能让它工作。但是，我在普通的旧 javascript 中尝试了这个，它在 IE、FF、Safari 和 Chrome 中运行良好。

<script type="text/javascript">
    window.onload = function() {
      var frm = document.getElementById("myIframe").contentWindow;
      frm.onscroll = function(){
        alert("EUREKA");
      }
    }
</script>

编辑： 使用 window.load() 时，以下内容适用于 FF、Safari 和 Chrome。使用 document.ready 时，它仅适用于 FF。无论出于何种原因，它在任何一种情况下都无法在 IE8 中运行。

$(window).load(function(){
    $($('#myIframe').contents()).scroll(function(){
       alert('frame scrolled in jquery');
    }); 
});

【讨论】：

确保将 iframe 的 src 设置为 http://+window.location.hostname 以防止由于违反同源策略（安全）而导致失败。

【解决方案2】：

我知道这是一个旧线程，但有些人会发现它很有用。

$(document).scroll() 可以替换为$(window).scroll()，到目前为止它对我有用。

【讨论】：

【解决方案3】：

试试这个：

在遍历嵌套浏览上下文的 dom 之前，必须发生两件事。

您需要知道 iframe 存在，并通过 document ready 事件处理。

您需要确保 iframe 已加载。

即：

    $(document).ready(function(){

        // #page is the id of the iframe
        $('#page').load(function(){
            // $(this)[0].contentWindow is the window of your nested browsing context/ iframe
            $($(this)[0].contentWindow).scroll(function(){
                console.log($(this).scrollTop());
            });
        });
     });

需要注意的一点是，这绝对不能在 Firefox 中跨浏览器工作。

【讨论】：

【解决方案4】：

把这个放在父母身上：

var childScrollHandler = function () {
   alert('Scrolling going on');
}

然后把这个放到iframe内容上：

$(document).bind('scroll', function(ev){
    parent.childScrollHandler(ev);
});

将$(document) 替换为您尝试收听的任何元素。

【讨论】：