iframe resizer herunterladen - iframe resizer Quellcode herunterladen

iframe resizer

Anderer Quellcode

v5.3.2

Herunterladen

Einführung

Die iframe-resizer -Bibliothek zielt darauf ab, die Schwachstellen bei der Verwendung von Iframes zu beseitigen. Es passt die Größe Ihres Iframes an die Größe Ihres Inhalts an und überwacht dann den Iframe, um sicherzustellen, dass er immer die perfekte Größe hat.

Zuverlässige Größenänderung

Da Browser keine einzige, durchgängig zuverlässige Methode zur Berechnung der Inhaltsgröße bieten, überprüft iframe-resizer Ihre Seite automatisch und wählt jedes Mal, wenn eine Änderung festgestellt wird, den besten Wert für Ihren Inhalt aus.

Hohe Leistung

Um minimale Auswirkungen auf Ihre Website zu gewährleisten, ist iframe-resizer hochgradig optimiert und nutzt die Mengenlehre , um sicherzustellen, dass nur die Seitenelemente überprüft werden, die sich auf die Größe Ihrer Iframes auswirken.

Selbst auf den komplexesten Seiten kann iframe-resizer Änderungen an HTML und CSS erkennen, die überarbeiteten Inhaltsabmessungen berechnen und den Iframe in weniger als einer Millisekunde aktualisieren.

Domainübergreifend

Unterstützt sowohl interne (gleiche Domäne) als auch externe (domänenübergreifende) IFrames über eine einfache JS-Datei, die so konzipiert ist, dass sie auf den Websites, auf denen sie gehostet wird, keine Auswirkungen hat.

Erweiterte API

Darüber hinaus bietet iframe-resizer eine Reihe fehlender Browser-API-Funktionen, die es Ihnen ermöglichen, Ihren Iframe-Inhalt sicher in die übergeordnete Seite zu integrieren.

Scrollen Sie auf der Seite relativ zur Position des Iframes oder der übergeordneten Seite
Erhalten Sie Details zur Position des Iframes, zur Bildlaufposition und zum Ansichtsbereich der übergeordneten Seite
Behebt die Seitenverknüpfung im Iframe und ermöglicht die Weitergabe von Links an die übergeordnete Seite
Fügt die Ereignisse onMouseEnter und onMouseLeave zum iframe-Element hinzu
Vereinfachter Nachrichtenaustausch zwischen dem Iframe und der übergeordneten Seite
Automatische Domänenauthentifizierung
Verbesserte Zugänglichkeit

In Kombination mit viewer.js kann es sogar die Größe von Iframes ändern, die PDF- und ODF-Dokumente enthalten.

Einrichtungs- und API-Anleitung

Einrichtungsanleitungen und API-Dokumentation finden Sie auf der iframe-resizer -Website. Dazu gehören Versionen für:

Vanille JS
Reagieren
Vue
Eckig
jQuery

Zusammen mit Einrichtungsanleitungen für:

Wordpress
Google Apps-Skript

Es gibt auch eine API zur Unterstützung der Erstellung zusätzlicher benutzerdefinierter Komponenten.

Version 5

Diese Version von iframe-resizer wurde umfassend umgeschrieben, um moderne Browser-APIs zu verwenden. Dies hat eine deutlich bessere Leistung und eine höhere Genauigkeit bei der Erkennung von Ereignissen zur Größenänderung von Inhalten ermöglicht.

Mit dieser Version wurde die Gelegenheit genutzt, die API zu aktualisieren und zu vereinfachen. Wenn Sie von einer früheren Version kommen, gibt es einen Upgrade-Leitfaden, der die Änderungen erklärt.

Hauptpakete

Für Version 5 ist iframe-resizer in zwei Hauptpakete aufgeteilt, um die Bereitstellung über verschiedene Domänen hinweg zu vereinfachen und Tree Shaking besser zu unterstützen. Diese beiden Pakete können von NPM installiert oder als ZIP-Datei heruntergeladen werden.

@iframe-resizer/parent

Das übergeordnete Seitenpaket richtet einen Iframe für die automatische Größenänderung des Inhalts ein. Es gibt Versionen dieses Pakets für mehrere beliebte Bibliotheken und Frameworks (siehe unten).

@iframe-resizer/child

Dieses Paket muss in den Iframe geladen werden, wo es vor der Initialisierung stillschweigend auf eine Nachricht von der übergeordneten Seite wartet. Es ist darauf ausgelegt, ein guter Gast auf der Website einer anderen Person zu sein.