技术是自由的靠山
本文长期更新，如有错误，还请指正
关注一下不迷路 =.=
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高级程序设计》
