How to update two frames at the same time using HTML ?

Last Updated : 15 May, 2023

In this article, We are going to see how you can update two frames at the same time.

Approach: We take two iframes with unique id names i.e. “frame1” and “frame2” both align to the center of our page and a button. When we click the button then the URLs of the iframes is replaced with other URLs.

HTML Code: In this code, we attach one event listener to the button. When we click the button, the content of the body should be changed to the URLs of two iframes simultaneously at a time by using the src attribute of both iframes.

Example: In this example, we are using the above approach.

HTML

<!DOCTYPE html>
<html>
<body>
    <h1 style="display:flex;
        justify-content:center;color:green;">
        GeeksforGeeks
    </h1>
 
    <div style="padding:10px;border:2px solid green;">
 
        <div style="display:flex;flex-wrap:wrap;
            justify-content:center;">
            <iframe src=
"https://www.youtube.com/embed/aMn7sO1d4Yc" id="frame1">
            </iframe>
            <div style="width:10px;">
            </div>
            <iframe src=
"https://www.youtube.com/embed/8Pv96bvBJL4" id="frame2">
            </iframe>
        </div>
        <button style="margin-left:50%;margin-right:30%;
            margin-top:10px;" id="update">
            Click me
        </button>
    </div>
 
    <script>
        document.getElementById('update')
            .addEventListener('click', function () {
 
            // Change src attribute of iframes at a same time
            document.getElementById('frame1').src =
                'https://www.youtube.com/embed/QS8xU4TqnQE';
            document.getElementById('frame2').src =
                'https://www.youtube.com/embed/3w0XfBU2ufw';
        });
    </script>
</body>
</html>

Output:

Output

Note: We can update the content of the frame with <a> tag with the target attribute. The URL that we want to open inside the iframe will replace the URL of the iframe previously present. We click “clickme” link, the “b.html” is replaced with “a.html”.