davidjbradshaw / iframe-resizer

Det här biblioteket gör det möjligt att automatiskt ändra storleken på höjden och bredden av både samma och tvärdomäner för iFrames så att de passar innehållet. Det tillhandahåller en rad funktioner för att lösa de vanligaste problemen med att använda iFrames, bland annat:

• Höjd- och breddanpassning av iFrames till innehållets storlek.
• Fungerar med flera och inbäddade iFrames.
• Domänautentisering för iFrames på tvärs över domäner.
• Gör en rad metoder för beräkning av sidstorlek för att stödja komplexa CSS-layouter.
• Detekterar ändringar i DOM som kan leda till att sidan ändrar storlek med hjälp av MutationObserver.
• Detekterar händelser som kan leda till att sidan ändrar storlek (fönsterändring, CSS-animering och övergång, orienteringsändring och mushändelser).
• Simplifierad meddelandehantering mellan iFrame och värdsida via postMessage.
• Rättar i sidlänkar i iFrame och stöder länkar mellan iFrame och överordnad sida.
• Gör anpassade storleks- och rullningsmetoder.
• Uppsätter föräldraposition och visningsstorlek för iFrame.
• Gör onMouseEnter och onMouseLeave-händelser för iFrame.
• Arbetar med ViewerJS för att stödja PDF- och ODF-dokument.
• Stöder IE 11 (V3 stöder tillbaka till IE8)

Donera

Iframe-resizer är resultatet av många 100-tals timmars arbete, om du vill ansluta dig till andra för att visa ditt stöd för den fortsatta utvecklingen av det här projektet är du välkommen att bjuda mig på en kaffe.

Komma igång

Installera

Detta paket kan installeras via NPM (npm install iframe-resizer --save).

Användning

Paketet innehåller två minifierade JavaScript-filer i mappen js. Den första (iframeResizer.min.js) är för sidan som är värd för iFrames. Den kan anropas med via JavaScript:

const iframes = iFrameResize( , || );

Den andra filen (iframeResizer.contentWindow.min.js) måste placeras i den eller de sidor som ingår i din iFrame. Den här filen är utformad för att vara en gäst på någon annans system, så den har inga beroenden och kommer inte att göra något förrän den aktiveras av ett meddelande från den innehållande sidan.

Typisk konfiguration

Den normala konfigurationen är att iFrame ändrar storlek när webbläsarfönstret ändrar storlek eller när innehållet i iFrame ändras. För att ställa in detta måste du konfigurera en av iFramens dimensioner till en procentsats och tala om för biblioteket att endast uppdatera den andra dimensionen. Normalt skulle du ställa in bredden till 100 % och låta höjden skalas för att passa innehållet.

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

Notera: Genom att använda min-width för att ställa in bredden på iFrame, kringgår du ett problem i iOS som kan hindra iFrame från att få rätt storlek.

Om du har problem kan du kontrollera avsnittet om felsökning.

Exempel

För att se hur det här fungerar, ta en titt på det här exemplet och titta på konsolen.

API-dokumentation

IFrame-Resizer tillhandahåller ett omfattande utbud av alternativ och API:er för både den överordnade sidan och den iframade sidan.

• API för föräldrasidan
  • Options
  • Events
  • Methods
• IFramed Page API
  • Options
  • Events
  • Methods
• Use with Libraries and Frameworks
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Felsökning
• Uppgradering från version 3
• Versionshistorik

Licens