无法将子项附加到 iframe

Can't append child to iframe

本文关键字：iframe      更新时间：2023-09-26

我正在尝试向YouTube iframe元素添加div，以便我可以在视频中显示内容。但是这个代码：

<!DOCTYPE html>
<html>
  <body>
   <iframe id="player" width="854" height="480" src="https://www.youtube.com/embed/Jn9r0avp0fY" frameborder="0" allowfullscreen></iframe>
    <script>
var player = document.getElementById('player');
var div = document.createElement('div');
div.id = 'newDiv';
div.innerHTML = 'Hello, world!';
player.appendChild(div);
    </script>
  </body>
</html>

完全没有效果。我可以使用JavaScript来确认div确实在document.getElementById('player').children，但是在检查页面上的元素时，它无处可寻。为什么会这样？

更新：所以我发现这个网站 https://www.reembed.com/成功地将自己的元素覆盖在YouTube嵌入式iframe播放器之上，但我不知道他们是如何实现的。

您可以使用该div 的位置绝对和顶部、左侧 CSS 属性来实现这一点，而无需在 Iframe 中插入div。

这是在 iframe 中附加元素的解决方案。

<!DOCTYPE html>
<html>
<body>
    <iframe id="player" width="854" height="480" src="https://www.youtube.com/embed/Jn9r0avp0fY" frameborder="0" allowfullscreen></iframe>
    <script>
        setTimeout(function() {
            var player = document.getElementById('player');
            var iframeDocument = player.contentDocument || player.contentWindow.document;
            var div = document.createElement('div');
            div.id = 'newDiv';
            div.style.fontSize = '50px';
            div.innerHTML = 'Hello, world!';
            if (iframeDocument) {
                var iframeContent = iframeDocument.getElementsByTagName('body');
                console.log(iframeContent);
                iframeContent[0].appendChild(div);
            }
        }, 100);
    </script>
</body>
</html>

但是请确保您在同一源上访问iframe，否则将遇到跨源安全问题。

检查跨源安全问题安全错误：阻止具有源的帧访问跨源帧

相关文章：