Les iframes sont des éléments HTML qui vous permettent d'intégrer du contenu externe, tel que des pages Web, dans une page actuelle. Dans cet article, nous vous montrons comment modifier le contenu de deux iframes ou plus à l'aide d'un seul bouton à l'aide de JavaScript.

Qu'est-ce qu'une iframe ?

Un iframe est un élément HTML qui peut intégrer du contenu externe dans une page Web. Vous pouvez utiliser l'étiquette pour intégrer une page Web, une vidéo, un document ou tout autre contenu multimédia sur votre site Web. La structure de base d'une iframe est la suivante :

En utilisant JavaScript, vous pouvez modifier dynamiquement le contenu des iframes, offrant une expérience utilisateur plus interactive et transparente.

Exemple de modification du contenu de plusieurs iframes à partir d'un bouton

Dans l'exemple suivant, nous montrons comment modifier le contenu de trois iframes à l'aide d'un seul bouton à l'aide de JavaScript:

fonction changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html" ;
document.getElementById("iframe3").src = "new_page3.html" ;
//AJOUTER PLUS CADRES SI NÉCESSAIRE, CHANGEZ JUSTE L'ID ET L'URL
}

Modifier le contenu de deux iframes ou plus à partir d'un seul bouton

Dans cet exemple, nous avons créé trois iframes avec des identifiants iframe1, iframe2 et iframe3 qui intègrent page1.html, page2.html et page3.html respectivement. Ensuite, nous avons créé un bouton qui, lorsqu'il est cliqué, exécute la fonction changeContent(). Cette fonction utilise getElementById() pour sélectionner chaque iframe et changer son attribut src aux nouvelles pages nouvelle_page1.html, nouvelle_page2.html et nouvelle_page2.html.