Wie kann ich die Größe eines Iframes dynamisch anpassen, um ihn an seinen Inhalt anzupassen?

So passen Sie die Iframe-Höhe basierend auf dem Inhalt dynamisch an

In Szenarien, in denen der Inhalt eines Iframes seine Höhenbeschränkung überschreitet, ist eine dynamische Anpassung unerlässlich seine Größe, um den überschüssigen Inhalt aufzunehmen. Dies kann mit einer Kombination aus JavaScript und JQuery erreicht werden.

Um die Höhe des Iframe-Inhalts abzurufen, verwenden Sie den folgenden Code:

contentWindow.document.body.scrollHeight

Sobald der Iframe geladen ist, ändern Sie seine Größe dynamisch mit:

function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if (iFrameID) {
    // Delete and recreate the height to ensure proper resizing
    iFrameID.height = "";
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }
}

Fügen Sie einen „onload“-Ereignishandler in den Iframe ein tag:

<iframe>

Um die dynamische Größenänderung nach Formularübermittlungen innerhalb des Iframes zu handhaben, fügen Sie den folgenden Code in die Inhaltsskripte des Iframes ein:

parent.iframeLoaded();

Dieser Ansatz stellt sicher, dass die Höhe des Iframes angepasst wird dynamisch, um allen Inhalten gerecht zu werden, wodurch Bildlaufleisten überflüssig werden und ein flüssiges Benutzererlebnis über verschiedene Browser hinweg gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Iframes dynamisch anpassen, um ihn an seinen Inhalt anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!