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.