In diesem Artikel wird die Methode von JS beschrieben, um Iframe adaptive Höhe zu implementieren. Teilen Sie es für Ihre Referenz wie folgt weiter:
Ich war schon einmal von der hohen Anpassungsfähigkeit von IFrames in Schwierigkeiten geraten, und viele JS -Code scheint in FF dumm zu sein. Später wurde der folgende Code schließlich von den Tausenden von Codepfählen abgerufen, die behaupten, mit FF kompatibel zu sein. Ich habe es benutzt, es ist wirklich einfach zu bedienen. Besonders für Leute wie mich, die ein geringes Maß an JS haben (es ist mir so verlegen), ist dieser Code einfach und leicht zu verstehen und bequem zu ändern. Kopieren Sie einfach den folgenden Code in das <body> -Tag der Seite, auf dem sich der Iframe befindet, und ändern Sie den ID -Namen (Beachten Sie, dass zwei Stellen geändert werden müssen und der Ort im Code erläutert wird).
Gruß an Freunde, die diesen Code erstellt haben.
Schritt 1: Geben Sie den folgenden JS -Code unter das <body> -Tag ein
<scriptUloGuage = "javaScript"> Funktion ordnungsgeräte () {var frm = document.getElementById ("iframe1"); // iFrame1 durch Ihren ID -Namen ersetzen var subweb = document.frames? document.frames ["iframe1"]. Dokument: Frm.ContentDocument; if (frm! = null && subweb! Frm.style.width = subweb.documentElement.scrollwidth+"px"; subweb.body.style.overflowx = "auto"; subweb.body.style.overflowy = "auto"; }} </script>Schritt 2: ID = "iframe1" onload = "ordnungsfeuer ()" zum iFrame -Tag hinzufügen
Zum Beispiel: Der Code -Code des Kopierens lautet wie folgt: <iframe id = "iframe1" onload = "ordnungsframessize ()" scrolling = "no" src = "iframe1.html" width = "100%" target = "_ self" Frameborder = "0"> </iframe> </iframe> </iframe> </iframe> </iframe>
Dieser Code hat einen kleinen Nachteil, dh der Abstand zwischen dem Inhalt im Iframe und dem äußeren Rand (wenn der äußere Grenze existiert) etwas klein ist, sodass Sie ihn angemessen anpassen können. Darüber hinaus wurden keine anderen Browser getestet, außer IE6.0 oder mehr und FF, und es wurden keine anderen Defekte gefunden. Wenn Sie während des Gebrauchs Probleme finden oder eine bessere Lösung haben, teilen Sie sie bitte mit.
Wenn die Seite von Iframe eine AJAX-beladene Seite enthält oder Inhalte über JS dynamisch hinzufügt, können Sie die folgenden Methoden hinzufügen:
1: Fügen Sie dem Unterseite den folgenden Inhalt hinzu
// Die Funktion der übergeordneten Fensteradresse ändern.
Ändern Sie den Teil des DOM, um diese Methode aufzurufen
2: Fügen Sie die übergeordnete Seite hinzu
// Höhe adaptive var iframe = document.getElementById ("iframe1"); Funktion iframHeight () {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"; // verhindern, dass die Höhe unverändert beim Klicken auf andere Seiten} setTimeout (iframHeight, 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 Datenstrukturen und Algorithmus -Techniken "," Zusammenfassung der JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Verwendung von JavaScript -Mathematikoperationen ""
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.