JavaScript_BOM简介

JS_BOM简介

1、什么是BOM

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

2、BOM对象

Window

- 代表整个浏览器的窗口 同时window也是网页中全局对象

Navigator

- 网景前身 代表当前浏览器的信息 通过对象可以来识别不同的浏览器

由于历史原因 navigator对象中的属性已经不能帮助我们获取正确属性了

一半我们只会使用userAgent来判断浏览器信息

1、 获取浏览器信息

console.log(window.navigator.userAgent);

2、 利用正则表达式进行判断浏览器类型

if(/firefox/i.test(navigator.userAgent))

if(/chrome/i.test(navigator.userAgent))

3、 如果通过UserAgent不能判断 比如IE11 可以通过浏览器特有对象，来判断。 比如ActiveXObject

if(“ActiveXObject” in window) 检查对象里是否包含对象

Location

- 代表当前浏览器的地址栏信息 通过Location可以获取地址栏信息、或者操作浏览器跳转页面

1、直接输出location获取当前地址栏信息

2、loaction属性修改为一个完整的路径，或者相对路径。页面会直接跳转，并生成相应的历史记录。

3、location.assign 用来跳转到其他页面。 作用和直接修改localtion一样

4、location.reload 重新加载页面。 如果参数中传递一个true 作为参数，则会强制清空缓存刷新页面。

5、location.replace 可以使用新的页面替换当前页面 区别于没有历史记录

History

- 代表浏览器的历史记录 可以通过该对象来操作浏览器的历史记录

由于隐私原因 该对象不能获取到具体的历史记录 只能操作浏览器向前或向后翻页。 且当次有效。

history.back 跳转上一个页面。作用和浏览器的后退按钮一样

history.forward 跳转下一个页面，作用和浏览器前进一样。

history.go 可以用来跳转到指定的页面。

Screen

- 代表用户屏幕信息。移动端用处比较大。

这些BOM对象在浏览器中都是作为window对象的属性进行保存的 可以通过window对象来使用。也可以直接使用