davidjbradshaw / iframe-resizer

Diese Bibliothek ermöglicht die automatische Größenanpassung der Höhe und Breite sowohl gleicher als auch domänenübergreifender iFrames an den enthaltenen Inhalt. Sie bietet eine Reihe von Funktionen, um die häufigsten Probleme bei der Verwendung von iFrames zu lösen, dazu gehören:

• Höhen- und Breitenanpassung des iFrames an die Inhaltsgröße.
• Arbeitet mit mehreren und verschachtelten iFrames.
• Domänenauthentifizierung für domänenübergreifende iFrames.
• Bietet eine Reihe von Methoden zur Berechnung der Seitengröße, um komplexe CSS-Layouts zu unterstützen.
• Erfasst Änderungen am DOM, die eine Größenänderung der Seite bewirken können, mit MutationObserver.
• Erfasst Ereignisse, die eine Größenänderung der Seite bewirken können (Fenstergröße, CSS-Animation und -Übergang, Ausrichtungsänderung und Mausereignisse).
• Vereinfachte Nachrichtenübermittlung zwischen iFrame und Host-Seite über postMessage.
• Fixes in Seitenlinks im iFrame und Unterstützung von Links zwischen dem iFrame und der übergeordneten Seite.
• Bietet benutzerdefinierte Größen- und Bildlaufmethoden.
• Zeigt dem iFrame die übergeordnete Position und die Größe des Ansichtsfensters an.
• Bietet onMouseEnter und onMouseLeaveEreignisse für den iFrame.
• Arbeitet mit ViewerJS, um PDF- und ODF-Dokumente zu unterstützen.
• Unterstützt IE 11 (V3 unterstützt IE8)

Spenden

Der iFrame-Resizer ist das Ergebnis von vielen 100 Stunden Arbeit, wenn Sie sich anderen anschließen möchten, um die weitere Entwicklung dieses Projekts zu unterstützen, dann laden Sie mich bitte auf einen Kaffee ein.

Getting Started

Install

Dieses Paket kann über NPM (npm install iframe-resizer --save) installiert werden.

Usage

Das Paket enthält zwei minifizierte JavaScript Dateien im js Ordner. Die erste (iframeResizer.min.js) ist für die Seite, die die iFrames hostet. Sie kann über JavaScript aufgerufen werden:

const iframes = iFrameResize( , || );

Die zweite Datei (iframeResizer.contentWindow.min.js) muss in der/den Seite(n) platziert werden, die in Ihrem iFrame enthalten sind. Diese Datei ist als Gast auf einem fremden System gedacht, hat also keine Abhängigkeiten und tut nichts, bis sie durch eine Nachricht von der Seite, die sie enthält, aktiviert wird.

Typische Konfiguration

Die normale Konfiguration sieht vor, dass der iFrame seine Größe ändert, wenn sich das Browserfenster oder der Inhalt des iFrames ändert. Um dies einzurichten, müssen Sie eine der Dimensionen des iFrames auf einen Prozentsatz konfigurieren und der Bibliothek mitteilen, dass nur die andere Dimension aktualisiert werden soll. Normalerweise würde man die Breite auf 100% setzen und die Höhe skalieren lassen, um sie an den Inhalt anzupassen.

<style> iframe { width: 1px; min-width: 100%; }</style><iframe src="http://anotherdomain.com/iframe.html"></iframe><script> iFrameResize({ log: true }, '#myIframe')</script>

Hinweis: Die Verwendung von min-width, um die Breite des iFrames festzulegen, umgeht ein Problem in iOS, das verhindern kann, dass der iFrame die richtige Größe hat.

Wenn Sie Probleme haben, lesen Sie den Abschnitt zur Fehlerbehebung.

Beispiel

Um zu sehen, wie es funktioniert, schauen Sie sich dieses Beispiel an und beobachten Sie die Konsole.

API-Dokumentation

IFrame-Resizer bietet eine breite Palette von Optionen und APIs sowohl für die übergeordnete Seite als auch für die iframed-Seite.

• Übergeordnete Seiten-API
  • Optionen
  • Events
  • Methoden
• IFramed Seiten-API
  • Optionen
  • Ereignisse
  • Methoden
• Verwendung mit Bibliotheken und Rahmenwerken
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Fehlerbehebung
• Upgrade von Version 3
• Versionsgeschichte

Lizenz