In this article, we will see how can a page be forced to load another page in JavaScript.
Approach: We can use window.location property inside the script tag to forcefully load another page in Javascript. It is a reference to a Location object that is it represents the current location of the document. We can change the URL of a window by accessing it.
Syntax:
<script>
window.location = <Path / URL>
</script>
Example:
<script>
window.location = "https://www.geeksforgeeks.org/"
</script>
So in the above example, we see that by changing the window.location Object inside Javascript we can change the URL of our window and thus successfully load any page forcibly from our Javascript without any href tag. We will build a small working sample to learn it practically.Â
Below is the step by step implementation:
Step 1: Create a file named index.html. Add a heading and two buttons to it. One button forcefully loads a page with a live URL and the other button loads a local HTML page. In the <script> tag we have two functions, one loads gfg home page, and the second loads a local HTML page using window.location property.
index.html
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible"        content="IE=edge">     <meta name="viewport" content=         "width=device-width, initial-scale=1.0"> </head>   <body>     <h3>This is the original page</h3>     <br>       <button onclick="force_load_gfg()">         Force Load GFG Page     </button>     <br><br>       <button onclick="force_load_local()">         Force Load Local HTML page     </button>       <script>         function force_load_gfg() {             window.location =                 "https://www.geeksforgeeks.org/"         }           function force_load_local() {             window.location =                 "F:/gfg/PageRedirect/newPage.html"         }     </script> </body>   </html> |
Step 2: Create a file named newPage.html. This is the local HTML page that would be loaded by Javascript.
newPage.html
<!DOCTYPE html> <html lang="en"> Â Â <head> Â Â Â Â <meta charset="UTF-8"> Â Â Â Â <meta http-equiv="X-UA-Compatible"Â Â Â Â Â Â Â Â Â content="IE=edge"> Â Â Â Â <meta name="viewport" content= Â Â Â Â Â Â Â Â "width=device-width, initial-scale=1.0"> Â Â Â Â <title> New Page </title> </head> Â Â <body> Â Â Â Â <h3>This is the new loaded page</h3> </body> Â Â </html> |
Output:
Output Screencast
