目录
1. Window 对象 -- 浏览器的打开与关闭(open()、close())
1.1 window.open(url, name, specs, replace):打开一个新窗口。
2. Window 对象 -- 弹出框(alert()、confirm()、prompt())
1. Window 对象 -- 浏览器的打开与关闭(open()、close())
方法名 | 说明 |
---|---|
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
close() | 关闭浏览器窗口。 |
1.1 window.open(url, name, specs, replace):打开一个新窗口。
- url:要打开的网址。
- name:窗口的名称。
- specs:窗口的特性,比如大小、位置、是否有滚动条等。
- replace:是否将窗口的历史记录替换掉。
open()方法的specs的可选值:
<!DOCTYPE html>
<html>
<head>
<title>Window Open Example</title>
</head>
<body>
<h1>JavaScript Window Open Example</h1>
<button onclick="openNewWindow()">打开新的window窗口</button>
<script>
function openNewWindow() {
var url = "https://www.google.com";
var name = "newWindow";
var specs = "height=400,width=600,scrollbars=yes";
var replace = false;
window.open(url, name, specs, replace);
}
</script>
</body>
</html>
在这个例子中,当用户点击“Open New Window”按钮时,调用
openNewWindow()
方法,该方法将使用window.open()
方法打开一个新的窗口。-
url
参数是想要在新窗口中打开的网址。-
name
参数是新窗口的名称。-
specs
参数设置了新窗口的大小、滚动条等特性。-
replace
参数设置为false,意味着不会替换窗口历史记录。
1.2 close() :负责关闭指定浏览器窗口。
使用时需要指定要关闭的 window 对象,若不指定,则默认关闭当前页面所处的窗口。
<body>
<input type="button" id="btn" value="打开新窗口">
<input type="button" id="btnc" value="关闭打开的窗口">
</body>
<script>
//open方法演示
var eleBtn = document.getElementById("btn");
var newwindow;
eleBtn.onclick = function(){
newwindow = window.open("http://www.baidu.com");
}
//close用法
var eleBtnc = document.getElementById("btnc");
eleBtnc.onclick = function(){
newwindow.close();
}
</script>
2. Window 对象 -- 弹出框(alert()、confirm()、prompt())
使用 alert()、confirm()和 prompt()方法,可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关,而且也不包含 HTML。它们的外观由操作系统或者浏览器决定,无法使用 CSS 设置。此外,这些对话框都是同步的模态对话框,即在它们显示的时候,代码会停止执行,在它们消失以后,代码才会恢复执行。
2.1 alert()方法(警告框)
alert()接收一个要显示给用户的字符串。(即,只接收一个参数)。通常用于向用户显示一些他们无法控制的消息,比如报错。用户唯一的选择就是在看到警告框之后把它关闭。
注:
- 调用 alert()时,传入的字符串会显示在一个系统对话框中。对话框只有一个“OK”(确定)按钮。如果传给 alert()的参数不是一个原始字符串,则会调用这个值的 toString()方法将其转换为字符串。
- 与 console.log 可以接收任意数量的参数且能一次性打印这些参数不同,alert()只接收一个参数。
<script>
alert("你确定要删除这个文件吗?");
</script>
2.2 confirm()方法(确认框)
确认框有两个按钮:“Cancel”(取消)和“OK”(确定)。用户通过单击不同的按钮表明希望接下来执行什么操作。可以判断 confirm()方法的返回值:true 表示单击了 OK 按钮,false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。
<script>
var result = confirm('你确定要删除这个文件吗?');
if (result) {
console.log('确定');
}else{
console.log('取消');
}
</script>
2.3 prompt()方法(提示框)
提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮,提示框还会显示一个文本框,让用户输入内容。prompt()方法接收两个参数:要显示给用户的文本,以及文本框的默认值(可以是空字符串)。
<script>
var result = prompt("小朋友,你今年几岁了?");
if (result) {
console.log(result);
}else{
console.log('取消');
}
</script>
如果对你有帮助,请帮我点一下赞,我才有动力继续创作,谢谢!