Executar codi JavaScript associat a un event: detectar canvis a pàgines web

Per detectar un event primer de tot, hem de tenir un codi previ d’HTML amb un ID. El codi d’avall és el codi HTML que utilitzaré en aquesta activitat.

<!DOCTYPE html>
<html lang="ca">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Web amb Menú i Iframe</title>
            <style>
            body {
                font-family: Arial, sans-serif;
                margin: 0;
                display: flex;
                flex-direction: column;
                height: 100vh;
            }

            header {
                background-color: #333;
                color: white;
                padding: 1rem;
                text-align: center;
            }

            nav {
                display: flex;
                flex-direction: column;
                background-color: #444;
                color: white;
            }

            .menu-nivell-1 {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                background-color: #444;
            }

            .menu-nivell-1 > div {
                position: relative;
                margin: 0.5rem;
                cursor: pointer;
            }

            .menu-nivell-2 {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                background-color: #555;
                min-width: 150px;
                z-index: 1;
            }

            .menu-nivell-2 div {
                padding: 0.5rem;
                cursor: pointer;
            }

            .menu-nivell-2 div:hover {
                background-color: #666;
            }

            .menu-nivell-1 > div:hover .menu-nivell-2 {
                display: block;
            }

            iframe {
                flex: 1;
                width: 100%;
                border: none;
            }

            @media (max-width: 768px) {
                .menu-nivell-1 {
                    flex-direction: column;
                    align-items: stretch;
                }

                .menu-nivell-1 > div {
                text-align: center;
                }
            }
        </style>
        <script src="algoritmia/comunicador.js"></script>
    </head>
    <body>
        <header>
            <h1>Pàgina amb Menú i Iframe</h1>
        </header>

        <nav>
            <div class="menu-nivell-1">
                <div>
                Secció 1
                    <div class="menu-nivell-2">
                        <div onclick="canviaIframe('https://www.example.com')">Pàgina 1.1</div>
                        <div onclick="canviaIframe('https://www.wikipedia.org')">Pàgina 1.2</div>
                    </div>
                </div>
                <div>
                Secció 2
                    <div class="menu-nivell-2">
                        <div onclick="canviaIframe('https://www.mozilla.org')">Pàgina 2.1</div>
                        <div onclick="canviaIframe('https://www.openai.com')">Pàgina 2.2</div>
                    </div>
                </div>
            </div>
        </nav>

        <iframe id="contingut" src="about:blank"></iframe>

        <script>
            function canviaIframe(url) {
            document.getElementById('contingut').src = url;
            }
        </script>
    </body>
</html>

Ara quan ja tenim el codi html provem que carregui i funcioni la pàgina.

Quan ens hem assegurat que tenim el codi funcional, escriurem en un altre fitxer el codi JavaScript per veure els esdeveniments. Hem de tenir cura d’agafar correctament els identificadors dels objectes.

window.addEventListener('DOMContentLoaded', () => {
    const iframe = document.getElementById('contingut');

    if (iframe) {
        iframe.addEventListener('load', () => {
            console.log("carregat");
            console.log("URL assignada:", iframe.src);
        });
    } else {
        console.warn("No s'ha trobat l'iframe amb id 'contingut'");
    }
});