Создание фрейма занимает вертикальное пространство
-
09-06-2019 - |
Вопрос
Я бы хотел, чтобы iframe
занимал столько вертикального пространства, сколько нужно для отображения его содержимого, а не для отображения полосы прокрутки. Это вообще возможно?
Есть ли обходные пути?
Решение
Это должно установить высоту IFRAME
для высоты содержимого:
<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>
Вы можете добавить scrolling="no"
к своему the_height
, чтобы отключить полосы прокрутки.
edit: Ой, забыли объявить <=>.
Другие советы
Обходной путь - не использовать <iframe>
и код предварительной обработки на стороне сервера.
Также ознакомьтесь с этой темой: Как DiggBar динамически изменяет высоту своего iframe, основываясь на контенте, не принадлежащем их домену? .
Он отвечает на тот же вопрос.
Этот фрагмент CSS должен удалить вертикальную полосу прокрутки:
body {
overflow-x: hidden;
overflow-y: hidden;
}
Я пока не уверен, что он займет столько вертикального пространства, сколько нужно, но я посмотрю, не смогу ли я это выяснить.
Добавление объявления DOCTYPE
в исходный документ IFRAME
поможет вычислить правильное значение из строки
document.getElementById('the_iframe').contentWindow.document.body.scrollHeight
см. W3C DOCTYPE для примеров р>
У меня были проблемы как с IE, так и с FF, поскольку он рендерил документ iframe
в режиме «причуд», пока я не добавил <=>.
Поддержка FF / IE / Chrome: .scrollHeight не работает с Chrome, поэтому я создал пример javascript с использованием jQuery для установки всех значений высоты <=> на странице на основе содержимого iframes. ПРИМЕЧАНИЕ. Это для справочных страниц вашего текущего домена.
<script type="text/javascript">
$(document).ready(function(){
$('iframe').each(function(){
var context = $(this);
context.load(function(event){ // attach the onload event to the iframe
var body = $(this.contentWindow.document).find('body');
if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
context.height($(body.get(0)).height() + 20);
} else {
context.hide(); // hide iframes with no contents
}
});
});
});
</script>