Question

我遇到了一个问题，我似乎无法访问我的iframe样式元素（主要是宽度和高度）。我显然做错了什么。希望有人可以指出我正确的方向。任何帮助或反馈，不胜感激:)

这是我的主页（index.html）：
该页面包含iframe

<iframe class="myiFrame" src="iframes/iframe1.html" allowtransparency="true" frameborder="0"></iframe>

iframe1.html页面：
该页面包含一个javascript文件

<script src="../../../html/files/js/slider.js"></script>

slider.js文件
在此.js文件中，我要访问iframe样式的高度和宽度

document.getElementsByClassName("myiFrame");

此外，在控制台中我收到错误消息

"Uncaught TypeError: Cannot read property 'style' of undefined"

Answer 1

CSS样式宽度：

document.getElementsByClassName("myiFrame")[0].style.width

实际宽度：

document.getElementsByClassName("myiFrame")[0].offsetWidth

使用JQuery：

$(".myiFrame").css("width");

Answer 2

如果错误为Uncaught TypeError: Cannot read property 'style' of undefined，则可能是由于某些原因您试图在iframe加载之前对其进行访问。

您可以在DOM加载后触发您的函数。参见doc。

示例：

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var myIFrame = document.querySelector(".myiFrame");
        console.log({ myIFrame });  // check also this console
        if (myIFrame) {
            // your code
        }
    });
</script>

无法访问iframe样式的高度和宽度并无法使用JavaScript进行更改

2 个答案: