在 iframe 内的 iframe 滚动页面上答案

【问题标题】：on scroll page with iframe inside iframe在 iframe 内的 iframe 滚动页面上
【发布时间】：2020-09-05 11:29:21
【问题描述】：

我有一个简单的视频播放器，它插入到 iframe 内的页面中，现在我想在视频播放器可见时播放视频，否则暂停视频。使用交叉点观察器功能来实现这一点。

这里是html骨架

<body>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

</body>

这里是js

var configFromParent = null;

window.addEventListener("message", function (event) {
    var data = event.data;
    if (data.action == "config") {
        configFromParent = data;
    }
    var observer = new IntersectionObserver(function(entries) { 
        //console.log(entries);
        if(entries[0]['isIntersecting'] === true) {
            if(entries[0]['intersectionRatio'] === 1)
                document.querySelector("#message").textContent = 'Target is fully visible in screen';
            else if(entries[0]['intersectionRatio'] > 0.5){
                $("#videoplayer")[0].play();
                document.querySelector("#message").textContent = 'More than 50% of target is visible in screen';
            }
            else{
                document.querySelector("#message").textContent = 'Less than 50% of target is visible in screen';
            }
        }
        else {
            $("#videoplayer video")[0].pause();
        }
    }, { threshold: [0, 0.5, 1] });

    observer.observe(document.querySelector(".videoplayer"));

});

现在滚动我的页面时什么都没有发生，但是当我将父 src 链接更改为子 iframe 链接时，一切正常，但我希望 iframe 位于父 iframe 内，并且当视频播放器不可见时暂停视频否则播放视频

我需要做什么来解决这个问题？

【问题讨论】：

基本上观察者应该使用正确的设置。如果你的 testPage.您的骨架无法正常工作，因为 iframe 无法按照您在示例中指定的方式加载内部 html。要正确地做到这一点，http://somelink.com/iframe.html 应该在其主体中有子 iframe
@GenaMoroz 你是什么意思？你能帮我解决这个问题吗？我花了几个小时试图解决这个问题
更新评论，清楚了吗？
@GenaMoroz 是的，我知道，它在一个体内，我不想在这里复制所有数据，我认为这是可以理解的
好的。我建议摆脱 postmessaging 做一个干净的测试，也许你的问题就在那里。

标签： javascript html jquery iframe

【解决方案1】：

Observer 功能齐全。 https://codesandbox.io/s/loving-zhukovsky-chdds?file=/index.html 这个沙箱包含你的 html 设置（当然不安全）。向下滚动页面以查看消息如何变化。安全帧的行为方式相同。你不必担心。但是不要忘记IE可能没有观察者，你应该处理它。而且我仍然认为帖子中的问题

【讨论】：