本文目录
- 1.Window 对象
- 2.Navigator 对象
- 3.Location 对象
- 4.History对象
- 5.Screen 对象
BOM(Browse Object Model),浏览器对象模型，没有相关标准，是约定俗成的东西，定义了一些操作浏览器的方法和属性，大部分方法都是通过window对象来调用的，window对象是浏览器端的最顶层的对象。
1.Window 对象
open方法
open方法可以用来打开一个新的窗口(页面)
var w = open(页面url地址， 打开的方式)
注意：如果url为空，默认打开一个空白页面
如果打开方式为空，默认为新窗口方式打开
返回值： 新打开窗口的window对象
window.open("http://nodeing.com")
window.open("http://nodeing.com", "_self")
- _blank - URL加载到一个新的窗口。这是默认
- _parent - URL加载到父框架
- _self - URL替换当前页面
- _top - URL替换任何可加载的框架集
close方法
<button id="op">打开窗口</button>
<button id="cls">关闭</button>
<script>
var opBtn = document.getElementById("op")
var clsBtn = document.getElementById("cls")
var w = null;
opBtn.onclick = function(){
w.open()
}
clsBtn.onclick = function(){
w.close()
}
</script>
页面加载事件
- onload
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
- onunload
window.onunload = function () {
// 当用户退出页面时执行
}
2.Navigator 对象
Navigator 对象包含有关浏览器的信息。
alert(window.navigator.userAgent)
//通过userAgent可以判断用户浏览器的类型
简单应用：
if(window.navigator.userAgent.index("MSIE") != -1){
alert("当前是ie浏览器")
}else{
alert("当前浏览器不是ie")
}
判断离线状态
navigator.onLine属性返回一个布尔值，表示用户当前在线还是离线（浏览器断线）。
navigator.onLine // true
注意点一
有时，浏览器可以连接局域网，但是局域网不能连通外网。这时，有的浏览器的onLine属性会返回true，所以不能假定只要是true，用户就一定能访问互联网。不过，如果是false，可以断定用户一定离线。
注意点二
只有在网络状态发生变化的时候才会触发此事件。用户变成在线会触发online事件，变成离线会触发offline事件，可以通过window.ononline和window.onoffline指定这两个事件的回调函数。
window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });
Navigator.geolocation
Navigator.geolocation属性返回一个 Geolocation 对象，包含用户地理位置的信息。注意，该 API 只有在 HTTPS 协议下可用，否则调用下面方法时会报错。
Geolocation 对象提供下面三个方法。
- Geolocation.getCurrentPosition()：得到用户的当前位置
- Geolocation.watchPosition()：监听用户位置变化
- Geolocation.clearWatch()：取消watchPosition()方法指定的监听函数
注意，调用这三个方法时，浏览器会跳出一个对话框，要求用户给予授权。
3.Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
console.log(window.location)
地址栏地址
console.log(window.location.href)
查询字符串
console.log(window.location.search)
hash值
console.log(window.location.hash)
Location 对象方法
利用Javascript的location对象上的三个方法可以实现重定向到其他网页：
- location.href="URL"
- location.replace("URL")
- location.assign("URL")
参数：
接受单个参数的URL，这是必需的。用于指定新网页的引用。
返回值：
无返回值。
注意：
- 上述三个方法加上window.进行调用，效果是一样的
- URL可以是绝对路径，也可以是相对路径
- 所有方法的输出都相同，但location.replace()方法从文档历史记录中删除当前文档的URL。因此，如果希望选项导航回原始文档，最好使用location.assign()方法或者直接用location.href去直接跳转。
- href和assign的效果是一样的，只是实现方式不同而已。
4.History对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
5.Screen 对象
Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。window.screen属性指向这个对象。
以下是Screen对象比较常见的几个属性:
- Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
- Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
- Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
- Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）
在实际项目中，可以利用Screen对象来做一些判断，比如：根据屏幕的宽度，将用户导向不同网页的代码。
if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}
