Как я могу изменить размер iframe изнутри?

Я работаю с jquery, и я наткнулся на следующую проблему: я добавил IFrame на главную страницу, и я хочу изменить размер изнутри. Я пробовал некоторые идеи, но безуспешно.

Вот мой код:

index.html

<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <iframe id="myframe" src="frame.html" width="100px" height="100px"></frame>
    </body>
</html>

frame.html

<html>
    <head>
        <title>IFrame</title>
        <script>
            document.width = 500;
            document.height = 500;
        </script>
    </head>
    <body>
        <h2>My IFrame</h2>
    </body>
</html>

Ответ 1

При создании IFRAME браузер автоматически добавляет объект 'window' для IFRAME внутри объекта 'window' главной страницы.

Вам нужно изменить размер IFRAME, а не размер документа.

Попробуйте этот код:

Для JavaScript:

window.parent.document.getElementById('myframe').width = '500px';
window.parent.document.getElementById('myframe').height = '500px';

И для jQuery:

$('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');

Ответ 2

Если обе страницы находятся в одном домене (или даже субдомене, если вы установили document.domain, возможно, не протестировали его), вы можете просто установить его из javascript (или jQuery):

window.parent.document.getElementById('myframe').width = '500px';

Ответ 3

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

Другой способ использования Javascript

document.getElementById("ifr").height= "500px";
document.getElementById("ifr").width= "500px";

DEMO JSFIDDLE