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

Last Updated : 06 Aug, 2024

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>

<head>
    <title> update two frames at the same time</title>
</head>

<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:

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”.

How to insert HTML content into an iFrame using jQuery?

debadebaduttapanda7

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?