Este artículo describe el método de JS para implementar la altura adaptativa de iframe. Compártelo para su referencia, como sigue:
He estado preocupado por el alto nivel de adaptabilidad de los iframes antes, y mucho código JS parece ser tonto en FF. Más tarde, el siguiente código finalmente fue recuperado por mí de los miles de montones de código que afirman ser compatibles con FF. Lo he usado, es realmente fácil de usar. Especialmente para personas como yo que tienen un bajo nivel de JS (estoy tan avergonzado), este código es simple y fácil de entender y conveniente de modificar. Simplemente copie y pegue el siguiente código en la etiqueta <body> de la página donde se encuentra el iframe y modifique el nombre de ID (tenga en cuenta que hay dos lugares para modificarse, y la ubicación se explica en el código).
Saludo a los amigos que crearon este código.
Paso 1: Ingrese el siguiente código JS en la etiqueta <Body>
<scriptLanguage = "javaScript"> función ajustframesize () {var frm = document.getElementById ("iframe1"); // reemplazar iFrame1 con su nombre de identificación var subweb = document.frames? document.frames ["iframe1"]. Documento: frm.ContentDocument; if (frm! = null && subweb! = null) {frmm.style.height = "0px"; // Inicializarlo, de lo contrario, la altura de la página grande se conservará frmm.style.height = subweb.documentelement.scrollheight+"px"; frmmystyle.width = subweb.documentelement.scrollwidth+"px"; subweb.body.style.overflowx = "auto"; subweb.body.style.overflowy = "auto"; }} </script>Paso 2: Agregar id = "iframe1" onload = "ajusteframesize ()" a la etiqueta iframe
Por ejemplo: el código del código de copia es el siguiente: <iframe id = "iframe1" onload = "ajusteframesize ()" scrolling = "no" src = "iframe1.html" width = "100%" target = "_ self" frameBorder = "0"> </fiframe>
Este código tiene una pequeña desventaja, es decir, la distancia entre el contenido en el iframe y el borde exterior (si el borde exterior existe) es un poco pequeño, por lo que puede ajustarlo adecuadamente solo; Además, no se han probado otros navegadores, excepto IE6.0 o superior y FF, y no se han encontrado otros defectos. Si encuentra problemas durante el uso o tiene una mejor solución, compártelo.
Si la página de iframe contiene página cargada de AJAX o agregue dinámicamente contenido a través de JS, puede agregar los siguientes métodos:
1: Agregue el siguiente contenido a la subpaga
// Modifique la función de dirección de la ventana principal ChangeHeight () {window.top.location.hash = "#height =" + $ (documento) .Height ();}Modificar la parte del DOM para llamar a este método
2: Agregue la página principal
// altura adaptativa var iframe = document.getElementById ("iframe1"); function iframeHeight () {var hash = window.location.hash.slice (1), h; if (hash && /height=/.test(hash)) {h = hash.replace ("altura =", ""); iframe.style.Height = H+"Px"; window.location.hash = "#temp"; // Evite que la altura no cambie al hacer clic en otras páginas} setTimeOut (iframeHeight, 100);} iframeHeight ();Para obtener más información sobre el contenido relacionado con JavaScript, consulte los temas de este sitio: "Resumen de las técnicas de operación JSON en JavaScript", "Resumen de JavaScript Switching Effects and Techniques", "Resumen de JavaScript Algorithm Techniques", "Resumen de efectos de animación de JavaScript y técnicas", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", Estructuras de datos y técnicas de algoritmo "," Resumen de los algoritmos y técnicas transversales de JavaScript "y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.