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

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

58 голосов
/ 11 августа 2011

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

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

Ответы [ 2 ]

12 голосов
/ 15 апреля 2014

В iframe: Это означает, что вы должны добавить некоторый код на страницу iframe.Просто добавьте этот скрипт в ваш код В ИФРЕ: 

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

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

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

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

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

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

Вот и все, больше ничего не нужно.

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

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

<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>
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>

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

<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>

Демонстрация

1 голос
/ 16 декабря 2015

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

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

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

...