Synchronisation des thèmes et architecture des iframes adaptatifs

Pour que les widgets s’intègrent sans heurt aux sites des éditeurs, sans barres de défilement ni écart de couleurs, The Comparator utilise assets/js/widget.js.

1. Comment fonctionne la synchronisation du thème

Les sites hôtes passent souvent du mode clair au mode sombre. Le widget intégré écoute les changements de thème de la fenêtre parente à l’aide de l’API HTML5 postMessage.

[Site hôte (parent)] ── postMessage({ type: 'tc-theme', theme: 'dark' }) ──> [Widget Comparator (iframe)]

Configuration du script sur le site hôte

Ajoutez le script léger widget.js au pied de votre page :

<script src="https://thecomparator.tech/assets/js/widget.js" async></script>

Ce script :

1. Détecte les changements de la classe dark sur document.documentElement ou document.body.
2. Vérifie localStorage.theme et prefers-color-scheme: dark.
3. Envoie des événements tc-theme à tous les iframes Comparator actifs de la page.

2. Redimensionnement automatique de la hauteur

Pour éviter les barres de défilement verticales dans l’iframe, le widget calcule dynamiquement la hauteur de son contenu et en informe la fenêtre parente :

// Exemple dans l'écouteur de widget.js
window.addEventListener('message', function(event) {
    if (event.data && event.data.type === 'tc-resize') {
        const iframe = document.querySelector(`iframe[src*="${event.data.widgetId}"]`);
        if (iframe) {
            iframe.style.height = event.data.height + 'px';
        }
    }
});

3. Repli sans JavaScript

Si le site hôte désactive JavaScript :

• L’iframe revient à la valeur par défaut height="450" indiquée dans le HTML.
• Le thème est celui du paramètre theme de l’adresse (?theme=light ou ?theme=dark).