Techno-magis

Jeudi 25 Novembre 2021

Intégration conditionnelle de iFrameResizer

Jeudi 25 Novembre 2021

Si vous voulez que votre site soit compatible dans un iframe, mais que ça soit juste si le parent présente la bibliothèque iframe-resizer, il y a une solution assez simple :

En JavaScript vanilla :

CODE : 
<script>
window.addEventListener('message', e => {
    if (
        String(e.data).startsWith('[iFrameSizer]') &&
        !document.body.classList.contains('into-container')
    ) {
        var script = document.createElement('script');
        script.src = '**CHEMIN À CHANGER**/iframeResizer.contentWindow.min.js';
        document.head.appendChild(script);
        document.body.classList.add('into-container');
    }
});
</script>

En TypeScript :

CODE : 
window.addEventListener('message', (e: MessageEvent) => {
    if (
        String(e.data).startsWith('[iFrameSizer]') &&
        !document.body.classList.contains('into-container')
    ) {
        var script = document.createElement('script');
        script.src = '**CHEMIN À CHANGER**/iframeResizer.contentWindow.min.js';
        document.head.appendChild(script);
        document.body.classList.add('into-container');
    }
});
 

Note la classe “into-container” permet de changer le CSS de la page pour l'adapter au changement de mode.

Commenter le billet...