22
AVR

Pym.js - Rendre des iFrames responsive avec du Javascript

Publié le 22/04/14 à 08h00 par DJo

Pym.js est une bilbiothèque Javascript permettant de rendre des iFrames responsives dans vos pages web.

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:

<div id="example"></div>
<script type="text/javascript" src="pym.js"></script>
<script>
    var pymParent = new pym.Parent('example', 'pageIframe.html', {});
</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:

<script src="pym.js" type="text/javascript"></script>
<script>
    function drawGraphic(width) {
        ...
    }

    var pymChild = new pym.Child({ renderCallback: drawGraphic });
</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...

 

Site Officiel

Baraguiné par Xowap le 23/04/14 à 23h03
Xowap via Twitter
Sans vouloir me la péter, ce script n'est pas vraiment terrible.

D'une part la compatibilité avec IE ne descend qu'à la version 9 alors que la version 8 est facile à atteindre également.

En plus, de nombreuses lignes du code sont stupides, le meilleur exemple étant

document.getElementsByTagName('body')[0].offsetHeight.toString();

Qui serait beaucoup plus simple (et rapide) en

document.body.offsetHeight.toString();

Sans oublier qu'offsetHeight ne donne pas les dimensions au sous-pixel, ce qui fait un peu brouillon.

Aussi, les évènements écoutés ne sont pas terribles, et il est assez aisé d'en produire qui vont faire déborder le contenu de l'iframe sans que le script ne s'en rende compte.

Et finalement, la mesure de la hauteur se base exclusivement sur la mesure de body, ce qui dans le cas où l'iframe à resizer contient une application sur laquelle on n'a vraiment pas la main risque de mal se terminre. Par exemple quand le contenu est positionné en absolu ou en float et déborde donc du body.

Par contre, j'ai écris https://github.com/ActivKonnect/wrapframe, qui n'au aucun de ces défauts. Voilà :3

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web