Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Medium
  • Last Updated : 11 Sep, 2021

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 centre of our page and a button. When we click the button then the URLs of the iframes is replaced with other URLs.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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.

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=
            </iframe>
            <div style="width:10px;">
            </div>
            <iframe src=
            </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”.




My Personal Notes arrow_drop_up
Recommended Articles
Page :