在 iframe 内的 iframe 滚动页面上
Posted
技术标签:
【中文标题】在 iframe 内的 iframe 滚动页面上【英文标题】：on scroll page with iframe inside 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 做一个干净的测试，也许你的问题就在那里。 【参考方案1】：Observer 功能齐全。 https://codesandbox.io/s/loving-zhukovsky-chdds?file=/index.html 这个沙箱包含你的 html 设置（当然不安全）。向下滚动页面以查看消息如何变化。 安全帧的行为方式相同。你不必担心。但是不要忘记IE可能没有观察者，你应该处理它。 而且我仍然认为帖子中的问题
【讨论】：
以上是关于在 iframe 内的 iframe 滚动页面上的主要内容，如果未能解决你的问题，请参考以下文章
去滚动条 DIV 嵌套iframe,iframe 里转一个放flash的页面。在页面显示层的时候 有滚动条而且四周还有空白