Question

我有一个HTML页面，里面有2个iframe。我希望每个iframe显示父窗口的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属性/事件两次。这意味着第二次设置window.parent.onscroll属性时，您实际上会覆盖第一次设置事件的尝试，并且您将使用第二帧{{{{{{{{ 1}} object，这就是为什么它只更新第二帧中元素的内容。

要解决此问题，您只需使用window.document代替addEventListener：

http://jsfiddle.net/x046o0p7/

onscroll

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听众则不会。

2页面上的window.parent.onscroll调用不起作用

1 个答案: