Wie kann ich die Iframe-Höhe dynamisch anpassen und dabei die Same-Origin-Richtlinie umgehen?

Dynamische Iframe-Höhenanpassung

Bei der Integration von Inhalten aus externen Quellen über Iframes ist die Sicherstellung der richtigen Höhenanpassung von entscheidender Bedeutung. Dieser Artikel befasst sich mit einer Lösung, die die Same-Origin-Richtlinie umgeht und es Iframes ermöglicht, die Größe automatisch an ihren Inhalt anzupassen.

Browser-Macken ausnutzen, um die Same-Origin-Richtlinie zu umgehen

Der Schlüssel liegt in der Nutzung einer Browser-Eigenart, die es einer übergeordneten Domäne ermöglicht, mit einem Iframe zu kommunizieren, während der Iframe nicht direkt mit seinem übergeordneten Domäne kommunizieren kann. Diese Kommunikationshierarchie wird unten dargestellt:

Page	Can Communicate With
www.foo.com/home.html	N/A (parent)
www.bar.net/framed.html	www.foo.com/helper.html (child)
www.foo.com/helper.html	www.foo.com/home.html (parent)

Übergabe von Höheninformationen mithilfe von URL-Argumenten

Um die Höhe des Iframes zu bestimmen, muss die Inhaltsseite (www.bar.net/) verwendet werden. Framed.html) berechnet es und legt das src-Attribut eines Hilfs-Iframes (in derselben Domäne wie das übergeordnete Element) über ein URL-Argument fest. Der Hilfs-Iframe leitet diese Informationen dann an das übergeordnete Element weiter, das die Iframe-Höhe entsprechend anpassen kann.

Code-Implementierung

www.foo.com/home. html (Übergeordnete Seite):

function resizeIframe(height) {
  // Adjust the iframe height with a slight margin
  document.getElementById('frame_name_here').height = parseInt(height) + 60;
}

www.bar.net/framed.html (Untergeordnete Seite). Seite):

function iframeResizePipe() {
  // Calculate and pass the height to the helper iframe
  var height = document.body.scrollHeight;
  var pipe = document.getElementById('helpframe');
  pipe.src = 'http://www.foo.com/helper.html?height=' + height + '&cacheb=' + Math.random();
}

www.foo.com/helper.html (Helferseite):

function parentIframeResize() {
  // Extract the height from the URL argument
  var height = getParam('height');

  // Communicate the height to the parent page
  parent.parent.resizeIframe(height);
}

Das obige ist der detaillierte Inhalt vonWie kann ich die Iframe-Höhe dynamisch anpassen und dabei die Same-Origin-Richtlinie umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!