BOM
BOM(Browser Object Model)就是浏览器对象模型,是由浏览器提供的特殊对象,我们可以进行操作。对于 BOM 的学习除了需要了解这些对象分别代表什么,还需要学会使用其常用的方法
下面一共会介绍 6 种对象:
- window
- navigator
- screen
- location
- document(重要)
- history(垃圾)
注:上面的首字母用的都是小写,毕竟这是一个对象,不是一个类
1、window
还记得 JavaScript 有一个全局对象吗,它的名字就是 window,window 对象不仅仅可以充当全局对象,同样还可以代表 浏览器的窗口(就是我们打开的网页窗口),一般用于获取窗口内外宽高。这里解释一下什么是外窗口,就是你看到的整个浏览器,而内窗口就只是我们打开的网页部分(其实这个自己试一下就知道了)
//获取浏览器窗口的内高度、宽度
console.log("当前网页的内宽度是:" + window.innerWidth);
console.log("当前网页的内高度是:" + window.innerHeight);
//获取浏览器窗口的外高度、宽度
console.log("当前网页的外宽度是:" + window.outerWidth);
console.log("当前网页的外宽度是:" + window.outerHeight);
//打开指定的窗口
window.open("https://www.baidu.com/");
//关闭当前的窗口(copy 执行的时候记得注释掉)
window.close();
控制台输出结果:
2、navigator
包含一些 浏览器的基本信息,例如浏览器版本、应用名称等信息
console.log("浏览器名称:" + navigator.appName);
//出于兼容性的考虑,目前任何的浏览器都可以返回 “Netscape”,个人觉得可能是缅怀网景公司吧
console.log("浏览器版本:" + navigator.appVersion);
console.log("浏览器语言:" + navigator.language);
控制台输出结果:
但是请注意,来自 navigator 对象的信息具有 误导性,有时候新手喜欢用 navigator.appVersion 获取版本,从而编写不同的代码,但实际上这是不可取的,下面我们把浏览器的版本改掉:
Object.defineProperty(window.navigator, 'appVersion', {value: "This is wrong version, haha", writable: false});
console.log("浏览器版本:" + navigator.appVersion);
现在的浏览器版本:
3、screen
字面翻译就是 ‘屏幕’,实际上确实就是屏幕,包含了用户 当前屏幕的一些信息(就是你的笔记本屏幕)
console.log("当前屏幕的宽度是:" + screen.width);
console.log("当前屏幕的高度是:" + screen.height);
console.log("当前屏幕的色深是:" + screen.colorDepth);
控制台输出结果:
4、location
获取 当前页面 URL 的信息,你问什么是 URL?就是地址栏里面的内容,组成部分有协议、域名、端口、虚拟目录、文件名等等
//都写了是什么,自己看吧(结果就不展示了哈)
console.log("URL:" + location.href);
console.log("协议 " + location.protocol);
console.log("域名 " + location.host);
console.log("端口 " + location.port);
//重定向 URL
console.log(location.assign("https://www.baidu.com/"));
//刷新当前页面
console.log(location.reload());
5、document(重要)
个人认为 document 对象非常重要,之后我们会接触 DOM(文档对象模型),这是一种树形结构的模型,而 document 就是 DOM 树的根节点,我们可以利用 document 获取 DOM 树的节点,并且修改其内容或者属性。现在你可能无法理解,但是没关系,我会在 DOM 这篇博客中详细介绍用法,现在混个眼熟就行
由于需要操作页面元素,所以本次代码我们都写在 HTML 文件中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<!-- 我希望你们不要忘了这种写法 -->
<script type="text/javascript">
function changeTitle() {
//修改页面的标题,就是 <head> 标签中的 <title> 标签
document.title = "This is document object";
}
function func1() {
//获取当前列表节点,并返回
return document.getElementById('language');
}
changeTitle();
</script>
</head>
<body>
<!-- 列表 -->
<ul id="language">
<li>C</li>
<li>C++</li>
<li>Python</li>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
我们在控制台执行 func1() 函数,查看结果,可以看到列表节点被获取了:
document 还有一个重要的属性,那就是 Cookie
Cookie 通俗点讲就是用于 让浏览器记住你,存储你的个人信息,方便下次登录。但是请注意,由于 document 可以直接获取用户的 Cookie,这样会导致用户的个人信息被曝光,解决方法就是我们可以在服务器端设置 Cookie 的时候使用 httpOnly,这样别人就无法使用 JavaScript 代码读取当前页面的 Cookie
//获取当前页面 Cookie
document.cookie;
6、history
字面意思,存放 浏览器历史记录,这个对象其实我不应该在这里讲,因为它已经被淘汰了,个人建议不要用了,前进后退什么的用 AJAX 完全能做到更好
//看看俩方法就行,back() & forward()
//相当于浏览器的后退
history.back();
//相当于浏览器的前进
history.forward();