day28 BOM浏览器对象 & 定时事件与Cookie & （视频卷子讲解）

3.10 BOM浏览器对象模型

3.10.1 window对象

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

| 属性 |

history 网页历史记录返回History只读对象

location 网页路径返回Location只读对象

navigator 导航返回Navigator只读对象

document 文档对象返回Document只读对象

parent 父页面返回父窗口

top 最顶级父页面返回最顶层父窗口

| 方法 |

alert() 显示一个警告框

prompt() 显示一个输入框

confirm() 显示一个确认框

close() 关闭浏览器窗口

open() 打开一个新的浏览器窗口，或查找一个已命名的窗口

setTimeout(function(){}, 2000) 设置在指定毫秒数后调用函数或计算表达式

3.10.2 Location对象

URL示例：http://192.168.1.156:8080/mvc/def/i2?content=淘宝&

[protocol]/[pathname]:[port]?[search]

属性

host 返回一个URL的主机名和端口

hostname 返回URL的主机名

href 设置并跳转到指定URL；

返回完整的URL； location.href='https://www.1688.com';

location.href='page2.html';

pathname 返回URL路径名

port 返回URL服务器端口号

protocol 返回URL协议

search 返回URL的查询部分

方法

reload() 重新加载当前页面 window.location.reload();

3.10.3 History对象

history对象相当于浏览器中的历史记录，可以通过history跳转到我们之前访问过得指定页面；

方法

back() 加载history列表中的前一个页面的URL并跳转

forward() 加载history列表中的下一个URL

go() 加载history列表中的某一个页面URL

示例：

//页面跳转方式1

//跳转到指定路径的页面

window.location.href='https://www.baidu.com';

//页面跳转方式2

//history 页面访问历史记录

//back() 加载history列表中的前一个url

window.history.back();

//页面跳转方式3

//go()加载history列表中的某一个具体页面

window.history.go(-1);//-1表示当前页面的前一个页面

3.10.4 navigator对象

属性

appName 返回浏览器内核的名称

appVersion 返回浏览器的平台和版本信息

platform 返回运行浏览器的操作系统平台

systemLanguage 返回OS使用的默认语言

userLanguage 返回OS的自然语言设置

userAgent 返回由客户机发送服务器的user-agent头部的值

cookieEnabled 判断浏览器是否启用cookie,返回布尔值

示例：

//appName属性 返回浏览器的名称

var browser_name = window.navigator.appName;

alert(browser_name);

//返回浏览器的平台和版本信息

var app_version = window.navigator.appVersion;

alert(app_version);

//判断浏览器是否启用cookie,返回一个布尔值

var useCookie = window.navigator.cookieEnabled;

alert(useCookie);

3.11 弹框

警告框

alert("警告框");

确认框

确认框会返回一个布尔值

var tar = confirm("请确认");

if(tar){

}

输入框

prompt("标题","输入提示信息");

3.12 定时事件

setInterval(function, time);

设置间隔多长时间执行一次function代码，代码可以被多次执行，时间单位是毫秒ms

示例：

//设置1000ms执行一次，打印当前系统时间

var id = setInterval(function(){

console.info("定时任务:::"+new Date().toString());

},1000);

clearInterval(id);

1可取消由 setInterval() 设置的time间隔时间，即让setInterval失效。

2 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

示例：

function stop(){//可以通过触发事件调用该方法

clearInterval(a);

}

setTimeout(function,time);

设置延迟多长时间执行代码，代码只会执行一次，时间单位为毫秒ms

示例：

//调用该方法后，延迟2s执行弹框

function run(){

setTimeout(function(){

		alert("延迟执行，只执行一次");

	}, 2000);

}

3.13 Cookie

Cookie是页面之间的共享数据，被保存在浏览器中，有失效时间；

3.13.1 创建/修改cookie

//方式1 会话状态，关闭浏览器cookie消失

document.cookie="username=张三;"

//方式2 创建cookie设置有效期，到期cookie消失

document.cookie="username=张三; expires=Fri Jul 23 2021 15:24:48 GMT";

3.13.2 删除cookie

//修改cookie有效期让cookie失效

document.cookie="username=张三; expires=Fri Jul 23 1970 15:24:48 GMT";

3.13.3 查询cookie

var cookies = [];

cookies = document.cookie.split(';');

console.info(cookies);

for(var i = 0; i < cookies.length; i++){

	var kv = cookies[i].trim();

	var ar = kv.split("=");

	console.info(ar[0]+":::"+ar[1]);

}