Iframes são elementos HTML que permitem incorporar conteúdo externo, como páginas da Web, em uma página atual. Neste artigo, mostramos como alterar o conteúdo de dois ou mais iframes usando um único botão usando JavaScript.

O que é um iframe?

Um iframe é um elemento HTML que pode incorporar conteúdo externo em uma página da web. Você pode usar a etiqueta para incorporar uma página da web, vídeo, documento ou outro conteúdo multimídia em seu site. A estrutura básica de um iframe é a seguinte:

Ao usar o JavaScript, você pode modificar dinamicamente o conteúdo dos iframes, proporcionando uma experiência de usuário mais interativa e contínua.

Exemplo de como alterar o conteúdo de vários iframes a partir de um botão

No exemplo a seguir mostramos como alterar o conteúdo de três iframes usando um único botão usando JavaScript:

function changeContent() {

Neste exemplo, criamos três iframes com ids iframe1, iframe2 e iframe3 que incorpora página1.html, página2.html e página3.html respectivamente. A seguir, criamos um botão que, ao ser clicado, executa a função alterarConteúdo(). Esta função usa getElementById() para selecionar cada iframe e alterar seu atributo origem para as novas páginas new_page1.html, new_page2.html e new_page2.html.