Невозможно получить доступ к высоте и ширине стиля iframe и изменить его с помощью JavaScript

Question

У меня проблема с доступом к элементам стиля iframe (в основном это ширина и высота).Я явно не делаю что-то правильно.Надеюсь, кто-то может указать мне правильное направление.Любая помощь или отзывы приветствуются :)

Это моя главная страница (index.html):
Эта страница включает в себя iframe

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

iframe1.html page:
Эта страница содержит файл 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

Если ошибка Uncaught TypeError: Cannot read property 'style' of undefined, возможно, по какой-то причине вы пытаетесь получить доступ к iframe до его загрузки.

Вы можете запустить свою функцию после загрузки DOM. См. документ .

Пример:

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

Answer 2

ширина стиля CSS:

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

реальная ширина:

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

с использованием JQuery:

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