Cet article décrit la méthode de JS pour implémenter la hauteur adaptative IFRAME. Partagez-le pour votre référence, comme suit:
J'ai été troublé par le niveau élevé d'adaptabilité des iframes auparavant, et beaucoup de code JS semble être stupide dans FF. Plus tard, le code suivant a finalement été récupéré par moi à partir des milliers de piles de code qui prétendent être compatibles avec FF. Je l'ai utilisé, c'est vraiment facile à utiliser. Surtout pour les gens comme moi qui ont un faible niveau de JS (je suis tellement gêné), ce code est simple et facile à comprendre et pratique à modifier. Copiez et collez simplement le code suivant dans la balise <body> de la page où l'iframe est situé et modifiez le nom de l'ID (notez qu'il y a deux endroits à modifier, et l'emplacement est expliqué dans le code).
Saluer à des amis qui ont créé ce code.
Étape 1: Entrez le code JS suivant sous la balise <body>
<scriptLanguage = "javascript"> function ajustementframesize () {var frm = document.getElementById ("iframe1"); // remplacer iframe1 par votre nom d'identification var subwweb = document.frames? document.frames ["iframe1"]. Document: frm.ContentDocument; if (frm! = null && subweb! = null) {frm.style.height = "0px"; // Initialisez-le, sinon la grande hauteur de la page sera conservée 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>Étape 2: ajouter id = "iframe1" onload = "ajustementframeSize ()" à la balise iframe
Par exemple: le code de code de copie est le suivant: <iframe id = "iframe1" onload = "ajustementframeSize ()" scrolling = "non" src = "iframe1.html" width = "100%" cible = "_ self" frameborder = "0"> </ iframe>
Ce code a un petit inconvénient, c'est-à-dire que la distance entre le contenu dans l'IFRAME et la bordure extérieure (si la bordure extérieure existe) est un peu petite, vous pouvez donc l'ajuster de manière appropriée par vous-même; De plus, aucun autre navigateur n'a été testé sauf IE6.0 ou supérieur et FF, et aucun autre défaut n'a été trouvé. Si vous trouvez des problèmes pendant l'utilisation ou si vous avez une meilleure solution, veuillez le partager.
Si la page IFRAME contient une page chargée ajax ou ajoutez dynamiquement du contenu via JS, vous pouvez ajouter les méthodes suivantes:
1: Ajoutez le contenu suivant à la sous-page
// Modifiez la fonction d'adresse de fenêtre parent ChangeHeight () {window.top.location.hash = "# height =" + $ (document) .Height ();}Modifiez la partie du DOM pour appeler cette méthode
2: Ajouter la page parent
// hauteur adaptive var iframe = document.getElementById ("iframe1"); fonction 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"; // Empêche la hauteur inchangée lorsque vous cliquez sur d'autres pages} setTimeout (iframeHeight, 100);} iframeHeight ();Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des techniques d'opération JSON dans JavaScript", "Résumé des techniques de commutation JavaScript", "Résumé des effets d'animation Javascript JavaScript" Structures de données et techniques d'algorithmes "," Résumé des algorithmes et techniques de traverse JavaScript "et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.