50BOM【window对象、各种弹出框、定时器、Cookie】、JS对象

本文链接：https://blog.youkuaiyun.com/gangain/article/details/139307887

day50

JS核心技术

BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

Browser Object Model

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

window.location

Location属性是一个用于存储当前载入页面URL信息的对象。

功能：

实现当前页面的跳转，【前面学习的提交按钮也可以】

window.location.href = “http://www.baidu.com”;

window.location = “http://www.baidu.com”;

重新加载页面

location.reload();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">跳转百度</button>
		<button onclick="fun02()">刷新</button>
		
		<script type="text/javascript">
			
			function fun01(){
     
				//window.location.href = "http://www.baidu.com";
				//window.location = "http://www.baidu.com";
				location = "http://www.baidu.com";
			}
			
			function fun02(){
     
				//window.location.reload();
				location.reload();
			}
			
		</script>
	</body>
</html>

window.history

操作同一个浏览器会话中的已访问页面

功能：

history.back()

history.forward()

history.go(-1)

histroy.go(1)

histroy.go(0)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button onclick="fun01()">上两页</button>
		<button onclick="fun02()">上一页</button>
		<button onclick="fun03()">刷新</button>
		<button onclick="fun04()">下一页</button>
		<button onclick="fun05()">下两页</button>
		
		<script type="text/javascript">
			
			function fun01(){
     
				window.history.go(-2);
			}
			
			function fun02(){
     
				//window.history.go(-1);
				window.history.back();
			}
			
			function fun03(){
     
				window.history.go(0);
			}
			
			function fun04(){
     
				//window.history.go(1);
				window.history.forward();
			}
			
			function fun05(){
     
				window.history.go(2);
			}
			
			
		</script>
		
	</body>
</html>

运行，然后直接在地址栏搜索其他网站网址，然后返回在代码运行页面就可以使用功能按钮

window.open()

open()方法将创建一个新的浏览器窗口，实现弹出新的窗口

window.open(“http://www.baidu.com”,“baidu”);

一般少有使用：1.用户体验差；2.浏览器可能会禁用

注意要在浏览器设置：弹出式窗口允许的条件下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        
		<script type="text/javascript">
			
			window.open("http://www.baidu.com","baidu");
				//这里设置弹出指定窗口	
		</script>
		
	</body>
</html>

各种弹出框

注意：当xx框出现后，用户需要点击确定按钮才能继续进行操作。

警告框

警告框经常用于确保用户可以得到某些信息。

语法：alert(“文本”)

确认框

确认框用于使用户可以验证或者接受某些信息。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：confirm(“文本”)

提示框

提示框经常用于提示用户在进入页面前输入某个值。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：prompt(“文本”,“默认值”)