Wie kann ich die Größe eines Iframes basierend auf seiner Inhaltshöhe domänenübergreifend dynamisch ändern?

Größe eines Iframes basierend auf der Inhaltshöhe ändern

Wenn Sie mit Iframes arbeiten, um Inhalte aus anderen Domänen anzuzeigen, können Sie deren Höhe an den Inhalt anpassen aufgrund der Same-Origin-Politik eine Herausforderung darstellen. Diese Richtlinie schränkt die JavaScript-Kommunikation zwischen Seiten auf verschiedenen Domänen ein.

Lösung:

Um diese Einschränkung zu überwinden, ist ein mehrstufiger Ansatz erforderlich, der sowohl den Iframe-Inhalt als auch den iFrame-Inhalt umfasst die Rahmenseite.

1. Cross-Domain-Kommunikation:

Da sich der Iframe-Inhalt und die Framing-Seite auf unterschiedlichen Domains befinden, ist eine direkte Kommunikation nicht möglich. Es kann jedoch ein „Pipe“-Mechanismus mithilfe eines anderen Iframes eingerichtet werden.

2. Höhenberechnung und Nachrichtenweitergabe:

Wenn der Iframe-Inhalt geladen wird, berechnet er seine Höhe und legt die Quelle eines versteckten Iframes auf der Framing-Seite auf eine Hilfsseite in derselben Domain fest und übergibt die berechnete Höhe als Argument in der URL.

3. Größenänderung der Hilfsseite und des übergeordneten Frames:

Die Hilfsseite auf derselben Domain erhält die Höhe vom Iframe-Inhalt und übermittelt sie an den übergeordneten Frame, der dann die Größe des Iframes entsprechend ändern kann.

Code:

Einrahmung Seite:

<script type="text/javascript">
  function resizeIframe(height) {
    document.getElementById('myIframe').height = height + 60;
  }
</script>
<iframe>

Iframe-Inhalt:

<script type="text/javascript">
  function setIframeHeight() {
    var height = document.body.scrollHeight;
    document.getElementById('iframeResizer').src = 'helper.com?height=' + height;
  }
</script>
<iframe>

Hilfeseite:

<script type="text/javascript">
  function resizeParentIframe() {
    var height = getParam('height');
    parent.parent.resizeIframe(height);
  }
  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&amp;#]*)");
    var results = regex.exec(window.location.href);
    return results ? results[1] : "";
  }
</script>

Hinweis:

Diese Lösung setzt die Same-Origin-Richtlinie voraus ermöglicht die JavaScript-Kommunikation zwischen dem Iframe-Inhalt und der Hilfsseite. Ist dies nicht der Fall, können zusätzliche Maßnahmen erforderlich sein.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Iframes basierend auf seiner Inhaltshöhe domänenübergreifend dynamisch ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!