How to Open URL in New Tab using JavaScript?
Last Updated :
21 Aug, 2025
To open a URL in a new tab using JavaScript, we can use the window.open() method. The window.open() method is used to open a new browser window or tab. It can also be used to load a specific URL in a new tab.
Syntax
window.open(URL, '_blank');
- window.open(): Opens a new tab or window.
- First Parameter: The URL you want to open, e.g., "https://www.example.com/".
- Second Parameter ("_blank"): Tells the browser to open the URL in a new tab.
- Return Value: The method returns a reference to the new tab/window or null if it fails.
HTML
<html>
<head></head>
<body>
<p> Click the button to open
<b> geeksforgeeks.org </b>
in new tab
</p>
<button onclick="NewTab()">
Open Geeksforgeeks
</button>
<script>
function NewTab() {
window.open(
"https://www.geeksforgeeks.org////", "_blank");
}
</script>
</body>
</html>
Output:
How to Open URL in New Tab using JavaScript?In this example
- A button labeled "Open GeeksforGeeks" is provided for the user to click.
- When the button is clicked, it triggers the NewTab() function.
- The window.open() method in NewTab() opens the URL "https://www.geeksforgeeks.org////" in a new tab ("_blank").
Important Notes:
- The return value of window.open() is a reference to the newly created window or tab. It returns null if it fails to open the new tab.
- Avoid adding a third parameter to the window.open() method because it could result in a new window instead of a tab.
Handling User Interactions
Most modern browsers block pop-ups, including the window.open() method, when it's not triggered by a direct user action (e.g., a click). To avoid this, ensure that the window.open() method is called inside an event handler like onclick.
HTML
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Click the button to open <b>GeeksforGeeks</b> in a new tab:</p>
<button onclick="NewTab()">Open GeeksforGeeks</button>
<script>
function NewTab() {
window.open("https://www.geeksforgeeks.org////", "_blank");
}
</script>
</body>
</html>
Output
How to Open URL in New Tab using JavaScript?In this example
- When clicked, it runs the NewTab() function.
- window.open("https://www.geeksforgeeks.org////", "_blank"); opens the GeeksforGeeks website in a new tab.
Applications of Opening URLs in New Tabs
Here are the applications of opening URLs in new tabs:
- External Links: When linking to external websites, it’s best to open them in a new tab to keep users on your site.
- Forms and Documentation: If you are providing a form or documentation with links to other pages, opening them in new tabs is helpful.
- Pop-up Windows: Sometimes you might want to create a pop-up window that behaves like a new tab for displaying additional content.
Difference Between window.open() vs <a> tag
Here is a detailed difference between window.open() vs <a> tag based on their features.
window.open() | <a> Tag |
|---|
It is used in JavaScript to open a URL programmatically. | It is Used in HTML to create a link that can be clicked. |
More control (e.g., can open in new tab, window, or popup). | Less control, opens in the same window or new tab. |
"_blank" opens in a new tab, but requires JavaScript. | target="_blank" opens in a new tab, simple HTML. |
Requires JavaScript enabled. | Works without JavaScript. |
Highly customizable, can control window size, position, etc. | Limited customization (just target behavior). |
May be blocked by pop-up blockers if overused. | Safe and standard for linking. |
Needs extra handling for accessibility (keyboard, focus, etc.). | Simple and accessible by default. |
How to Open URL in New Tab using JavaScript ?
Explore
JavaScript Basics
Array & String
Function & Object
OOP
Asynchronous JavaScript
Exception Handling
DOM
Advanced Topics