LinHuijuan's Blog

BOM：Browser Object Model 浏览器对象模型

# BOM：Browser Object Model 浏览器对象模型

利用ECMAScript，我们可以通过BOM对象（即browser object model）来操作浏览器窗口、浏览器导航对象(navigator)、屏幕分辨率(screen)、浏览器历史(history)、cookie等等。 [TOC]

# 一、window.open(url,打开方式)

  1. url为空：默认打开空白页面
  2. 打开方式为空：默认新窗口方式打开
  3. 返回值：返回新打开窗口的window值

# 二、window.close()

  1. 可以关闭在本窗口中通过js方法打开的新窗口
  2. ff:无法关闭；
  3. chrome:直接关闭；
  4. ie：询问用户。

# 三、window.navigator.userAgent

  1. 浏览器信息
if ( window.navigator.userAgent.indexOf('MSIE') != -1 ) {
	alert('我是ie');
} else {
	alert('我不是ie');
}
1
2
3
4
5
  1. 谷歌浏览器
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
1

# 四、window.location

  1. 浏览器地址信息

  2. window.location.href ->url(同window.location)

  3. window.location.search

    ->url?后面的内容

  4. window.location.hash ->url#后面的内容

window.location.href
// "https://www.google.com/search?q=frontend#user=123"

window.location.search
// "?q=frontend"

window.location.hash
// "#user=123"
1
2
3
4
5
6
7
8

# 五、可视区的内容

document.documentElement.clientWidth[clientHeight]
document.body.clientWidth[clientHeight]
1
2

# 六、滚动条滚动距离

// 标准浏览器
document.documentElement.scrollTop[scrollLef]
// 谷歌浏览器
document.body.scrollTop[scrollLeft]
// 兼容不同的浏览器
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
1
2
3
4
5
6

# 七、window.onscroll/onresize

  • onscroll : 当滚动条滚动的时候触发。
//
window.onscroll = function() {
	document.title = i++;
}
1
2
3
4
  • onresize : 当窗口大小发生改变的时候触发
window.onresize = function() {
	document.title = i++;
}
1
2
3

Class