Почему три разговора
Почему три доклада? Во-первых, об этой теме действительно плохо говорят, а во-вторых, потому что Мастер Тай написал эту статью несколько лет назад , чтобы рассказать об адаптивной высоте iframe . Причина, по которой я снова поднимаю этот вопрос, заключается в том, что я действительно сталкивался со всеми аспектами этой проблемы в предыдущих проектах, и необходимо подвести итог. Надеюсь, это вам помогло, поправьте меня, если есть ошибки.
Высота одного и того же домена и подстраниц не будет увеличиваться динамически.
Эта ситуация самая простая. Просто получите фактическую высоту подстраницы непосредственно через скрипт и измените высоту элемента iframe. Но есть два момента, которые необходимо отметить:
Если на странице есть абсолютно позиционированные элементы или нет плавающих элементов, ситуация немного сложнее. Разные браузеры имеют разные результаты обработки, даже браузеры с ядром Webkit. Подробности см. в этой демонстрации . Таким образом, вы либо выполняете обнаружение браузера, либо используете Math.max для вычисления максимального значения, либо думаете о чем-то другом.
Страница, содержащаяся в iframe, может быть очень большой и требовать длительного времени загрузки. При непосредственном расчете высоты вполне вероятно, что страница не загрузилась, и с расчетом высоты возникнут проблемы. Поэтому лучше рассчитывать высоту в событии загрузки iframe. Здесь также следует отметить, что для привязки события загрузки в IE необходимо использовать модель событий Microsoft obj.attachEvent. Другие браузеры также могут напрямую использовать obj.onload = function(){}.
(функция(){
вар _reSetIframe = функция () {
varframe = document.getElementById("frame_content_parent")
пытаться {
варframeContent =frame.contentWindow.document,
bodyHeight = Math.max
(frameContent.body.scrollHeight,
frameContent.documentElement.scrollHeight);
если (bodyHeight!=frame.height){
Frame.height = BodyHeight;
}
}
поймать(бывший) {
рамка.высота = 1800;
}
}
если (frame.addEventListener) {
Frame.addEventListener
(«load», function () {setInterval (_reSetIframe, 200);}, false);
}еще{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
В этом же домене высота подстраниц будет динамически увеличиваться, и скрипт может полностью выйти из строя.
Во втором примере учитываются ошибки скрипта, но если скрипт вообще не выполняется, содержимое iframe не будет отображаться, поскольку высота iframe недостаточно велика. По этой причине мы обычно заранее устанавливаем достаточную высоту. Для удобства внешнего управления я считаю более целесообразным записать ее в файл CSS. Когда требуется модификация, просто измените CSS. Здесь я установил селектор {height:1800px}; Следует отметить, что стили, записанные в таблице стилей, не могут быть получены напрямую с помощью node.style[property]. Для моделей Microsoft необходимо использовать node.currentStyle[property] (отступление: трагическая модель IE не поддерживает псевдо- CSS). классы), для модели W3C используйте window.getComputedStyle(node,null)[property], чтобы получить его. Я использовал непосредственно YUI ради удобства.
Здесь есть еще одна проблема. Когда высота iframe превышает высоту содержащейся в нем страницы, каждый браузер обрабатывает ее по-разному. Например, в Firefox необходимо рассчитать высоту элемента body, а высота элемента html равна высоте iframe. Однако, когда страница имеет абсолютное позиционирование и неопределенные плавающие элементы, этого быть не может. Получается через элемент тела. Очевидно, что первый метод. Недостатков метода меньше. Пожалуйста, посмотрите эту демонстрацию для получения подробной информации.