JSBOM简介

crainyday

前端 / JS

发布于：2019年4月18日

字数：1.1k字

时长：4分钟

JSBOM简介

一.BOM简介

BOM
------ 即浏览器对象模型
------ BOM可以使我们通过JS来操作浏览器

BOM对象:
------ Window, 代表的是整个浏览器窗口, 同时window也是网页中的全局对象
------ Navigator, 代表当前浏览器的信息, 通过该对象可以识别不同浏览器
------ Location, 代表当前浏览器的地址栏信息, 通过它可以获取地址栏信息, 或者操作浏览器跳转页面
------ History, 代表浏览器的历史记录, 由于隐私, 该对象不能获取到具体的历史记录, 只能操作浏览器向前或向后翻页且该操作只在当次访问时有效.
------ Screen, 代表用户的屏幕信息, 通过它可以获取到用户的显示器相关信息(一般用于手机端)

以上BOM对象在浏览器中都是作为window对象的属性保存, 可以通过window对象调用, 也可以直接调用.

console.log(window.navigator);
console.log(location);
console.log(history);
console.log(screen);

二.Navigator

代表的是当前浏览器的信息, 通过该对象可以识别不同的浏览器
由于历史原因, Navigator对象中的大部分属性都已无法帮助我们识别不同的浏览器
一般我们使用userAgent(用户代理即浏览器)来判断浏览器信息, 它是一个字符串, 存储着浏览器的信息, 不同的浏览器有不同的userAgent, 但用userAgent不能区分IE11
若通过userAgent不能判断, 还可以用一些浏览器中特有的对象或属性, 来判断浏览器信息, 比如: IE特有的ActiveXObject

/*navigator.userAgent
 *chrome:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
 *IE8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
 *IE9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
 *IE10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
 *IE11:Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
 */
if("ActiveXObject" in window){
    alert("你是IE");
}else if(/firefox/i.test(navigator.userAgent)){
    alert("你是火狐");
}else if(/chrome/i.test(navigator.userAgent)){
    alert("你是谷歌");
}

三.History

属性或方法	描述
length	返回浏览器历史列表中的URL数量
back()	加载history列表中的前一个 URL
forward()	加载history列表中的下一个 URL
go()	加载history列表中的某个具体页面(参数决定)

history方法的功能相当于浏览器的前进和后退按钮的功能

go() 参数(整数): 1 相当于forward(); -1 相当于back(); 2 前进两次

四.location

代表地址栏信息, 若直接打印location, 则可以打印出地址栏当前页面的完整URL

若直接将location修改为一个绝对地址或相对地址, 则当前页面会自动跳转到该路径, 并会生成相应的历史记录.

属性或方法	描述
href	设置或返回完整的 URL
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
port	设置或返回当前 URL 的端口号
pathname	设置或返回当前 URL 的路径部分
protocol	设置或返回当前 URL 的协议
search	设置或返回从问号(?)开始的URL(查询部分)
assign()	加载新的文档, 相当于修改location
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.onload = function() {
            var jump = document.getElementById("jump");
            jump.onclick = function() {
                // location = "index.html";
                // location = "https://www.baidu.com";
                // 和修改location一样
                // location.assign("https://www.baidu.com");
                // 效果和assign()类似,但不会产生历史记录
                // location.replace("https://www.baidu.com");
                // 刷新当前页面,和浏览器刷新按钮以及F5一样,若参数为true,则会强制刷新页面缓存
                location.reload(true);
            };
        }
    </script>
</head>
<body>
    <button type="button" id="jump">跳转</button>
</body>