Arquitectura de Sincronización de Tema e iFrames Adaptativos

Para garantizar que los widgets se integren a la perfección en los sitios de los editores sin barras de desplazamiento ni desajustes de color, The Comparator utiliza assets/js/widget.js.

1. Cómo Funciona la Sincronización de Tema

Los sitios web anfitriones suelen alternar entre modos Claro y Oscuro. El widget incrustado escucha los cambios de tema en la ventana principal mediante la API postMessage de HTML5.

[Sitio Anfitrión (Padre)] ── postMessage({ type: 'tc-theme', theme: 'dark' }) ──> [Widget Comparator (iFrame)]

Configuración del Script en el Sitio Anfitrión

Añade el script ligero widget.js en el pie de página de tu sitio:

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

Este script realiza automáticamente:

1. Detección de mutaciones de la clase dark en document.documentElement o document.body.
2. Comprobación de localStorage.theme y prefers-color-scheme: dark.
3. Envío de eventos tc-theme a todos los iFrames de The Comparator activos en la página.

2. Ajuste Automático Dinámico de Altura

Para evitar barras de desplazamiento verticales dentro del iFrame, el widget calcula su altura de contenido dinámicamente y se la comunica a la ventana principal:

// Ejemplo del receptor en 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. Comportamiento sin JavaScript

Si el sitio anfitrión tiene JavaScript desactivado:

• El iFrame utiliza la altura predeterminada height="450" especificada en el HTML.
• El tema se basa en el parámetro theme especificado en la URL (?theme=light o ?theme=dark).