Question

我将iframe加载到页面上的div中。如果我使用它，它工作正常：

<iframe src="http://myURL.com/embed/whatever/1213" id="frameID" frameBorder="0" width="100%" style="overflow:hidden"></iframe>
<script>
    window.addEventListener( "message",
        function (e) {
            var frameHeight = e.data.height;
            document.getElementById('frameID').height=frameHeight + "px";
        },
        false
    );
</script>

但是，我更倾向于一个完整的JavaScript解决方案，所以我使用以下内容，但它会在页面末尾加载iframe而不是上面的div。

<script>
    var iframe = document.createElement('iframe');       
    document.body.appendChild(iframe);
    iframe.src = 'http://myURL.com/embed/whatever/1213';       
    iframe.width = '100%';
    iframe.id = 'frameID';
    iframe.frameBorder = '0';
    iframe.style = 'overflow:hidden';
    window.addEventListener( "message",
        function (e) {
           var frameHeight = e.data.height;
           alert(frameHeight);
           document.getElementById('frameID').height=frameHeight + "px";         
        },
        false
    );
</script>

为什么会这样做？

Answer 1

使用document.body.appendChild()，您将其作为body的孩子附加。

div是否有id属性？如果您可以使用：

document.getElementById('id-of-div').appendChild(iframe);

这有帮助吗？

没有在正确的位置创建iframe

1 个答案: