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.
<!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.
<!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.