Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 31 Mar, 2021
Geek Week

In this article, we will learn how to specify content of a webpage to <iframe> in 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 those can not be shown in <iframe>, we will discuss this further in the article.

Syntax:

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

Dynamic-Assignment Approach:



  • Get source from 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;

Below is the code that illustrates the use of iframe.

Example:

HTML




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

Output:

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

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

If <iframe> is not working ?
Websites like google.com, facebook.com, messenger.com and many more doesn’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 doesn’t supports iframe.

Note: 

  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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :