davidjbradshaw / iframe-resizer

Ez a könyvtár lehetővé teszi az azonos és keresztdomain iFrame-ek magasságának és szélességének automatikus átméretezését a tartalmukhoz. Számos funkciót biztosít az iFrame-ek használatával kapcsolatos leggyakoribb problémák megoldására, ezek közé tartozik:

• Az iFrame magasságának és szélességének átméretezése a tartalom méretéhez.
• Működik több és egymásba ágyazott iFrame-ekkel.
• Domain hitelesítés cross domain iFrame-ekhez.
• Egy sor oldalméret számítási módszert biztosít az összetett CSS elrendezések támogatásához.
• A MutationObserver segítségével észleli a DOM olyan változásait, amelyek az oldal méretének megváltoztatását okozhatják.
• Észleli azokat az eseményeket, amelyek az oldal méretének megváltoztatását okozhatják (Window Resize, CSS Animation and Transition, Orientation Change és Mouse események).
• Egyszerűsített üzenetküldés az iFrame és a host oldal között a postMessage segítségével.
• Rögzíti az oldal linkjeit az iFrame-ben, és támogatja az iFrame és a szülőoldal közötti linkeket.
• Egyéni méretezési és görgetési módszereket biztosít.
• Kijelzi az iFrame számára a szülő pozícióját és a nézetablak méretét.
• Megjeleníti a onMouseEnter és onMouseLeave eseményeket az iFrame számára.
• A ViewerJS-szel együttműködve támogatja a PDF és ODF dokumentumokat.
• Támogatja az IE 11-et (a V3 az IE8-ig támogatja)

Donate

Az Iframe-resizer sok száz órányi munka eredménye, ha szeretnél másokkal együtt támogatást nyújtani a projekt további fejlesztéséhez, akkor nyugodtan hívj meg egy kávéra.

Első lépések

Telepítés

Ez a csomag telepíthető az NPM segítségével (npm install iframe-resizer --save).

Használat

A csomag két kicsinyített JavaScript fájlt tartalmaz a js mappában. Az első (iframeResizer.min.js) az iFrame-eket befogadó oldalhoz tartozik. JavaScript segítségével hívható:

const iframes = iFrameResize( , || );

A második fájlt (iframeResizer.contentWindow.min.js) az iFrame-ben található oldal(ak)ban kell elhelyezni. Ez a fájl úgy van kialakítva, hogy vendégként legyen valaki más rendszerén, így nincs függősége, és nem csinál semmit, amíg a tartalmazó oldal üzenete nem aktiválja.

Tipikus beállítás

A normál konfiguráció az, hogy az iFrame akkor változtatja meg a méretét, amikor a böngészőablak mérete vagy az iFrame tartalma megváltozik. Ennek beállításához az iFrame egyik dimenzióját százalékos értékre kell konfigurálni, és meg kell mondani a könyvtárnak, hogy csak a másik dimenziót frissítse. Normális esetben a szélességet 100%-ra állítaná be, a magasságot pedig a tartalomnak megfelelően méretezné.

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

Megjegyzés: A min-width használata az iFrame szélességének beállításához megkerül egy olyan problémát az iOS-ben, amely megakadályozhatja az iFrame helyes méretezését.

Ha problémái vannak, nézze meg a hibaelhárítás részt.

Példa

Hogy lássa, hogy működik, nézze meg ezt a példát, és figyelje a konzolt.

API dokumentáció

AzIFrame-Resizer számos lehetőséget és API-t biztosít mind a szülőoldal, mind az iframozott oldal számára.

• Szülőoldal API
  • Options
  • Events
  • Methods
• IFramed Page API
  • Options
  • Events
  • Methods
• Use with Libraries and Frameworks
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Hibaelhárítás
• Upgrade a 3. verzióról
• Version history

License