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!