Gli iframe sono elementi HTML che consentono di incorporare contenuto esterno, ad esempio pagine Web, all'interno di una pagina corrente. In questo articolo ti mostriamo come modificare il contenuto di due o più iframe utilizzando un singolo pulsante utilizzando JavaScript.

Cos'è un iframe?

Un iframe è un elemento HTML che può incorporare contenuto esterno in una pagina web. Puoi usare l'etichetta per incorporare una pagina web, un video, un documento o altri contenuti multimediali nel tuo sito web. La struttura di base di un iframe è la seguente:

Utilizzando JavaScript, puoi modificare dinamicamente il contenuto degli iframe, fornendo un'esperienza utente più interattiva e fluida.

Esempio di come modificare il contenuto di più iframe da un pulsante

Nell'esempio seguente mostriamo come modificare il contenuto di tre iframe utilizzando un singolo pulsante utilizzando JavaScript:

function changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//AGGIUNGI ALTRO FRAMES SE NECESSARIO, BASTA CAMBIARE L'ID E L'URL
}

Modifica il contenuto di due o più iframe da un pulsante

In questo esempio, abbiamo creato tre iframe con ID iframe1, iframe2 E iframe3 che incorpora pagina1.html, pagina2.html E page3.html rispettivamente. Successivamente, abbiamo creato un pulsante che, se cliccato, esegue la funzione cambia contenuto(). Questa funzione utilizza getElementById() per selezionare ogni iframe e modificarne l'attributo src alle nuove pagine nuova_pagina1.html, nuova_pagina2.html E nuova_pagina2.html.