Ich habe ein paar Lösungen ausprobiert, war aber nicht erfolgreich. Ich frage mich, ob es eine Lösung gibt, vorzugsweise mit einem einfach zu befolgenden Tutorial.
iframe
cross-domain
J82
quelle
quelle
Antworten:
Sie haben drei Alternativen:
1. Verwenden Sie iFrame-resizer
Dies ist eine einfache Bibliothek, mit der iFrames an ihren Inhalt angepasst werden können. Es verwendet die APIs PostMessage und MutationObserver mit Fallbacks für IE8-10. Es gibt auch Optionen für die Inhaltsseite, um anzufordern, dass der enthaltende iFrame eine bestimmte Größe hat, und kann den iFrame auch schließen, wenn Sie damit fertig sind.
https://github.com/davidjbradshaw/iframe-resizer
2. Verwenden Sie Easy XDM (PostMessage + Flash-Kombination)
Easy XDM verwendet eine Reihe von Tricks, um die domänenübergreifende Kommunikation zwischen verschiedenen Fenstern in einer Reihe von Browsern zu ermöglichen. Es gibt Beispiele für die Verwendung für die Größenänderung von Iframes:
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/
Easy XDM verwendet PostMessage in modernen Browsern und eine Flash-basierte Lösung als Ersatz für ältere Browser.
Siehe auch diesen Thread zu Stackoverflow (es gibt auch andere, dies ist eine häufig gestellte Frage). Auch Facebook scheint einen ähnlichen Ansatz zu verwenden .
3. Kommunizieren Sie über einen Server
Eine andere Möglichkeit wäre, die Iframe-Höhe an Ihren Server zu senden und dann von diesem Server über die übergeordnete Webseite mit JSONP abzufragen (oder wenn möglich eine lange Abfrage zu verwenden).
quelle
Ich habe die Lösung gefunden, um die Höhe des Iframes dynamisch basierend auf seinem Inhalt einzustellen. Dies funktioniert für den domänenübergreifenden Inhalt. Es sind einige Schritte zu befolgen, um dies zu erreichen.
Angenommen, Sie haben iframe auf der Webseite "abc.com/page" hinzugefügt
<div> <iframe id="IframeId" src="http://xyz.pqr/contactpage" style="width:100%;" onload="setIframeHeight(this)"></iframe> </div>
Als nächstes müssen Sie das Windows-Ereignis "message" unter der Webseite "abc.com/page" binden.
Beim Laden des Iframes müssen Sie eine Nachricht mit der Nachricht "FrameHeight" an den Inhalt des Iframe-Fensters senden:
quelle
Ich habe die iframe scrollWidth verglichen, bis sich ihre Größe geändert hat, während ich die IFrame-Höhe schrittweise eingestellt habe. Und es hat gut funktioniert für mich. Sie können das Inkrement nach Belieben einstellen.
quelle
Ich habe ein Skript, das mit seinem Inhalt in den Iframe eingefügt wird. Außerdem wird sichergestellt, dass iFrameResizer vorhanden ist (es wird als Skript eingefügt), und anschließend wird die Größenänderung vorgenommen.
Ich werde unten auf ein vereinfachtes Beispiel eingehen.
Dann kann der Iframe-Inhalt mithilfe des folgenden Skripts an eine beliebige Stelle innerhalb einer anderen Seite / Site eingefügt werden:
Der Iframe-Inhalt wird unten eingefügt, wo immer Sie das Skript-Tag platzieren.
Hoffe das ist hilfreich für jemanden. 👍
quelle
<script ... data-src="http://google.com">
und füllte den iframe src damit.[email protected]
Hier ist meine einfache Lösung auf dieser Seite. http://lab.ohshiftlabs.com/iframesize/
So funktioniert es;
Wenn Sie eine Seite in einer anderen Domain bearbeiten können, können Sie grundsätzlich eine andere Iframe-Seite platzieren, die zu Ihrem Server gehört und die Höhe von Cookies spart. Aktualisieren Sie die Höhe des Iframes mit einem Intervall zum Lesen von Cookies, wenn es aktualisiert wird. Das ist alles.
Herunterladen; http://lab.ohshiftlabs.com/iframesize/iframesizepost.zip
Bearbeiten: Dezember 2019
Die obige Lösung verwendet grundsätzlich einen anderen Iframe innerhalb eines Iframes. Der dritte Iframe gehört zur Domäne der obersten Seite, die Sie diese Seite mit einer Abfragezeichenfolge aufrufen, die den Größenwert in einem Cookie speichert. Die äußere Seite überprüft diese Abfrage mit einem gewissen Intervall. Aber es ist keine gute Lösung, deshalb sollten Sie dieser folgen:
In der oberen Seite:
Hier können Sie überprüfen
m.origin
, woher es kommt.In der Rahmenseite:
Bitte vergessen Sie jedoch nicht, dass dies nicht so sicher ist. Um es sicher zu machen, aktualisieren Sie * den Wert (targetOrigin) mit Ihrem gewünschten Wert. Bitte folgen Sie der Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
quelle
Ich habe eine andere serverseitige Lösung für Webentwickler gefunden, die PHP verwendet, um die Größe eines Iframes zu erhalten.
Zunächst wird das Serverskript PHP für einen externen Aufruf über eine interne Funktion verwendet: (wie ein
file_get_contents
with but curl und dom).Sie müssen unter div (
iframe_reserve
) das vom Funktionsaufruf generierte HTML mit einem einfachen anzeigenecho curl_get_file_contents("location url iframe","activation proxy")
Danach nimmt eine mit Javascript geladene Body-Event-Funktion die Höhe des Seiten-Iframes nur mit einer einfachen Steuerung des Inhalts div (
iframe_reserve
) an.Also habe ich die
divHeight = document.getElementById("iframe_reserve").clientHeight;
Höhe der externen Seite ermittelt, die wir nach dem Maskieren des div-Containers (iframe_reserve
) aufrufen werden . Danach laden wir den Iframe mit seiner guten Höhe, das ist alles.quelle
Ich bin auf dieses Problem gestoßen, als ich an etwas bei der Arbeit gearbeitet habe (mit React). Grundsätzlich haben wir einige externe HTML-Inhalte, die wir in unserer Dokumententabelle in der Datenbank speichern und dann unter bestimmten Umständen auf der Seite einfügen, wenn Sie sich im Dataset "Dokumente" befinden.
Also, da
n
inlines, von denen bis zun
externen html enthalten könnte, brauchten wir ein System zu entwickeln , um automatisch die iframe jeden Inline - Größe ändern , sobald der Inhalt vollständig in jedem geladen. Nachdem ich ein bisschen mit den Rädern gedreht hatte, habe ich es so gemacht:message
im Index unserer React-App einen Ereignis-Listener fest, der nach einem bestimmten Schlüssel sucht, den wir vom Absender-Iframe festlegen.<script>
Tag hinzu, das darauf wartet, dass die Iframes ausgelöst werdenwindow.onload
. Sobald dies ausgelöst wird,postMessage
senden wir eine Nachricht mit Informationen zur Iframe-ID, zur berechneten Höhe usw. an das übergeordnete Fenster.id
des Iframes zu, den wir imMessageEvent
Objekt übergebeniframe
, setzen Sie einfach die Höhe von dem Wert, der vom Iframe übergeben wirdpostMessage
.quelle