davidjbradshaw / iframe-resizer

Tato knihovna umožňuje automatickou změnu velikosti výšky a šířky stejných i mezidoménových iFramů tak, aby odpovídaly obsaženému obsahu. Poskytuje řadu funkcí, které řeší nejčastější problémy s používáním iFrames, mezi které patří:

• Změna velikosti výšky a šířky iFrames podle velikosti obsahu.
• Pracuje s vícenásobnými a vnořenými iFrames.
• Ověřování domény pro cross domain iFrames.
• Poskytuje řadu metod výpočtu velikosti stránky pro podporu složitých rozvržení CSS.
• Detekuje změny v DOM, které mohou způsobit změnu velikosti stránky pomocí MutationObserver.
• Detekuje události, které mohou způsobit změnu velikosti stránky (změna velikosti okna, animace a přechod CSS, změna orientace a události myši).
• Zjednodušené zasílání zpráv mezi iFrame a hostitelskou stránkou pomocí postMessage.
• Opravuje odkazy na stránce v iFrame a podporuje odkazy mezi iFrame a nadřazenou stránkou.
• Poskytuje vlastní metody nastavení velikosti a posouvání.
• Zobrazuje pozici a velikost nadřazené stránky pro iFrame.
• Poskytuje události onMouseEnter a onMouseLeave pro iFrame.
• Spolupracuje s ViewerJS a podporuje dokumenty PDF a ODF.
• Podporuje IE 11 (V3 podporuje zpětně IE8)

Přispějte

Iframe-resizer je výsledkem mnoha stovek hodin práce, pokud se chcete připojit k ostatním a vyjádřit podporu dalšímu vývoji tohoto projektu, pak mi prosím neváhejte koupit kávu.

Začínáme

Instalovat

Tento balíček lze nainstalovat pomocí NPM (npm install iframe-resizer --save).

Použití

Balíček obsahuje dva minifikované soubory JavaScriptu ve složce js. První z nich (iframeResizer.min.js) je určen pro stránku hostující iFrame. Lze jej volat pomocí JavaScriptu:

const iframes = iFrameResize( , || );

Druhý soubor (iframeResizer.contentWindow.min.js) je třeba umístit na stránku(y) obsaženou(é) ve vašem iFrame. Tento soubor je navržen jako host v cizím systému, takže nemá žádné závislosti a nebude dělat nic, dokud nebude aktivován zprávou ze stránky obsahující iFrame.

Typické nastavení

Obvyklá konfigurace je taková, že se velikost iFrame mění při změně velikosti okna prohlížeče nebo při změně obsahu iFrame. Chcete-li to nastavit, musíte nakonfigurovat jeden z rozměrů iFrame na procenta a říci knihovně, aby aktualizovala pouze druhý rozměr. Normálně byste nastavili šířku na 100 % a nechali výšku škálovat podle obsahu.

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

Poznámka: Použití min-width pro nastavení šířky iFrame obchází problém v systému iOS, který může zabránit správnému nastavení velikosti iFrame.

Pokud máte problémy, podívejte se do části Řešení problémů.

Příklad

Chcete-li se přesvědčit, že to funguje, podívejte se na tento příklad a sledujte konzoli.

Dokumentace API

IFrame-Resizer poskytuje rozsáhlou škálu možností a rozhraní API pro nadřazenou stránku i pro stránku s iframem.

• API nadřazené stránky
  • Možnosti
  • Události
  • Metody
• IFramed Page API
  • Options
  • Events
  • Methods
• Použití s knihovnami a rámci
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Řešení problémů
• Upgrade z verze 3
• Historie verzí

Licence