В этой статье описывается метод JS для реализации адаптивной высоты iframe. Поделитесь этим для вашей ссылки, следующим образом:
Я был обеспокоен высоким уровнем адаптивности IFRAMES раньше, и многие коды JS, кажется, глупы в FF. Позже меня наконец -то было извлечено следующий код из тысяч кодовых свай, которые утверждают, что они совместимы с FF. Я использовал его, это действительно легко использовать. Особенно для таких людей, как я, у которых низкий уровень JS (я так смущен), этот код прост и легко понять и удобно для изменения. Просто скопируйте и вставьте следующий код в тег <body> страницы, где расположен IFRAME, и измените имя идентификатора (обратите внимание, что есть два места, которые нужно изменить, а местоположение объясняется в коде).
Салют друзьям, которые создали этот код.
Шаг 1: Введите следующий код JS в тег <Body>
<scriptlanguage = "javaScript"> function rouctedFramesize () {var frm = document.getElementById ("iframe1"); // заменить iframe1 на имя вашего идентификатора var subweb = document.frames? document.frames ["iframe1"]. Документ: frm.contentdocument; if (frm! = null && subweb! = null) {frm.style.height = "0px"; // инициализировать его, в противном случае большая высота страницы будет оставлена frm.style.height = subweb.documentelement.scrollheight+"px"; frm.style.width = subweb.documentelement.scrollwidth+"px"; subweb.body.style.overflowx = "auto"; subweb.body.style.overflowy = "auto"; }} </script>Шаг 2: Добавить id = "iframe1" onload = "roundframesize ()" в тег iframe
Например: код кода копирования выглядит следующим образом: <iframe id = "iframe1" onload = "roundframesize ()" scolling = "no" src = "iframe1.html" width = "100%" target = "_ self" crameborder = "0"> </iframe>
Этот код имеет небольшой недостаток, то есть расстояние между содержанием в iframe и внешней границей (если внешняя граница существует) немного мало, поэтому вы можете настроить его соответствующим образом; Кроме того, другие браузеры не были проверены, кроме как IE6.0 или выше и FF, и не было обнаружено других дефектов. Если вы находите проблемы во время использования или имеете лучшее решение, пожалуйста, поделитесь им.
Если страница iframe содержит страницу Ajax, загруженную или динамически добавьте контент через JS, вы можете добавить следующие методы:
1: Добавьте следующее контент в подпаку
// Изменить функцию адреса родительского окна «Изменение» () {window.top.location.hash = "#height =" + $ (document) .height ();}Измените часть DOM, чтобы вызвать этот метод
2: добавить родительскую страницу
// Высота адаптивная var iframe = document.getElementbyId ("iframe1"); function iframeheight () {var hash = window.location.hash.slice (1), h; if (hash && /height=/.test(hash)) {h = hash.replace ("height =", ""); iframe.style.height = h+"px"; window.location.hash = "#temp"; // предотвратить высоту без изменений при нажатии на другие страницы} settimeout (iframeheight, 100);} iframeheight ();For more information about JavaScript related content, please check out the topics of this site: "Summary of JSON operation techniques in JavaScript", "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript Структуры данных и методы алгоритма »,« Сводка алгоритмов и методов обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.