Wie kann ich die Größe eines iFrames basierend auf seinem domänenübergreifenden Inhalt dynamisch ändern?-js-Tutorial-php.cn

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

Patricia Arquette

Freigeben： 2024-12-30 10:26:10

Original

1029 Leute haben es durchsucht

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>

Nach dem Login kopieren

In www. bar.com/framed.html:

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!