2 window.parent.onscroll 页面调用无效

Question

我有一个 HTML 页面，里面有 2 个 iframe。我希望每个 iframe 显示 parent window 的 Y 滚动偏移量。一个 iframe 在页面加载时起作用，另一个则不起作用。

父 HTML 页面只有 iframe 嵌入。这是 iframe 中的代码运行：

function run(){
    document.write("<div id='scrollY' style='float:left;'></div><br>");
    scrollY = 'no';
    document.getElementById("scrollY").innerHTML = scrollY;
    window.parent.onscroll = function(){
        scrollY = window.parent.pageYOffset;
        document.getElementById("scrollY").innerHTML = scrollY;
    }
}
run();

加载和向下滚动的结果将显示如下内容：

iframe1 = 100
iframe2 = no

我可以只调用 window.parent.onscroll 一次吗？这对我来说似乎不对。

Answer 1

发生这种情况是因为在两个框架中，window.parent 引用了同一个 window 对象，而您在同一个对象上设置了 onscroll property/event，两次。这意味着你第二次设置 window.parent.onscroll 属性，你实际上覆盖了第一次设置事件的尝试，并且你用第二帧的 window.document 对象覆盖了它，这就是为什么它只更新第二帧中元素的内容。

要解决这个问题，您可以简单地使用 addEventListener 而不是 onscroll:

http://jsfiddle.net/x046o0p7/

function run() {
    document.write("<div id='scrollY' style='float:left;'></div><br>");
    scrollY = 'no';
    document.getElementById("scrollY").innerHTML = scrollY;
    window.parent.addEventListener('scroll', function() {
        scrollY = window.parent.pageYOffset;
        document.getElementById("scrollY").innerHTML = scrollY;
    });
}

addEventListener 允许您为同一元素设置多个相同类型的事件，而 .onstuff 侦听器则不允许。

2 window.parent.onscroll 页面调用无效

2 window.parent.onscroll calls on page do not work

javascript

iframe

scroll