Redimenssionner un iframe en fonction de son contenu avec easyXDM

Quand vous faites des développements d’application web, il vous est arrivé de travailler avec des iframe pour afficher des contenus d’autres pages web. Parfois, il est nécessaire d’envoyer des données soit vers le contenu de l’iframe soit provenant du contenu de l’iframe. Pour permettre ces échanges de données, on utilise la bibliothèque easyXDM.

Fonctionnement de l’iframe

Pour afficher le contenu d’une page web dans une autre page web, on utilise fréquemment la balise HTML iframe, car il est plus facile à mettre en oeuvre.

Vous pouvez voir ci-dessous un exemple d’intégration de la page qui parle de Javascript sur le notre site web avec la balise iframe :

<iframe src="https://smart-tech.mg/tag/javascript/"></iframe>

Mais si vous voulez échanger des données via les iframes c’est très compliqué à mettre en place. Cette complexité est causé par la règle de sécurité mis en place par tous les navigateurs. Cette règle de sécurité est le Same Origin Policy.

Redimensionner les iframes en utilisant easyXDM

Pour pallier au problème que l’on a mentionné précédemment, la librairie Javascript easyXDM a été créée. Il permet aux développeurs de travailler facilement sans ce soucier des limitations lié à la sécurité.

easyXDM fournit une pile de fonctionnalité de transport. Cette pile de fonctionnalité permet de transférer des messages sous forme de chaîne de caractère entre deux fenêtres. Le premier est le « consommateur » (c’est le document principal) et le second est le « fournisseur » (le document qui va être chargé dans l’iframe). easyXDM utilise la technique la plus adapté en choisissant le plus efficace en fonction du navigateur de l’internaute.

Pour n’importe quelle technique, la pile de transport offre la communication bi-directionnel, la fiabilité, la vérification des requêtes et des demandeurs.

easyXDM est basé sur Javascript seulement. Il n’utilise pas Flash, Silverlight ou autres techniques extra HTML.

Pour que l’on puisse redimensionner un iframe dynamiquement, nous allons voir les codes à insérer côté consommateur et fournisseur.

Code à insérer côté consommateur

Tenons d’abord à préciser que le consommateur ici c’est le document principal. C’est la page qui va contenir la balise HTML iframe.

Le code à insérer côté consommateur pour permettre de redimensionner dynamiquement la hauteur d’un iframe avec easyXDM est la suivante :

<div id="container"> </div>
<script>
    $.getScript("//smart-tech.mg/easyXDM.debug.js", function() {
        new easyXDM.Socket({
            remote: "https://smart-tech.mg/tag/javascript/",
            container: document.getElementById("stmgicigopaiement"),
            onMessage: function(message, origin){
                message = eval('(' + message + ')')
                message = message.height
                this.container.getElementsByTagName("iframe")[0].style.height = (parseInt(message) + 80) + "px";
            },
            props:{'style':{'width':'100%',"overflow":"hidden"}}
        });
    });
</script>

Ici nous avons utilisé la balise HTML div avec un identifiant container au lieu de iframe.

Ensuite, nous chargeons la bibliothèque Javascript easyXDM avec getScript. Une fois que la librairie est chargée, nous utilisons, nous utilisons le socket de easyXDM. Dans ce socket, nous mentionnant :

• la page source,
• le conteneur où on va insérer la page HTML provenant du fournisseur,
• le traitement du message reçu,
• le style CSS à appliquer au conteneur.

Code à insérer provenant du fournisseur

Nous tenons à préciser ici que le fournisseur est le document qui va être chargé dans le iframe.

Le code à insérer côté fournisseur pour permettre de redimensionner dynamiquement la hauteur d’un iframe avec easyXDM est la suivante :

<script type="text/javascript" src="//smart-tech.mg/easyXDM.debug.js"></script>
<script type="text/javascript">
var socket = new easyXDM.Socket({
    onReady: function () {
        socket.postMessage(JSON.stringify({
            "height": document.body.scrollHeight,
        }))
    }
});
</script>

Dans ce code, on charge d’abord la librairie.

Ensuite, nous envoyons le message avec le socket.postMessage une fois que la communication est établi entre les deux pages. Le message que nous envoyons est la hauteur de la page du fournisseur.