davidjbradshaw / iframe-resizer

Tämä kirjasto mahdollistaa sekä saman että ristikkäisen verkkotunnuksen (cross domain) iFrame-kehysten korkeuden ja leveyden automaattisen koon muuttamisen sisältämänsä sisällön mukaan. Se tarjoaa useita ominaisuuksia, jotka ratkaisevat yleisimpiä iFramen käyttöön liittyviä ongelmia, näitä ovat:

• IFramen korkeuden ja leveyden koon muuttaminen sisällön koon mukaiseksi.
• Työskentelee useiden ja sisäkkäisten iFramejen kanssa.
• Toimialueiden rajat ylittäville iFrameille tarkoitettu domain-tunnistus.
• Tarjoaa useita sivun koon laskentamenetelmiä monimutkaisten CSS-layoutien tukemiseksi.
• Havaitsee DOM:n muutokset, jotka voivat aiheuttaa sivun koon muuttamisen MutationObserverin avulla.
• Havaitsee tapahtumat, jotka voivat aiheuttaa sivun koon muuttamisen (Ikkunan koon muuttaminen, CSS-animaatio ja -siirtymä, orientaation muuttaminen ja hiiritapahtumat).
• Yksinkertaistettu viestinvälitys iFramen ja isäntäsivun välillä postMessagen avulla.
• Korjaa iFramen sivulinkkejä ja tukee iFramen ja emosivun välisiä linkkejä.
• Tarjoaa mukautettuja koko- ja vieritysmenetelmiä.
• Paljastaa iFramen vanhemman sijainnin ja näkymäikkunan koon.
• Tarjoaa onMouseEnter– ja onMouseLeave-tapahtumat iFramelle.
• Työskentelee ViewerJS:n kanssa tukeakseen PDF- ja ODF-dokumentteja.
• Tukee IE 11:tä (V3 tukee takaisin IE8:aan)

Lahjoita

Iframe-resizer on monien satojen työtuntien tulos, jos haluat liittyä muiden joukkoon osoittamaan tukeasi tämän projektin jatkokehitykselle, niin voit vapaasti ostaa minulle kahvit.

Aloittaminen

Asennus

Tämä paketti voidaan asentaa NPM:n (npm install iframe-resizer --save) kautta.

Käyttö

Paketti sisältää kaksi pienennettyä JavaScripti-tiedostoa js-kansiossa. Ensimmäinen (iframeResizer.min.js) on iFrameja isännöivälle sivulle. Sitä voidaan kutsua JavaScriptin avulla:

const iframes = iFrameResize( , || );

Toinen tiedosto (iframeResizer.contentWindow.min.js) on sijoitettava iFramen sisältämälle sivulle tai sivuille. Tämä tiedosto on suunniteltu olemaan vieraana jonkun toisen järjestelmässä, joten sillä ei ole riippuvuuksia eikä se tee mitään ennen kuin se aktivoituu sisältävän sivun viestillä.

Tyypillinen kokoonpano

Normaalissa kokoonpanossa iFramen kokoa muutetaan selainikkunan koon muuttuessa tai iFramen sisällön muuttuessa. Tätä varten sinun täytyy määrittää yksi iFramen mitoista prosentuaaliseksi ja kertoa kirjastolle, että se päivittää vain toisen mitan. Normaalisti määrittäisit leveyden 100 %:ksi ja korkeuden skaalautuisi sisällön mukaan.

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

Huomautus: Käyttämällä min-widthiä iFramen leveyden asettamiseen kierrät iOS:ssä ilmenevän ongelman, joka voi estää iFramen koon asettamisen oikein.

Jos sinulla on ongelmia, tarkista vianmääritysosio.

Esimerkki

Voidaksesi nähdä tämän toimivan katso tätä esimerkkiä ja tarkkaile konsolia.

API-dokumentaatio

IFrame-Resizer tarjoaa laajan valikoiman vaihtoehtoja ja API:ita sekä emosivulle että iframed-sivulle.

• Parent Page API
  • Options
  • Events
  • Methods
• IFramed Page API
  • Options
  • Events
  • Methods
• Use with Libraries and Frameworks
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script
• Vianmääritys
• Päivitys versiosta 3
• Versiohistoria

Lisenssi