2016-06-10 15 views
2

Ich habe diese für ein paar Tage untersucht, und ich bin fest ... Ich lese diese Seite:Ändern der Größe eines iframe Höhe, wenn der Inhalt des iframe ändern (gleiche Domain)

Resizing an iframe based on content

und diese Seite:

Auto resize iframe height when the height of the iframe contents change (same domain)

es scheint, es ist relativ einfach, ein iframe, um die Größe, wenn die Maine index.html, die iframes ersten Lasten enthält, aber sobald die iframe Inhalt ändert kann ich nicht herausfinden, wie neu -Größe th e iframe.

meine index.html:

<body> 
<iframe seamless frameborder="0" name="top" id="top" src="venues.php" width="100%" height="100" /></iframe> 
<iframe seamless frameborder="0" name="main" id="main" src="admin.php" width="100%" height="2000" /></iframe> 

Wenn venues.php Lasten es ist 100px (was in Ordnung ist), aber wenn jemand clisk in einer (intern, derselben Domäne) Link in der venues.php Seite Ich muss die Höhe der "oberen" Rahmengröße ändern, um sie an die neuen Inhalte anzupassen.

Ich habe eine Reihe von Lösungen ausprobiert, die ich immer nur bei der ersten Ladung ändern kann, aber nicht, wenn jemand darin klickt.

Dank

+0

habe ich dies mit JS in dem Rahmen gelöst, um eine Nachricht an JS in dem Behälter zu senden. Die Nachricht gibt an, wie groß der Frame sein muss. Das JS im Container passt die Größe des Steuerelements an. – Richard

+0

können Sie mir ein Beispiel zeigen oder mir zumindest sagen, wie Sie die Nachricht an den Container senden? Ich war unter dem Eindruck (von Dingen, die ich in einem dieser Links gelesen habe), dass Sie nicht vom Kind zum Elternteil kommunizieren können – marcnyc

+0

Haben Sie sich angeschaut: - http://stackoverflow.com/questions/12082125/resize-iframe -on-content-refresh-or-update –

Antwort

1

könnten Sie die mutation observer Ereignis verwenden und die postMessage API, ist es sehr schwierig ist, Skript zu erstellen und zu implementieren, die die Dimension Messungen eines iframe aushandeln können, die sich häufig ändern. Ich gab auf etwas von Grund auf neu zu schreiben und verwendet, um dieses kleine Plugin:

https://github.com/davidjbradshaw/iframe-resizer

Diese Plunker die Verwendung dieses Plugin zeigt, wenn das mutation observer Ereignis Feuer festzustellen, wenn die Größenänderung des iframe passiert.

PLUNKER

+0

Vielen Dank für den Plunker, der mir sehr geholfen hat ... – marcnyc

+0

Kein Problem, ich bin glücklich zu helfen. – zer00ne

0

Sie einen Blick auf David Bradshaws git Repo

für

Er entwickelt ein schönes Skript zu tun, was Sie suchen haben.

Behalten Sie dieselben und domänenübergreifende iFrames, die auf ihren Inhalt zugeschnitten sind, mit Unterstützung für> Fenster-/Inhaltsgrößenanpassung, Seitenverknüpfungen, Verschachtelung und mehrere iFrames. > (Dependency frei, IE8 +) http://davidjbradshaw.github.io/iframe-resizer/

+0

Ich habe mir Bradshaws iFrame Resizer angeschaut, aber ich konnte es nicht zur Arbeit bringen ... in der Tat in Chrome (lokal) sein Testbeispiel funktionierte nicht einmal für mich – marcnyc

+0

@marcnyc Try my Demo, Chrome 51 Tests gut. – zer00ne

Verwandte Themen