Skip to content
Related Articles
Open in App
Not now

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 11 Sep, 2021
Improve Article
Save 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 centre 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.


<!DOCTYPE html>
    <h1 style="display:flex;
    <div style="padding:10px;border:2px solid green;">
        <div style="display:flex;flex-wrap:wrap;
            <iframe src=
            <div style="width:10px;">
            <iframe src=
        <button style="margin-left:50%;margin-right:30%;
            margin-top:10px;" id="update">
            Click me
            .addEventListener('click', function () {
            // Change src attribute of iframes at a same time
            document.getElementById('frame1').src =
            document.getElementById('frame2').src =



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
Related Articles

Start Your Coding Journey Now!