Opening a URL in the same window and in the same tab is a common requirement for web developers. This functionality is useful when you want to load a new web page or document into the current browser window and replace the content of the current web page.
There are several ways to open URLs in the same window and in the same tab using JavaScript.
Approach 1: Using window.location.replace() Method: The window.location.replace() method is used to load a new document or web page in the current window, replacing the current document. It is one of the most common approaches to open a URL in the same window and in the same tab.
Syntax:
window.location.replace(url);
Parameter: The “url” is the URL that you want to load in the same window and in the same tab.
Example: In this example, we have used the window.location.replace() method to open the “geeksforgeeks.org” URL in the same window and in the same tab. When the button is clicked, the SameTab() function is called which uses the window.location.replace() method to load the URL in the same window and in the same tab.
HTML
<!DOCTYPE html> <html> <head> <title> Open URL in same window and in same tab </title> <style> body { text-align: center; } </style> </head> <body> <p> Click the button to open <br /> <b style="color:green; font-size:2rem"> geeksforgeeks.org </b> <br /> in same window & same tab <br /> </p> <button onclick="SameTab()"> Open using window.location.replace() </button> <script> function SameTab() { window.location.replace( } </script> </body> </html> |
Output:
Approach 2: Using window.location.href Property: Use the window.location.href property to open a URL in the same window and in the same tab.
Syntax:
window.location.href = url;
Parameters: The “url” is the URL that you want to load in the same window and in the same tab.
Example: In this example, we have used the window.location.href property to open the “geeksforgeeks.org” URL in the same window and in the same tab. When the button is clicked, the SameTab() function is called, which sets the window.location.href property to the desired URL, loading it in the same window and in the same tab.
HTML
<!DOCTYPE html> <html> <head> <title> Open URL in same window and in same tab </title> <style> body { text-align: center; } </style> </head> <body> <p> Click the button to open <br /> <b style="color:green; font-size:2rem"> geeksforgeeks.org </b> <br /> in same window & same tab <br /> </p> <button onclick="SameTab()"> Open using window.location.href </button> <script> function SameTab() { window.location.href = } </script> </body> </html> |
Output:
Approach 3: Using window.open() Method: Use the “window.open()” method to open a URL in the same window and in the same tab.
Syntax:
window.open(url, "_self");
Parameter:
- The “url” is the URL that you want to load in the same window and in the same tab.
- The “_self” parameter specifies that the URL should be loaded in the current window.
Example: In this example, we have used the window.open() method to open the “geeksforgeeks.org” URL in the same window and in the same tab. When the button is clicked, the sameTab() function is called, which uses the window.open() method with the _self parameter to load the URL in the same window and in the same tab.
HTML
<!DOCTYPE html> <html> <head> <title> Open URL in same window and in same tab </title> <style> body { text-align: center; } </style> </head> <body> <p> Click the button to open <br /> <b style="color:green; font-size:2rem"> geeksforgeeks.org </b> <br /> in same window & same tab <br /> </p> <button onclick="SameTab()"> Open using window.open() </button> <script> function SameTab() { window.open( "_self" ); } </script> </body> </html> |
Output:
Conclusion: All three approaches are viable and have their own use cases. The location.replace() method is useful if you want to replace the current document with a new one, while the location.href property is useful if you want to change the URL of the current document. The window.open() method with the _self parameter is useful if you want to open the URL in the same window and in the same tab.
