JavaScript window.open() Method
Last Updated :
01 Aug, 2024
The Javascript window.open() method is used to open a new tab or window with the specified URL and name. It supports various parameters that can be used to specify the type and URL location of the window to be opened.
Syntax:
window.open(url, windowName, windowFeatures)
Parameters: It has the following parameters as mentioned above and described below:
- URL: It accepts the URL that will be open in the new window. If an empty string is provided then it will open a blank new tab.
- windowName: It can be used to provide the name of the window. This is not associated with the title of the window in any manner. It can accept values like _blank, _self, _parent, etc.
- windowFeatures: It is used to provide features to the window that will open, for example, the dimension and position of the window.
Example 1: In this example, we will open a new window on a button click with the specified parameters.
HTML
<!DOCTYPE html>
<head>
<style>
body {
background-color: #272727;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20%;
}
.main {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
background-color: rgb(82, 82, 82);
margin: 10px;
font-family: 'Roboto', sans-serif;
}
.btn {
width: 100%;
height: 50px;
background-color: rgb(29, 29, 29);
color: white;
font-size: 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<h1>Click the button to open a new window</h1>
<button class="btn">Open</button>
</div>
<script>
document.querySelector('.btn')
.addEventListener('click', function () {
window.open('https://www.geeksforgeeks.org/',
'_blank',
'width=400,height=400 top=200,left=600');
});
</script>
</body>
</html>
Output:
Example 2: In this example, we will open a blank window by passing the URL as an empty string.
HTML
<!DOCTYPE html>
<head>
<style>
body {
background-color: #272727;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20%;
}
.main {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
background-color: rgb(82, 82, 82);
margin: 10px;
font-family: 'Roboto', sans-serif;
}
.btn {
width: 100%;
height: 50px;
background-color: rgb(29, 29, 29);
color: white;
font-size: 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<h1>Click the button to open a new window.</h1>
<button class="btn">Open</button>
</div>
</body>
<script>
document.querySelector('.btn')
.addEventListener('click', function () {
window.open('',
'_blank',
'width=400,height=400 top=200,left=600');
});
</script>
</html>
Output:
Supported Browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Firefox 1 and above
- Internet Explorer 4 and above
- Opera 3 and above
- Safari 1 and above
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
Similar Reads
Javascript Window prompt() Method The window.prompt() method in JavaScript is a built-in function that displays a dialog box prompting the user to input some text. This method is particularly useful for gathering simple user input in a straightforward manner. Syntaxlet result = window.prompt(message, defaultText);In the above syntax
4 min read
JavaScript window.close() Method JavaScript window.close() method, is used for closing a certain window or tab of the browser which was previously opened by the window.open() method.Syntax:window.close();Parameters: This method does not accept any parameters.Example: In this example, at first we will use the window.open() method to
2 min read
Javascript Window Open() & Window Close() Method The Javascript Window.Open() method is used to open the web pages into a new window or a new tab. It depends on the browser settings and the values assigned to the parameter. Syntax:window.open(URL, name, specs, replace)Parameters: This method accepts four parameters as mentioned above and described
3 min read
Window Object in JavaScript In JavaScript, the Window object represents the browser window that contains a DOM document.The Window object offers various properties and methods that enable interaction with the browser environment, including manipulating the document, handling events, managing timers, displaying dialog boxes, an
5 min read
Javascript Window Blur() and Window Focus() Method JavaScript provides various methods to manipulate browser windows, two of which are window.blur() and window.focus(). These methods are particularly useful when managing the user interface and enhancing the user experience by controlling window focus.Javascript Window Blur()Javascript Window Blur()
3 min read
How to open URL in a new window using JavaScript? In HTML, the anchor tag (<a>) is used to open new windows and tabs in a very straightforward manner. However, there are situations where you need to achieve the same functionality using JavaScript. This is where the window.open() method becomes useful.The window.open() method is used to open a
3 min read