Iframes are HTML elements that allow you to embed external content, such as web pages, within a current page. In this article we show you how to change the content of two or more iframes using a single button using JavaScript.

What is an iframe?

An iframe is an HTML element that can embed external content into a web page. You can use the label to embed a web page, video, document or other multimedia content on your website. The basic structure of an iframe is as follows:

By using JavaScript, you can dynamically modify the content of iframes, providing a more interactive and seamless user experience.

Example of how to change content of multiple iframes from a button

In the following example we show how to change the content of three iframes using a single button using JavaScript:

function changeContent() {
document.getElementById("iframe1").src = "new_page1.html";

In this example, we have created three iframes with ids iframe1, iframe2 and iframe3 that embed page1.html, page2.html and page3.html respectively. Next, we've created a button that, when clicked, executes the function changeContent(). This function uses getElementById() to select each iframe and change its attribute src to the new pages new_page1.html, new_page2.html and new_page2.html.