BOM——基础

技术是自由的靠山

本文长期更新，如有错误，还请指正
关注一下不迷路 =.=

BOM，浏览器对象模型

window 对象

---

window 对象时JS的全局作用域，所有的全局变量都归纳为window的属性。

注：

• window.xx 和 var xx 的区别
  var xx定义的变量不可通过 delelte window.xx 删除
• 判断全局变量是否定义
  window.xx===undefined

window和frame的关系

---

极少用到frame，暂不作详述

窗口大小

---

这里只说视口的大小

	ie8	非H5	H5
宽	document.documentElement.clientWidth	window.innerWidth
高	document.documentElement.clientHeight	window.innerHeight

window.open()

---

window.open(url,windowName,optionsStr,bool) 返回一个窗口对象的引用，可以使用此对象移动、关闭窗口

• windowName 如果存在，则聚焦否则新建
• optionsStr 字符串形式的配置项，

location 对象

---

location 即属于是window对象也是document对象

image.png

location.href

返回当前页面的完整url

location.href
// "https://www.jianshu.com/writer#/notebooks/256102535/notes/29153954/preview"

注：使用此方法或者 window.location=xx 进行页面跳转

location.protocol

返回协议类型

location.protocol
//"https:"

location.host

• location.host 返回地址和端口号
• location.hostname 返回地址
• location.port 返回端口号

location.host
// "www.jianshu.com"

location.hash

返回hash部分（#号后面）

location.hash
// "#/notebooks/256102535/notes/29153954/preview"

注：react-router中的hashRouter貌似就使用的hash管理路由的

location.search

返回查询部分（？后面）

location.search
// "?id=1570130098213052&wfr=spider&for=pc"

navigator 对象

---

用于识别浏览器，一般都使用 userAgent 来区分，此属性不同浏览器包含不同的特定的字段：

    //edge
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393"
    //ie11
    "mozilla/5.0 (windows nt 6.3; trident/7.0; rv:11.0) like gecko"
    //ie10
    "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)"
    //ie9
    "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)"
    //ie8
    "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)"
    //firefox
    "Mozilla/5.0 (Windows NT 10.0; WOW64; rv:56.0) Gecko/20100101 Firefox/56.0"
    //chrome
    "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.7 Safari/537.36"

一个检测浏览器和其版本的函数 ：

function getVersion() {
    var ua = window.navigator.userAgent.toLowerCase();
    
    //顺序很重要
    //Edg
    if(ua.indexOf("edge") > -1){
        var ver = ua.match(/edge\/([\d.]+)/)[1];
        return { type: "edge", version: ver };
    }
    //ie11
    if(ua.indexOf(") like Gecko")>-1){
        var ver = ua.match(/rv\:([\d.]+)/)[1];
        return { type: "IE", version: ver };
    }
    //ie
    if (ua.indexOf("msie") >= 0) {
        var ver = ua.match(/msie ([\d.]+)/)[1];
        return { type: "IE", version: ver };
    }
    //firefox
    else if (ua.indexOf("firefox") >= 0) {
        var ver = ua.match(/firefox\/([\d.]+)/)[1];
        return { type: "Firefox", version: ver };
    }
    //Chrome
    else if (ua.indexOf("chrome") >= 0) {
        var ver = ua.match(/chrome\/([\d.]+)/)[1];
        return { type: "Chrome", version: ver };
    }
    //Opera
    else if (ua.indexOf("opera") >= 0) {
        var ver = ua.match(/opera.([\d.]+)/)[1];
        return { type: "Opera", version: ver };
    }
    //Safari
    else if (ua.indexOf("Safari") >= 0) {
        var ver = ua.match(/version\/([\d.]+)/)[1];
        return { type: "Safari", version: ver };
    }
}

screen对象

---

history

---

参考

• 《javascript高级程序设计》

• js检测是什么浏览器并输出版本号