davidjbradshaw / iframe-resizer

Această bibliotecă permite redimensionarea automată a înălțimii și lățimii atât a iFrame-urilor cu același domeniu, cât și a celor cu domenii încrucișate, pentru a se potrivi conținutului lor. Oferă o serie de caracteristici pentru a rezolva cele mai frecvente probleme legate de utilizarea iFrame-urilor, acestea incluzând:

• Redimensionarea înălțimii și lățimii iFrame-ului la dimensiunea conținutului.
• Funcționează cu iFrame-uri multiple și imbricate.
• Autentificare de domeniu pentru iFrame-uri de domenii încrucișate.
• Furnizează o serie de metode de calcul a dimensiunii paginii pentru a susține layout-uri CSS complexe.
• Detectează modificările DOM care pot determina redimensionarea paginii folosind MutationObserver.
• Detectează evenimentele care pot determina redimensionarea paginii (Window Resize, CSS Animation and Transition, Orientation Change și Mouse events).
• Simplificarea mesageriei între iFrame și pagina gazdă prin postMessage.
• Corectează legăturile în pagină în iFrame și suportă legăturile între iFrame și pagina părinte.
• Furnizează metode personalizate de dimensionare și derulare.
• Expune poziția părintelui și dimensiunea viewportului pentru iFrame.
• Furnizează evenimente onMouseEnter și onMouseLeave pentru iFrame.
• Funcționează cu ViewerJS pentru a suporta documente PDF și ODF.
• Suportă IE 11 (V3 suportă până la IE8)

Donează

Iframe-resizer este rezultatul a multe sute de ore de muncă, dacă doriți să vă alăturați celorlalți în a arăta sprijinul pentru dezvoltarea continuă a acestui proiect, atunci nu ezitați să îmi cumpărați o cafea.

Noțiuni introductive

Instalare

Acest pachet poate fi instalat prin NPM (npm install iframe-resizer --save).

Utilizare

Pachetul conține două fișiere JavaScript minificate în folderul js. Primul (iframeResizer.min.js) este pentru pagina care găzduiește iFramele. Acesta poate fi apelat cu prin JavaScript:

const iframes = iFrameResize( , || );

Cel de-al doilea fișier (iframeResizer.contentWindow.min.js) trebuie plasat în pagina (paginile) conținută (conținute) în iFrame-ul dumneavoastră. Acest fișier este conceput pentru a fi un oaspete pe sistemul altcuiva, deci nu are dependențe și nu va face nimic până când nu este activat de un mesaj de la pagina care îl conține.

Configurație tipică

Configurația normală este ca iFrame-ul să se redimensioneze atunci când fereastra browserului își schimbă dimensiunea sau conținutul iFrame-ului se schimbă. Pentru a configura acest lucru, trebuie să configurați una dintre dimensiunile iFrame-ului la un procent și să spuneți bibliotecii să actualizeze doar cealaltă dimensiune. În mod normal, ați seta lățimea la 100% și ați face ca înălțimea să se scaleze pentru a se potrivi conținutului.

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

Nota: Utilizarea lățimii minime pentru a seta lățimea iFrame-ului, rezolvă o problemă din iOS care poate împiedica iFrame-ul să se dimensioneze corect.

Dacă aveți probleme, verificați secțiunea de rezolvare a problemelor.

Exemplu

Pentru a vedea acest lucru funcționând, aruncați o privire la acest exemplu și urmăriți consola.

Documentație API

IFrame-Resizer oferă o gamă extinsă de opțiuni și API-uri atât pentru pagina mamă, cât și pentru pagina iframe.

• API pentru pagina părinte
  • Opțiuni
  • Evenimente
  • Metode
• IFramed Page API
  • Opțiuni
  • Evenimente
  • Metode
• Utilizare cu biblioteci și cadre
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script

  .

• Soluționarea problemelor
• Actualizare de la versiunea 3
• Istoric versiuni

Licență