0.前言
最近学习了JavaScript中的BOM和DOM,感觉就像两大护法,为JavaScript保驾护航,今天就来分享一下这二者之一———BOM。
1.BOM简介
BOM:浏览器对象模型(Browser Object Model),是操作浏览器和屏幕的对象集合。通过window全局对象来使用它们。
此时可以发现,我们过去定义的变量其实就是给window这个全局对象添加的属性;过去声明的函数其实就是给window这个全局对象添加的方法。
通过上面的结构图可以发现window下面有很多属性,对象。尤其是在第二行:
- window.document:表示的是当前的文档(页面),他的属性和方法属于DOM范围,我们下节分享。
- window.frames:表示当前页面所用的所有框架的集合
- window.navigator:它是用来描述浏览器及其功能的对象。
- window.screen:它是用来描述浏览器以外的环境,例如屏幕的宽高,分辨率之类的。
- window.location:是对浏览器页面进行的操作。如刷新、加载之类的。
-
window.history:是对浏览器访问的历史记录,足迹之类进行的操作。
上面的这是六种方法中,今天着重说两个:loaction和history。
2.正文
这样干说没意思,我们以案例说话。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM简介</title>
</head>
<body>
<button onclick="wh()">跳转到红色界面</button>
<button onclick="refresh()">刷新界面</button>
<button onclick="ass()">加载红色界面</button>
<button onclick="goBack()">上一页</button>
<button onclick="goForward()">下一页</button>
<button onclick="goPage()">直接跳到历史记录中的黄色界面</button>
<script type="text/javascript">
</script>
</body>
</html>
首先搭好界面,第一部分:
window.location
在代码中的javascript中添加下面下面代码:
console.log(window.location.href);
function wh() {
alert("瞅你咋地");
window.location.href = "";
}
function refresh() {
window.location.reload();
}
function ass() {
// window.location.assign("red.html");
window.location.replace("red.html");
}
这段代码用了几个location方法:
(1)href:表示的是当前页面所在的本地地址在浏览器上显示出来了。
(2)reload():表示的是刷新界面;
(3)reload(true):也表示的是刷新界面,但是刷新的界面,不会被缓存。
(4)assign():加载接的界面,可以返回上一页。
(5)replace():也是加载新的界面,但是不会在历史记录中留下痕迹,就是说返回不了上一页。
注意:更改location中的href和调用assgin()会清空历史记录。
第二部分:window.history
function goBack(){
window.history.back();
}
function goForward(){
window.history.forward();
}
function goPage() {
window.history.go(2);
}
(1)length:表示浏览记录的个数
(2)back():上一页
(3)forward():下一页
(4)go(num):直接跳到指定的历史记录,如果num小于0会跳到当前界面之前的num的绝对值个记录。如果num大于0,会跳到当前界面之后的num值记录。
注意:如果想用go(num)进行页面的跳转,必须在浏览器中有历史记录,否则是跳转不到指定的界面的。