Article Directory
1 Method introduction
window.open()A method is a built-in method in JavaScript that is used to open a new window or tab in the browser.
The syntax for this method is:
window.open(url, name, features, replace);
It should be noted that since the abuse of pop-up windows has become a security problem, modern browsers usually block window.open()method calls by default unless triggered by user interaction. Therefore, in actual development, we need to use this method carefully to avoid being mistaken by browsers as malicious behavior.
2 Parameter description
-
urlRequired parameter : URL address to open. Can be any valid URL, including protocols such as HTTP, HTTPS, FTP, etc. -
nameOptional parameter : the name of the new window, default_blank. Can be any string, there are the following situations:_self: Open in the current window._blankOr do not write this parameter: open in a new window, and the window name is an empty string.任何字符串Open in a new window named任何字符串. If the specified name already exists, the URL will be opened in that window instead of creating a new one.
-
featuresOptional arguments : a comma-separated string specifying some properties of the new window. This string can contain the following attributes:width: the width of the window;height: the height of the window;top: The distance between the window and the top of the screen, the default is 0;left: The distance between the window and the left side of the screen, the default is 0;menubar: Whether to display the menu bar, yes\no;toolbar: Whether to display the toolbar, yes\no;location: Whether to display the address bar, yes\no;status: Whether to display the status bar, yes\no;resizable: Whether to allow the user to resize the window, yes\no;scrollbars: Whether to display the scroll bar, yes\no.
-
replaceOptional Parameters : A Boolean value specifying whether newly opened URLs replace the current page's history. If true, the new URL will replace the history of the current page, and the user will return to the previous page when they click the browser's "Back" button; if false, the new URL will be added to the history of the current page , when the user clicks the browser's "Back" button, it will return to the previous URL.
The following points need attention:
When specifying
featuresthe parameter,widthandheightmust be explicitly given a value, otherwise,featuresthe parameter will have no effect.
featuresAmong the parameters,width,height,top,leftare commonly used parameters.menubar,toolbar,location,status,resizable,scrollbarsparameters have been deprecated by most browsers (for better user experience), so even if relevant settings are made, they will not change.
3 Example of use
3.1 Open a webpage in the current window
Example usage:
window.open("https://www.baidu.com/","_self");
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#btn{
height: 50px;
width: 200px;
border: 1px solid black;
background-color: bisque;
line-height: 50px;
text-align: center;
}
#btn:hover{
border: 1px solid rgb(14, 102, 202);
background-color: rgb(80, 180, 113);
cursor:pointer;
}
</style>
</head>
<body>
<div id="btn">百度一下</div>
<script>
var myBtn = document.getElementById('btn');
myBtn.addEventListener('click',function(){
//当前页面中打开
window.open("https://www.baidu.com/","_self");
})
</script>
</body>
</html>
expand:
Open in the current window can also be used window.location.href, which is an attribute in JavaScript, indicating the URL address of the current web page. It can be used to obtain the URL of the current webpage, or it can be used to jump to other webpages.
Example usage:
console.log(window.location.href); // 输出当前网页的 URL 地址
window.location.href = "https://www.example.com"; // 跳转到 https://www.example.com
It should be noted that the window.location.href attribute is readable and writable, and can directly jump to other web pages when setting its value. Therefore, you need to be careful when using it, so as not to accidentally cause page jumps.
3.2 Open a web page in a new window
Example usage:
window.open("https://www.baidu.com/");
window.open("https://www.baidu.com/","_blank");
window.open("https://www.baidu.com/","任何字符串");
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#btn{
height: 50px;
width: 200px;
border: 1px solid black;
background-color: bisque;
line-height: 50px;
text-align: center;
}
#btn:hover{
border: 1px solid rgb(14, 102, 202);
background-color: rgb(80, 180, 113);
cursor:pointer;
}
</style>
</head>
<body>
<div id="btn">百度一下</div>
<script>
var myBtn = document.getElementById('btn');
myBtn.addEventListener('click',function(){
//新窗口中打开
//var item1 = window.open("https://www.baidu.com/");
//var item2 = window.open("https://www.baidu.com/","_blank");
var item3 = window.open("https://www.baidu.com/","任何字符串");
console.log('item',item3);
})
</script>
</body>
</html>
In order to understand the meaning of the name parameter, assign the return value of Window.open() to a variable item, and the printed results are as follows:
3.3 Open a web page with a specified size and position in a separate window
Sample code:
window.open(url, "_blank", "width=800,height=300,top = 200, left=400");
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#btn {
height: 50px;
width: 200px;
border: 1px solid black;
background-color: bisque;
line-height: 50px;
text-align: center;
}
#btn:hover {
border: 1px solid rgb(14, 102, 202);
background-color: rgb(80, 180, 113);
cursor: pointer;
}
</style>
</head>
<body>
<div id="btn">百度一下</div>
<script>
var myBtn = document.getElementById('btn');
myBtn.addEventListener('click', function () {
var url = "https://www.baidu.com/";
window.open(url, "_blank", "width=800,height=300,top = 200, left=400");
})
</script>
</body>
</html>
The result display:
