How to open URL in same window and same tab using JavaScript ?
Last Updated :
15 Dec, 2023
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:
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:
.gif)
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:
.gif)
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...