Heim > Web-Frontend > js-Tutorial > Wie kann ich die Iframe-Höhe dynamisch anpassen und dabei die Same-Origin-Richtlinie umgehen?

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

Mary-Kate Olsen
Freigeben: 2024-12-17 13:51:16
Original
708 Leute haben es durchsucht

How Can I Dynamically Adjust Iframe Height While Bypassing the Same-Origin Policy?

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;
}
Nach dem Login kopieren

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();
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage