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
Selected Reading
What's the best way to open new browser window using JavaScript?
The window.open() method is the standard way to open new browser windows in JavaScript. It provides control over window features and behavior.
Syntax
window.open(url, name, features)
Parameters
url: The URL to open (optional)
name: Window name or target (optional)
features: Window features like size, position, toolbar (optional)
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open New Window</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Open New Browser Window</h1>
<button onclick="openBasicWindow()">Open Google</button>
<button onclick="openCustomWindow()">Open Custom Window</button>
<button onclick="openPopup()">Open Popup</button>
<script>
function openBasicWindow() {
window.open("https://www.google.com");
}
function openCustomWindow() {
window.open("https://www.tutorialspoint.com", "_blank",
"width=800,height=600,scrollbars=yes,resizable=yes");
}
function openPopup() {
window.open("https://www.example.com", "popup",
"width=400,height=300,top=100,left=100,toolbar=no,menubar=no");
}
</script>
</body>
</html>
Window Features Options
| Feature | Description | Example |
|---|---|---|
width |
Window width in pixels | width=800 |
height |
Window height in pixels | height=600 |
top |
Distance from top of screen | top=100 |
left |
Distance from left of screen | left=200 |
toolbar |
Show/hide toolbar | toolbar=no |
Return Value
The method returns a reference to the new window, which you can use to control it:
<!DOCTYPE html>
<html>
<body>
<button onclick="openAndControl()">Open & Control Window</button>
<button onclick="closeNewWindow()">Close New Window</button>
<script>
let newWindow;
function openAndControl() {
newWindow = window.open("https://www.example.com", "testWindow",
"width=500,height=400");
}
function closeNewWindow() {
if (newWindow) {
newWindow.close();
}
}
</script>
</body>
</html>
Browser Compatibility
Modern browsers may block window.open() if not triggered by user interaction (like button clicks) due to popup blockers. Always call it within event handlers.
Conclusion
window.open() is the standard method for opening new browser windows. Use the features parameter to customize window appearance and behavior for better user experience.
Updated on: 2026-03-15T23:18:59+05:30
304 Views
Advertisements