suchen

Heim >Web-Frontend >js-Tutorial >Wie kann ich die Größe eines iFrames basierend auf seinem domänenübergreifenden Inhalt dynamisch ändern?

Wie kann ich die Größe eines iFrames basierend auf seinem domänenübergreifenden Inhalt dynamisch ändern?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-30 10:26:101023Durchsuche

How Can I Dynamically Resize an iFrame Based on its Cross-Domain Content?

Größe eines iFrames basierend auf Inhalt ändern: Navigieren in der domänenübergreifenden Kommunikation

Die domänenübergreifende Herausforderung verstehen

Beim Anzeigen von Inhalten von externen Domänen in iFrames , stellt die Same-Origin-Richtlinie eine Herausforderung dar, wenn es darum geht, die Größe dieser iFrames dynamisch an ihre Bedürfnisse anzupassen Inhalt.

Eine Umgehungsstrategie

Eine Technik zur Umgehung der domänenübergreifenden Beschränkung besteht darin, eine Browser-Eigenart auszunutzen, die die Kommunikation zwischen Seiten in verschachtelten iFrame-Strukturen ermöglicht. Im Wesentlichen:

  • Übergeordnete Seite (www.foo.com/home.html) untergeordnete Iframes-Seite (www.bar.com/framed.html).
  • Untergeordnete Seite (www .bar.com/framed.html) Iframes-Hilfsseite (www.foo.com/helper.html).

Diese Struktur ermöglicht die Kommunikation zwischen:

  • www.bar.com/framed.html und www.foo.com/helper.html (innerhalb desselben iFrame)
  • www.foo.com/home. html und www.foo.com/helper.html (auf dem gleichen domain)

Implementierung

In www.foo.com/home.html:

<script>
  function resizeIframe(height) {
    document.getElementById("frame_name_here").height = parseInt(height) + 60;
  }
</script>
<iframe>

In www. bar.com/framed.html:

<body onload="iframeResizePipe()">
<iframe>

In www.foo.com/helper.html:

<body onload="parentIframeResize()">
<script>
  function parentIframeResize() {
    var height = getParam("height");
    parent.parent.resizeIframe(height);
  }

  function getParam(name) {
    var regex = new RegExp("[\?&]" + name + "=([^&]*)");
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
  }
</script>

Diese Lösung beinhaltet die Kommunikation über einen „Helfer“-Iframe (www.foo.com/helper.html), der sich auf derselben Domain befindet wie der übergeordneten Seite und erleichtert Größenänderungsanfragen zwischen den untergeordneten und übergeordneten iFrames.

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

html for this iframe
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
Vorheriger Artikel：Warum schlägt mein jQuery-Code mit der Fehlermeldung „$ ist nicht definiert“ fehl?Nächster Artikel：Warum schlägt mein jQuery-Code mit der Fehlermeldung „$ ist nicht definiert“ fehl?

In Verbindung stehende Artikel

Mehr sehen