Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to navigate URL in an iframe with JavaScript ?

  • Last Updated : 23 Apr, 2021

To navigate URL in iframe with JavaScript, we have to set the src attribute or return the value of src attribute in an iframe element. The src attribute defines the URL of document that can be shown in an iframe.

Syntax:

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!

document.getElementById("selector").src = "URL";

URL values: The possible values of URLs are –

  • Absolute URL: It points to another website (For example: https://www.geeksforgeeks.org/c-plus-plus/).
  • Relative URL: It points to a file within a website (For example: /gfg.php).

Return value: It returns the complete url of the document that is embedded in the iframe.



 

Example 1: Below is the code that illustrates using Absolute URL.

HTML




<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <iframe id="gfgFrame" src="" 
        style="height: 50vh; width: 600px;">
    </iframe>
  
    <p>Click to visit GeeksForGeeks website</p>
  
    <button onclick="navigate()">
        Click it
    </button>
  
    <script>
        function navigate() {
            document.getElementById("gfgFrame").src
                = "https://www.geeksforgeeks.org/";
        }
    </script>
</body>
  
</html>

Output:

Example 2: Below is the code that illustrates the Relative URL.

HTML




<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
    <iframe id="gfgFrame" src="" 
        style="height: 50vh; width: 600px;">
    </iframe>
    <br>
  
    <button onclick="navigate()">
        Click it
    </button>
  
    <script>
        function navigate() {
            document.getElementById
                ("gfgFrame").src = "home.html";
        }
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :