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:
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 } </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:
