davidjbradshaw / iframe-resizer

Biblioteka ta umożliwia automatyczną zmianę rozmiaru wysokości i szerokości ramek iFrames zarówno w tej samej, jak i w różnych domenach, w celu dopasowania ich zawartości. Zapewnia szereg funkcji, które rozwiązują najczęstsze problemy związane z używaniem ramek iFrames, do których należą:

• Zmiana rozmiaru wysokości i szerokości ramki iFrame do rozmiaru zawartości.
• Pracuje z wieloma i zagnieżdżonymi ramkami iFrames.
• Uwierzytelnianie domenowe dla ramek iFrames w domenach krzyżowych.
• Dostarcza szereg metod obliczania rozmiaru strony w celu obsługi złożonych układów CSS.
• Wykrywa zmiany w DOM, które mogą spowodować zmianę rozmiaru strony przy użyciu MutationObserver.
• Wykrywa zdarzenia, które mogą spowodować zmianę rozmiaru strony (zmiana rozmiaru okna, animacje i przejścia CSS, zmiana orientacji i zdarzenia myszy).
• Uproszczone przesyłanie wiadomości między iFrame a stroną hosta za pomocą postMessage.
• Poprawia łącza do stron w iFrame i obsługuje łącza między iFrame a stroną nadrzędną.
• Dostarcza niestandardowe metody wymiarowania i przewijania.
• Wyświetla pozycję rodzica i rozmiar rzutni do ramki iFrame.
• Dostarcza zdarzenia onMouseEnter i onMouseLeave dla ramki iFrame.
• Współpracuje z ViewerJS w celu obsługi dokumentów PDF i ODF.
• Obsługuje IE 11 (V3 obsługuje IE8)

Donate

Iframe-resizer jest wynikiem wielu setek godzin pracy, jeśli chciałbyś dołączyć do innych w okazywaniu wsparcia dla dalszego rozwoju tego projektu, to zapraszam do postawienia mi kawy.

Getting Started

Install

Ten pakiet może być zainstalowany poprzez NPM (npm install iframe-resizer --save).

Usage

Pakiet zawiera dwa zminifikowane pliki JavaScript w folderze js. Pierwszy z nich (iframeResizer.min.js) jest przeznaczony dla strony hostującej iFrames. Można go wywołać za pomocą JavaScript:

const iframes = iFrameResize( , || );

Drugi plik (iframeResizer.contentWindow.min.js) wymaga umieszczenia na stronie(ach) zawartej(ych) w iFrame. Ten plik jest zaprojektowany jako gość w cudzym systemie, więc nie ma żadnych zależności i nie zrobi nic, dopóki nie zostanie aktywowany przez wiadomość ze strony zawierającej.

Typowa konfiguracja

Zwykła konfiguracja polega na tym, że iFrame zmienia rozmiar, gdy okno przeglądarki zmienia rozmiar lub zmienia się zawartość iFrame. Aby to ustawić, musisz skonfigurować jeden z wymiarów ramki iFrame na wartość procentową i powiedzieć bibliotece, aby aktualizowała tylko drugi wymiar. Normalnie ustawiłbyś szerokość na 100% i kazałbyś skalować wysokość, aby pasowała do zawartości.

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

Uwaga: Użycie min-width do ustawienia szerokości ramki iFrame, działa wokół problemu w iOS, który może uniemożliwić prawidłowy rozmiar ramki iFrame.

Jeśli masz problemy, sprawdź sekcję rozwiązywania problemów.

Przykład

Aby zobaczyć, jak to działa, spójrz na ten przykład i obejrzyj konsolę.

Dokumentacja API

IFrame-Resizer zapewnia szeroki zakres opcji i interfejsów API zarówno dla strony nadrzędnej, jak i strony iframed.

• API strony nadrzędnej
  • Opcje
  • Eventy
  • Metody
• IFramed API strony
  • Opcje
  • Zdarzenia
  • Metody
• Użycie z bibliotekami i szkieletami
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script

Licencja