BOM
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型
简单的讲dom用于操作文档,bom用于操作浏览器
- bom对象
window
-代表整个浏览器窗口是网页中的全局对象
navigator
-代表当前浏览器信息,可以识别不同浏览器
location
-代表当前浏览器地址栏信息
history
-代表浏览器的历史记录,因为隐私问题不能具体获取历史记录,可以控制前后翻页并且仅在当次访问有效
screen
-用于获取显示器信息
window
window对象的属性很多仅介绍常用
定时调用setInterval(function(){},1000);
参数1:回调函数
参数2:时间间隔 单位毫秒
返回一个number类型的数据(计时器编号,用于关闭计时器)
clearInterval()
关闭指定计时器,接收任何类型数据都不会报错 ,可以放心使用。
例:60s页面计时
var p = document.getElementsByTagName("p")[0];
var i =0;
var clock = setInterval(function(){
p.innerText=i;
i++;
if(i==60)clearInterval(clock);
},1000);
注意:对于一个元素当事件嵌套使用时,每次事件都会创建一个定时器,而此时我们只能关闭最后一个定时器。这时将关闭语句写到定时器上方,使得每次事件都能关闭上一个定时器后打开下一个。
history
history.length;//返回访问连接的长度
history.back();//作用等同于浏览器回退按钮
history.forward();//作用等同于浏览器前进按钮
history.go();//跳到制定页面传入整数,正数向前负数向后
直接在控制台写入测试比较好用
location
直接打印location可以获得当前页面路径,
修改location可以跳转页面,类似于超链接,会生成历史记录。
对象属性多涉及服务器的url手册
location.assign("www.baidu.com");//作用和直接修改location其实一样
location.reload(true);//刷新页面;传入空值缓存可能不清除,一般写true
location.replace();//使用一个新的页面替换当前页面**不会生成历史记录**
screen
主要用于移动开发适配问题
navigator
navigator,因为历史原因,几乎全部属性都已经失效
本节剩余内容可以直接跳过或者,剩下的内容也可以当笑话看
历史小剧场
程序猿A:ie8的兼容性太差了,我们为什么要花费那么多的精力去满足极少的客户
程序猿B:完全兼容的成本太高了,我们可以让网页能在ie正常显示,不必完全达到预期
程序猿A:好主意,我们怎么区分浏览器?
程序猿B:navigator.appName(告诉我你们是谁)
火狐:Netscape(老大我会永远记住你)
Chrome:Netscape(向大佬致敬)
ie8:Microsoft Internet Explorer(干翻Netscape我就是老大)
旁白:Netscape是原网景公司的浏览器,
因不及ie(windows预装ie的原因)后倒闭,
是火狐前身,也是最早使用navigator的浏览器。
程序猿A:好的,现在我们可以区分ie了,不用辛苦兼容ie真棒
ie:嘤嘤嘤,为什么你们不陪我玩,为什么给我的是最差的,我不服
程序猿B:navigator.appName(告诉我你们是谁)
火狐:Netscape(老大我会永远记住你)
Chrome:Netscape(向大佬致敬)
ie11:Netscape(试图混入其中)
程序猿A:emmmm。。。。。。
userAgent可能是唯一还有作用的属性,返回系统版本、渲染器类型、浏览器名称等 ,使用正则表达式可以提取关键字,用于区分浏览器这个属性基本上也废掉了 ,因为下面是最新的egde的返回信息
Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134
你返回的关键词包括Chrome和Safari是几个意思?(可能因为edge使用的是Chrome内核)透露着一股心酸的气息,又好笑又可怜,但我还是想说求求你们不要用ie了。
目前通常用判断ie特有方法来确定浏览器