Wie kann ich die Höhe eines iFrames dynamisch ändern, um seinen Inhalt in allen Browsern anzupassen?

Dynamische Größenanpassung der iFrame-Höhe an den Inhalt

Beim Einbetten einer ASPX-Seite in einen iFrame passt die Höhe des iFrames möglicherweise nicht ausreichend zum Inhalt, was zu unerwünschten Bildlaufleisten führt. Um dieses Problem zu beheben, untersuchen wir eine browserübergreifende Lösung.

Verstehen der browserübergreifenden Herausforderung

Der bereitgestellte jQuery-Ansatz passt die Höhe des iFrames in Chrome erfolgreich an, stößt jedoch auf ein Problem in Firefox. Diese Diskrepanz entsteht durch Unterschiede in der Art und Weise, wie verschiedene Browser Cross-Site-Scripting (XSS)-Einschränkungen handhaben.

Die optimale Lösung

Um die Höhe des iFrame-Inhalts zu bestimmen, nutzen wir contentWindow.document. body.scrollHeight. Sobald der iFrame geladen ist, ändern wir seine Größe dynamisch mit dem folgenden JavaScript:

function iframeLoaded() {
    var iFrameID = document.getElementById('idIframe');
    if(iFrameID) {
          iFrameID.height = "";
          iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
    }   
}

Implementierung

Integieren Sie dieses JavaScript in die Seite, auf der Sie den iFrame eingebettet haben, und verknüpfen Sie den Event-Handler damit das onLoad-Attribut des iFrame-Tags:

<iframe>

Erweiterter Anwendungsfall

In In Szenarien, in denen Inhaltsaktualisierungen innerhalb des iFrames ein manuelles Auslösen des Resizers erfordern, können Sie iframeLoaded() aus den Inhaltsskripten des iFrames aufrufen:

parent.iframeLoaded();

Diese umfassende Lösung bietet browserübergreifende Kompatibilität für die dynamische Größenänderung der iFrame-Höhe basierend auf seinen Inhalt, wodurch unerwünschte Bildlaufleisten entfernt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines iFrames dynamisch ändern, um seinen Inhalt in allen Browsern anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!