Pym.js est une bilbiothèque Javascript permettant de rendre des iFrames responsives dans vos pages web.
Quoi de plus frustrant dans son webdesign responsive qu’une iFrame qui ne se redimensionne pas avec le reste des blocs de la page web ?
Si vous avez déjà tenté de les redimensionner à la main, vous aurez vite constaté qu’il est facile de redimensionner la largeur de l’iFrame, mais cela devient plus casse-tête lorsque l’on essaye de redimensionner proportionnellement la hauteur.
Pym.js va résoudre ces différents problèmes en proposant une redimension responsive des iframes dans leur conteneur.
La bibliothèque permet aussi d’outre passer les problèmes de cross-domaines que peuvent rencontrer vos iFrames.
Voici un exemple de fonctionnement de Pym.js:
1.<div id="example"></div>2.<script type="text/javascript" src="pym.js"></script>3.<script>4.var pymParent = new pym.Parent('example', 'pageIframe.html', {});5.</script>Pas de jQuery obligatoire, mais la bibliothèque peut s’utiliser directement avec si besoin.
Pour fonctionner, la page enfant doit elle aussi disposer d’un bout de code pour une meilleure redimension:
1.<script src="pym.js" type="text/javascript"></script>2.<script>3.function drawGraphic(width) {4....5.}6. 7.var pymChild = new pym.Child({ renderCallback: drawGraphic });8.</script>Cette fonction côté page enfant vous permettra d’exécuter des callbacks spécifiques par exemple pour redéssiner un graphe comme dans l’exemple ci-dessus…
vienergie 