Установите высоту содержимого iframe для автоматического изменения размера динамически

Я сам искал простое решение для изменения высоты iframe с содержимым в нем.

Похоже, что правила состоят в том, что вы не можете получить высоту iframe со страницы, удерживающей ее. По-видимому, это из-за безопасности. Как мы можем это сделать?

Ответ 1

В iframe: Это означает, что вам нужно добавить код на страницу iframe. Просто добавьте этот script в свой код в IFRAME:

<body onload="parent.alertsize(document.body.scrollHeight);">

На странице холдинга На странице, содержащей iframe (в моем случае с ID = "myiframe" ), добавьте небольшой javascript:

<script>
function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height=pixels+"px";
}
</script>

Теперь происходит то, что при загрузке iframe он запускает javascript в родительском окне, которое в этом случае является страницей, содержащей iframe.

В эту функцию JavaScript он отправляет, сколько пикселей имеет его (iframe) высота.

Родительское окно принимает номер, добавляет 32 к нему, чтобы избежать полосы прокрутки, и устанавливает высоту iframe для нового номера.

Что это, больше ничего не нужно.

Но если вам нравится знать, что еще несколько мелких трюков продолжают читать...

ДИНАМИЧЕСКАЯ ВЫСОТА В IFRAME? Если вы любите меня, чтобы переключать контент, высота iframe будет меняться (без перезагрузки страницы и запуска загрузки). Я обычно добавляю очень простой переключатель script, который я нашел в Интернете:

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
}
</script>

к этому script просто добавьте:

<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>

Как вы используете вышеуказанный script легко:

<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>

Для тех, кому нравится просто вырезать и вставить и перейти отсюда, вот две страницы. В моем случае я имел их в одной папке, но он тоже должен работать с перекрестным доменом (я думаю...)

Полный код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
    pixels+=32;
    document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>

<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>

Полный код iframe: (этот iframe с именем "theiframe.htm" )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != 'block' ) el.style.display = 'block';
    else el.style.display = 'none';
    parent.alertsize(document.body.scrollHeight);
}
</script>
</head>

<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END

</body>
</html>

Демо

Ответ 2

Простое решение:

<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>

Это работает, когда окно iframe и parent находится в одном домене. Это не работает, когда они находятся в разных доменах.