Open In App
Related Articles

How to specify the HTML content of the page to show in the iframe element HTML5 ?

Improve Article
Save Article
Like Article

In this article, we will learn how to specify the content of a webpage to <iframe> in a web browser statically and dynamically by using JavaScript with HTML. We need a web browser i.e., Chrome (recommended) or Electron Application. This article will explain the proper way to assign or embed any external webpage to another webpage or even change the content of that embedded page dynamically using JavaScript. So let’s begin!

Note: There are some websites that can not be shown in <iframe>, we will discuss this further in the article.


<iframe id="" src="" style=""></iframe>

The src member of the <iframe> object holds the source of the embedded webpage. We can statically assign the address to it, and dynamically change it on runtime as well as discussed below:

Dynamic-Assignment Approach:

Get the source from the input field.

let geeks = document.getElementById("<id name/class name>").value; 

Assign the input to the ‘src‘ member of the iframe.

document.getElementById("<id name/class name>").src = geeks;

Example: Below is the code that illustrates the use of iframe.


<!DOCTYPE html>
    <h1>The iframe element</h1>
    <iframe id="embed1"
            style="border-style:1px;border-style: solid;
                   width:100%; height:400px;
                   margin-bottom: 40px;">
    <input type="text"
           style="width: 60%"
           placeholder="Enter the link of source." />
    <button id="loadpage">
        Change Webpage
        document.getElementById("loadpage").onclick =
            function updatesource() {
                let newsource = document.getElementById("source").value;
                document.getElementById("embed1").src = newsource;


  • When the page is loaded, the default page looks like below:

  • After entering the new webpage source into the input field and pressing the “Change Webpage” button.

If <iframe> is not working? 

Websites like,,, and many more don’t support iframe due to some same origin conflicts. Here is the error you will get in the console if you tried to load those websites which don’t support iframe.


  1. You will need to apply “http://” or “https://” before the website address otherwise it will give error.
  2. Keep in mind about those websites which doesn’t supports the iframe.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 25 May, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials