davidjbradshaw / iframe-resizer

Dette bibliotek gør det muligt at ændre størrelsen automatisk på højden og bredden af både samme og tværgående iFrames, så de passer til det indhold, de indeholder. Det indeholder en række funktioner til at løse de mest almindelige problemer ved brug af iFrames, herunder:

• Højde- og breddeændring af iFrames til indholdsstørrelse.
• Funktioner med flere og indlejrede iFrames.
• Domænegodkendelse for iFrames på tværs af domæner.
• Forsyning af en række metoder til beregning af sidestørrelse til understøttelse af komplekse CSS-layouts.
• Detekterer ændringer i DOM’en, der kan få siden til at ændre størrelse ved hjælp af MutationObserver.
• Detekterer hændelser, der kan få siden til at ændre størrelse (vinduesændring, CSS-animation og -overgang, orienteringsændring og musehændelser).
• Simplificeret messaging mellem iFrame og værtsside via postMessage.
• Fikses i sidelinks i iFrame og understøtter links mellem iFrame og overordnet side.
• Giver brugerdefinerede størrelses- og rulningsmetoder.
• Udsætter iFrame’en forælderposition og visningsstørrelse.
• Giver onMouseEnter og onMouseLeave-hændelser for iFrame’en.
• Arbejder med ViewerJS for at understøtte PDF- og ODF-dokumenter.
• Understøtter IE 11 (V3 understøtter tilbage til IE8)

Donér

Iframe-resizer er resultatet af mange 100-vis af timers arbejde, hvis du gerne vil slutte dig til andre og vise støtte til den fortsatte udvikling af dette projekt, så er du velkommen til at give mig en kop kaffe.

Kom godt i gang

Installer

Denne pakke kan installeres via NPM (npm install iframe-resizer --save).

Anvendelse

Pakken indeholder to minificerede JavaScript-filer i mappen js. Den første (iframeResizer.min.js) er til den side, der hoster iFrames. Den kan kaldes med via JavaScript:

const iframes = iFrameResize( , || );

Den anden fil (iframeResizer.contentWindow.min.js) skal placeres i den/de side(r), der er indeholdt i din iFrame. Denne fil er designet til at være en gæst på en andens system, så den har ingen afhængigheder og vil ikke gøre noget, før den aktiveres af en meddelelse fra den indeholdende side.

Typisk opsætning

Den normale konfiguration er at få iFrame’en til at ændre størrelse, når browservinduet ændrer størrelse eller indholdet af iFrame’en ændres. For at konfigurere dette skal du konfigurere en af dimensionerne i iFrame’en til en procentdel og fortælle biblioteket, at det kun skal opdatere den anden dimension. Normalt ville du indstille bredden til 100 % og lade højden skalere, så den passer til indholdet.

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

Bemærk: Ved at bruge min-width til at indstille bredden på iFrame’en, omgår du et problem i iOS, der kan forhindre iFrame’en i at få den korrekte størrelse.

Hvis du har problemer, kan du se i afsnittet om fejlfinding.

Eksempel

For at se, hvordan det virker, skal du se dette eksempel og se konsollen.

API-dokumentation

IFrame-Resizer indeholder en omfattende række muligheder og API’er for både den overordnede side og den iframede side.

• API for modersiden
  • Optioner
  • Events
  • Metoder
• IFramed Page API
  • Options
  • Events
  • Methods
• Brug med biblioteker og frameworks
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Fejleløsning
• Opgradering fra version 3
• Versionshistorik

Licens