JS-Methode zur Implementierung der adaptiven Iframe-Höhe (kompatibel mit IE und FireFox)

Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung der adaptiven Iframe-Höhe mit JS. Ich teile es Ihnen als Referenz mit:

Das Problem der adaptiven Iframe-Höhe hat mich schon früher beunruhigt. Viele JS-Codes scheinen in FF dumm zu sein. Später habe ich schließlich den folgenden Code aus dem Stapel Tausender Codes herausgesucht, die angeblich mit FF kompatibel sind. Ich habe es verwendet, es ist wirklich nützlich. Besonders für Leute wie mich mit geringen JS-Kenntnissen (es tut mir leid) ist dieser Code einfach und leicht zu verstehen und leicht zu ändern. Kopieren Sie einfach den folgenden Code und fügen Sie ihn in das -Tag ein lokalisiert und ändern Sie einfach den ID-Namen (beachten Sie, dass zwei Orte geändert werden müssen und die Orte im Code erläutert werden).

Zum Gedenken an den Freund, der diesen Code erstellt hat.

Schritt 1: Geben Sie den folgenden JS-Code unter dem -Tag ein

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : 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>

Schritt 2: Fügen Sie ihn dem Iframe hinzu tag Oben id="iframe1"onload="adjustFrameSize()"

Zum Beispiel:

<iframe id="iframe1"onload="adjustFrameSize()" scrolling="no" src="iframe1.html"width="100%" height="300px" target="_self"frameborder="0"></iframe>

Dieser Code weist einen kleinen Mangel auf, nämlich den Inhalt und den äußeren Rahmen des Iframes Nach der Verwendung ist der Abstand (wenn es einen äußeren Rand gibt) etwas klein, Sie können ihn außerdem entsprechend anpassen. Außerdem habe ich keine anderen Browser außer IE6.0 oder höher und FF getestet und es wurden keine anderen Fehler festgestellt Es ist im Einsatz Kinderschuhe, die Probleme entdeckt haben oder bessere Lösungen haben, können diese gerne mitteilen.

Wenn sich innerhalb der Iframe-Seite eine Ajax-geladene Seite befindet oder sich die Höhe des Iframes aufgrund des dynamischen Hinzufügens von Inhalten durch js ändert, können Sie die folgende Methode hinzufügen:

1: Hinzufügen Fügen Sie der Unterseite den folgenden Inhalt hinzu

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

Ändern Sie den Dom-Teil und rufen Sie diese Methode auf

2: Fügen Sie

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();