Введение статьи Wulin.com (www.vevb.com): кто -то, возможно, еще не столкнулся с этой проблемой. Давайте сначала объясним, что такое адаптивная высота. Так называемая адаптивная высота iframe означает, что, основываясь на красоте интерфейса и взаимодействия, граница и прокрутка Iframe скрыты, что делает невозможным видеть, что это iframe. Если iframe всегда вызывает одну и ту же страницу с фиксированной высотой, нам просто нужно написать высоту iframe до смерти. И
Поиск адаптивной высоты IFRAME через Google, с результатами более 5 Вт, поиск адаптивной высоты высоты iframe, с результатами более 2 Вт.Я прочитал десятки статей в предыдущих статьях и выкапывал большое количество перепечаток. Есть три или пять статей, которые являются оригинальными. В этих оригинальных статьях они в основном говорят только о том, как адаптироваться к статическим вещам, но они не рассматривают, как делать динамическую синхронизацию после того, как JS управляет DOM. Кроме того, с точки зрения совместимости исследование также было неполным.
Я надеюсь провести глубокие исследования в этих двух аспектах.
Может быть, кто -то еще не вступил в контакт с этой проблемой. Давайте сначала объясним, что такое адаптивная высота. Так называемая адаптивная высота iframe означает, что, основываясь на красоте интерфейса и взаимодействия, граница и прокрутка Iframe скрыты, что делает невозможным видеть, что это iframe. Если iframe всегда вызывает одну и ту же страницу с фиксированной высотой, нам просто нужно написать высоту iframe до смерти. Если iframe хочет переключать страницы, или включенная страница должна выполнять динамические операции DOM, программа должна синхронизировать высоту iframe и фактическую высоту включенной страницы.
Кстати, если вам нужно использовать iframe, это вызовет слишком много проблем для фронтального развития.
Есть примерно две традиционные практики:
Метод 1: После того, как каждая включенная страница была загружена путем загрузки собственного контента, выполните JS, чтобы получить высоту этой страницы, а затем синхронизировать высоту iframe на родительской странице.
Метод 2: Выполните JS в событии Onload на основной странице Iframe, получите содержание высоты включенной страницы, а затем синхронизируйте высоту.
С точки зрения обслуживания кода, метод второй лучше, чем первый метод, потому что каждый метод, каждый из которых включал в себя страницу, должен ввести часть одного и того же кода для этого, и было создано много копий.
Оба метода имеют дело только с тихими вещами, то есть они выполняются только тогда, когда контент загружен. Если JS управляет изменением высоты, вызванными DOM, это не очень удобно.
Если вы делаете интервал в главном окне, постоянно получаете высоту включенной страницы, а затем делайте синхронизацию, удобна ли это и решает проблему JS, управляющего DOM? Ответ да.
Демо -страница: главная страница iframe_a.html, содержащая страницы iframe_b.htm и iframe_c.html
Пример кода основной страницы:
<iframe id = frame_content src = iframe_b.html scolling = no frameborder = 0> </iframe> <script type = text/javascript>
function reinitiframe () {
var iframe = document.getElementbyId (frame_content);
пытаться{
iframe.height = iframe.contentwindow.document.documentelement.scrollheight;
} catch (ex) {}
}
window.setInterval (reinitiframe (), 200);
< /script> будет ли какая -то проблема с эффективностью?
Я провел тест и открыл 5 Windows (IE6, IE7, FF, Opera, Safari) для выполнения этого кода, который не окажет никакого влияния на процессор, и он даже будет скорректирован до 2 мс без какого -либо воздействия (в основном поддержан при размещении 0%).
Давайте поговорим о проблемах совместимости каждого браузера. Как добраться до правильной высоты. В основном стоит сравнить два тела. Scrollheight и DocumentElement.scrollheight. Обратите внимание, что в этой статье используется этот документ. Различные документы не должны влиять на результат, но если ваша страница не объявляет Doctype, то сначала добавьте один.
<! Doctype html public -// w3c // dtd html 4.01 // en>> Добавить следующий тестовый код на основную страницу для вывода этих двух значений, пример кода:
<div> <tutning> Проверьте высоту </button> </div> <script type = text/javascript>
function chestheight () {
var iframe = document.getElementbyId (frame_content);
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
предупреждение (Bheight: + Bheight +, Dheight: + dheight);
}
< /script> загружается, и абсолютно расположенный слой может быть переключен для динамического изменения высоты страницы. Если слой расширен, высота страницы будет поддерживаться. Пример кода:
<div> <buton> перевернуть наложение </button>
< /div>
<div style = высота: 160px; положение: относительно>
<div id = overlay style = position: абсолютная; ширина: 280px; высота: 280px; дисплей: нет;> </div>
< /div>
<script type = text/javascript>
функция toggleOverlay () {
var alplay = document.getElementById ('overlay');
alplay.style.display = (alplay.style.display == 'none')? «Блок»: «Нет»;
}
< /script> В следующем перечислены тестовые значения приведенного выше кода в каждом браузере:
(bheight = body.scrollheight, dheight = documentelement.scrollheight, red = значение ошибки, зеленое = правильное значение)
/ Слой скрыт при расширении слоя
Bheight dheight bheight dheight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
Opera 181 181 300 300
Сафари 184 184 303 184
Давайте проигнорируем проблему, что опера на 3 пикселя меньше, чем другие ... видно, что если нет абсолютного позиционирования, два значения равны, и не имеет значения, какой из них вы принимаете.
Но если есть, то производительность каждого браузера отличается, и неправильно принимать какую -либо ценность в одиночку. Но одно правило можно найти, то есть взять два максимальных значения и быть совместимым с каждым браузером. Таким образом, наш код главной страницы должен быть преобразован в это:
function reinitiframe () {var iframe = document.getElementbyId (frame_content);
пытаться{
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
var height = math.max (bheight, dheight);
iframe.height = высота;
} catch (ex) {}
}
window.setInterval (reinitiframe (), 200); Таким образом, проблема совместимости в основном решена. Кстати, не только абсолютно позиционированный слой влияет на значение, но и вызовет разницу между двумя значениями.
Если вы продемонстрируете демонстрацию, вы обнаружите, что в других браузерах, за исключением IE, когда слой расширяется, а затем скрыто, полученное значение высоты все еще сохраняется на расширенной высоте 303, а не истинное значение, скрытое назад 184, что означает, что он не может уменьшаться после роста выше. Это явление также может произойти при переключении между различными включенными страницами. При переходе со высокой страницы на низкую страницу полученная высота по -прежнему является таким же высоким значением.
Он может быть обобщен как: когда высота формы iframe выше фактической высоты документа, высота принимается как высота формы, а когда высота формы ниже фактической высоты документа, фактическая высота документа принимается в качестве фактической высоты документа. Следовательно, необходимо найти способ установить высоту на более низкое значение, чем фактический документ, прежде чем синхронизировать его. Следовательно, добавьте onload = this.height = 100 ″ к iframe, чтобы страница была достаточно короткой при загрузке, а затем синхронизируется до той же высоты.
Это значение определяется в реальных приложениях и достаточно короткое, но не слишком короткое, в противном случае будет очевидное мерцание в браузерах, таких как FF. Когда DOM работает, главная страница не может быть отслежена, поэтому высота может быть уменьшена после работы DOM.
В одном из моих реальных проектов я не делал этого с точки зрения взвешивания затрат и выгод, потому что мне приходится вставить этот код в каждую функцию DOM, что слишком дорого, и на самом деле не так фатально уменьшить слой или не сокращать его. В том числе в демонстрацию, эта вещь не была сделана. Если у читателя есть лучший путь, пожалуйста, дайте мне знать.
Вот код для последней главной страницы:
<iframe id = frame_content src = iframe_b.html scolling = no frameborder = 0> </iframe>
<script type = text/javascript>
function reinitiframe () {
var iframe = document.getElementbyId (frame_content);
пытаться{
var bheight = iframe.contentwindow.document.body.scrollheight;
var dheight = iframe.contentwindow.document.documentelement.scrollheight;
var height = math.max (bheight, dheight);
iframe.height = высота;
} catch (ex) {}
}
window.setInterval (reinitiframe (), 200);
< /script>