Heim >Web-Frontend >js-Tutorial >Wie kann ich die iFrame-Höhe mit JavaScript dynamisch anpassen?

Wie kann ich die iFrame-Höhe mit JavaScript dynamisch anpassen?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-31 01:32:09369Durchsuche

How to Dynamically Adjust iFrame Height with JavaScript?

Verwenden Sie JavaScript, um die iFrame-Höhe dynamisch anzupassen

Um die Notwendigkeit von Bildlaufleisten zu beseitigen und einen reaktionsfähigen Iframe zu erstellen, der sich an seinen Inhalt anpasst , erwägen Sie die Verwendung der folgenden Lösung:

Kopfabschnitt Änderung:

Fügen Sie das folgende Skript in den ein. Abschnitt Ihrer Webseite:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  }
</script>

iFrame-Änderung:

Ändern Sie Ihren Iframe-Code wie folgt:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Diese JavaScript-Funktion ruft ab die Höhe des Inhaltsdokuments des Iframes und legt die Höhe des Iframes entsprechend fest. Wenn der Iframe zum ersten Mal geladen wird oder sich sein Inhalt ändert, wird die Funktion „resizeIframe“ ausgelöst, die sicherstellt, dass die Höhe des Iframes immer mit seinem Inhalt synchronisiert ist.

Das obige ist der detaillierte Inhalt vonWie kann ich die iFrame-Höhe mit JavaScript dynamisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn