Wie kann ich dafür sorgen, dass die Größe eines Iframes automatisch an seinen Inhalt angepasst wird?

Iframe-Abmessungen automatisch an den Inhalt anpassen

Problem:

Wie können Breite und Höhe eines Iframes automatisch angepasst werden? um genau zu seinem enthaltenen Inhalt zu passen? Diese Anpassung sollte möglich sein, nachdem der Iframe geladen wurde.

Lösung:

Um dies zu erreichen, ist eine Ereignisaktion erforderlich, um Änderungen in den Abmessungen des Körpers darin zu verarbeiten der Iframe. Hier ist die Lösung:

function resizeIFrameToFitContent(iFrame) {
  iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
  iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener("DOMContentLoaded", function (e) {
  var iFrame = document.getElementById("iFrame1");
  resizeIFrameToFitContent(iFrame);

  // To resize all iframes:
  var iframes = document.querySelectorAll("iframe");
  for (var i = 0; i < iframes.length; i++) {
    resizeIFrameToFitContent(iframes[i]);
  }
});

Im obigen Code:

• Die Funktion resizeIFrameToFitContent() legt die Breiten- und Höhenattribute des Iframes basierend auf der Bildlaufbreite und -höhe fest enthaltener Körper.
• Der DOMContentLoaded-Ereignis-Listener wird verwendet, um die Abmessungen des Iframes anzupassen, nachdem der Iframe dies getan hat geladen.
• Der optionale zusätzliche Code (auskommentiert) kann verwendet werden, um die Größe aller Iframes auf der Seite zu ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass die Größe eines Iframes automatisch an seinen Inhalt angepasst wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!