davidjbradshaw / iframe-resizer

Deze bibliotheek maakt het mogelijk om de hoogte en breedte van zowel hetzelfde als domein overschrijdende iFrames automatisch aan te passen aan de inhoud die ze bevatten. Het biedt een scala aan functies om de meest voorkomende problemen met het gebruik van iFrames aan te pakken, deze omvatten:

• Hoogte en breedte resizing van het iFrame naar de grootte van de inhoud.
• Werkt met meerdere en geneste iFrames.
• Domein authenticatie voor cross domain iFrames.
• Biedt een reeks van pagina grootte berekeningsmethoden om complexe CSS lay-outs te ondersteunen.
• Detecteert wijzigingen in de DOM die de pagina kunnen resizen met behulp van MutationObserver.
• Detecteert gebeurtenissen die de pagina kunnen resizen (Window Resize, CSS Animation and Transition, Orientation Change en Mouse events).
• Vereenvoudigde berichtgeving tussen iFrame en host pagina via postMessage.
• Verbetert in pagina links in iFrame en ondersteunt links tussen het iFrame en de bovenliggende pagina.
• Voorziet aangepaste sizing- en scrolling-methodes.
• Stelt de positie van de ouder en de viewport-grootte aan het iFrame ter beschikking.
• Voorziet onMouseEnter en onMouseLeave events voor het iFrame.
• Werkt met ViewerJS om PDF- en ODF-documenten te ondersteunen.
• Ondersteunt IE 11 (V3 ondersteunt terug tot IE8)

Doneer

Iframe-resizer is het resultaat van vele honderden uren werk, als u zich wilt aansluiten bij anderen om steun te betuigen aan de verdere ontwikkeling van dit project, koop me dan gerust een kopje koffie.

Aan de slag

Installeren

Dit pakket kan worden geïnstalleerd via NPM (npm install iframe-resizer --save).

Gebruik

Het pakket bevat twee geminificeerde JavaScript-bestanden in de map js. De eerste (iframeResizer.min.js) is voor de pagina die de iFrames host. Het kan worden aangeroepen via JavaScript:

const iframes = iFrameResize( , || );

Het tweede bestand (iframeResizer.contentWindow.min.js) moet worden geplaatst op de pagina(‘s) die in uw iFrame staan. Dit bestand is ontworpen om een gast te zijn op het systeem van iemand anders, dus heeft geen afhankelijkheden en zal niets doen totdat het wordt geactiveerd door een bericht van de bevattende pagina.

Typische setup

De normale configuratie is om het iFrame te laten verkleinen wanneer het browser venster van grootte verandert of de inhoud van het iFrame verandert. Om dit in te stellen moet je een van de afmetingen van het iFrame op een percentage instellen en de bibliotheek vertellen dat alleen de andere afmeting moet worden bijgewerkt. Normaal gesproken stel je de breedte in op 100% en wordt de hoogte aangepast aan de inhoud.

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

Note: Het gebruik van min-breedte om de breedte van het iFrame in te stellen, omzeilt een probleem in iOS waardoor het iFrame zich niet correct kan aanpassen.

Als u problemen ondervindt, raadpleeg dan de sectie Problemen oplossen.

Voorbeeld

Om te zien hoe dit werkt, bekijk dit voorbeeld en bekijk de console.

API Documentatie

IFrame-Resizer biedt een uitgebreide reeks opties en APIs voor zowel de bovenliggende pagina als de iframed pagina.

• Parent Page API
  • Options
  • Events
  • Methods
• IFramed Pagina-API
  • Options
  • Events
  • Methods
• Gebruik met bibliotheken en frameworks
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Problemen oplossen
• Opwaarderen vanaf versie 3
• Versie geschiedenis

Licentie