JavaScript (九) -- JavaScript BOM之 Window 对象常用方法

普雅^0^雷蒙达

已于 2023-05-07 22:14:59 修改

阅读量456

点赞数 1

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2023-05-07 16:40:50 首次发布

本文链接：https://blog.csdn.net/PUYALEI/article/details/130540882

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. Window 对象 -- 浏览器的打开与关闭（open()、close()）

1.1 window.open(url, name, specs, replace)：打开一个新窗口。

1.2 close() ：负责关闭指定浏览器窗口。

2. Window 对象 -- 弹出框（alert()、confirm()、prompt()）

2.1 alert()方法（警告框）

2.2 confirm()方法（确认框）

2.3 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>

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！

普雅^0^雷蒙达

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript (九) -- JavaScript BOM之 Window 对象常用方法

在这个例子中，当用户点击“Open New Window”按钮时，调用。使用时需要指定要关闭的 window 对象，若不指定，则默认关闭当前页面所处的窗口。参数设置为false，意味着不会替换窗口历史记录。参数设置了新窗口的大小、滚动条等特性。参数是想要在新窗口中打开的网址。方法打开一个新的窗口。参数是新窗口的名称。
复制链接

扫一扫