Executar codi JavaScript associat a un event: detectar canvis a pàgines web. - Izan lecina 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.

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.

Web amb Menú i Iframe

Pàgina amb Menú i Iframe

<!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;
            }

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



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

            .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>
            <h2>Pàgina amb Menú i Iframe</h2>
        </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.google.net')">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>

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'");
    }
});