Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to open link in a new window using JavaScript?
If you want users to click on links and open those links in a new window because you want your user to stay on your site while they view the linked content, then you need to use this solution.
By using JavaScript you can easily configure all of your links so that they open in a new window when clicked.
Approach to Open Link in a New Window
Using window.open() Method
JavaScript window.open() method allows you to open a new browser window or tab with the specified URL. It can be used to open an HTML document, image file, PDF document, etc.
The window will have customizable features such as toolbars and scroll bars, depending on the parameters passed in the function call. This method also provides various options for controlling how the window appears on screen when it's opened.
Syntax
window.open(URL, name, features, replace)
Parameters
- URL - The URL to open in the new window
- name - Name of the new window (optional)
- features - Comma-separated list of window features (optional)
- replace - Whether to replace current entry in history (optional)
Example 1: Basic New Window
In this example we will open a new window with defined window dimensions.
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<p>Click Button To Open New Window</p>
<button onclick="newwindow()">Open</button>
<script>
function newwindow() {
window.open("https://www.tutorialspoint.com/css/index.htm", "",
"width=500, height=500");
}
</script>
</body>
</html>
Example 2: Opening Link with Custom Features
This example shows how to open a link in a new window with specific toolbar and scroll settings.
<!DOCTYPE html>
<html>
<body>
<p>Click Button To Open New Window</p>
<button onclick="newwindow()">Click</button>
<script>
function newwindow() {
window.open("https://www.tutorialspoint.com/javascript/index.htm",
"_blank", "toolbar=no,scrollbars=no,resizable=yes,top=500,left=500,width=400,height=400");
}
</script>
</body>
</html>
Example 3: Opening and Closing Windows
This example demonstrates how to open a new window and close it programmatically using JavaScript.
<!DOCTYPE html>
<html>
<body>
<h2>Click Open and Close</h2>
<button onclick="openWindow()">Open</button>
<button onclick="closeWindow()">Close</button>
<script>
let myWindow;
function openWindow() {
myWindow = window.open("https://www.tutorialspoint.com/", "", "width=500,height=300");
}
function closeWindow() {
if (myWindow) {
myWindow.close();
}
}
</script>
</body>
</html>
Using target="_blank" with onclick
Another approach is to use anchor tags with target="_blank" attribute combined with onclick for additional control.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/javascript/index.htm"
target="_blank"
onclick="window.open(this.href,'popup','width=500,height=500'); return false;">
JavaScript Tutorial
</a>
</body>
</html>
Common Window Features
| Feature | Description | Values |
|---|---|---|
| width | Window width in pixels | Number |
| height | Window height in pixels | Number |
| toolbar | Show/hide toolbar | yes/no |
| scrollbars | Show/hide scrollbars | yes/no |
| resizable | Allow window resizing | yes/no |
Browser Compatibility
The window.open() method is supported by all modern browsers. However, popup blockers may prevent new windows from opening, so always check if the window opened successfully.
<script>
function openWindow() {
let newWindow = window.open("https://www.tutorialspoint.com/", "_blank", "width=500,height=400");
if (!newWindow) {
alert("Please allow popups for this website");
}
}
</script>
Conclusion
Use window.open() to open links in new windows with customizable features. Always consider popup blockers and provide fallback options for better user experience.
9K+ Views
