BOM的概念

BOM是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性。我们可以通过这些属性和方法去对浏览器进行操作。

window对象

window对象是BOM的核心，window对象表示浏览器窗口的一个对象，每个浏览器窗口都有一个window对象与之对应。

window对象的属性对象

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)
history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
frames: 框架对象，可以获取页面框架内容
screen: 包含有关客户端显示屏幕的信息
navigator: 导航对象, 包含所有有关访问者浏览器的信息

window对象的方法

alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
setInterval(): 设置定时器
clearInterval() : 移除定时器
setTimeOut() : 设置延时器
clearTimeOut(): 移除延时器
close(): 关闭窗口
print(): 调出打印对话框

open

window.open(参数1[,参数2][,参数3]): 打开指定的网址url
参数1：要加载的URL
参数2：窗口的名称或者窗口的目标(_blank默认：)
参数3：一个特性的字符串

btn.onclick = function () {
    //_self 在当前窗口打开
    //_blank 打开新的窗口(默认)
    //_parent 在父窗口打开
    // open("http://www.baidu.com","_self")
    open("http://www.baidu.com", "标题", "width=400,height=600,left=300,top=400")
}

location

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性; 所以window.location和document.location等效。

location对象的属性

location.hash = "#1"; //设置#后的字符串，并跳转
console.log(location.hash); //获取#后的字符串
console.log(location.port); //获取当前端口号
console.log(location.hostname); //获取主机名(域名)
console.log(location.pathname); //获取当前路径(服务器地址后部分)
console.log(location.search); //获取?后面的字符串
location.href = "www.baidu.com"; //设置跳转的URL，并跳转

完整的路径：

console.log(location.protocol); //协议 http 80,https 443,mysql 3306
console.log(location.host);//主机名称+端口
console.log(location.hostname); //主机名称(域名)
console.log(location.port);//端口 一共有65535个

//encodeURIComponent() 编码
//decodeURIComponent() 解码
console.log(encodeURIComponent("你不知道这是什么意思吧？"));
console.log(decodeURIComponent("%E4%BD%A0%E4%B8%8D%E7%9F%A5%E9%81%93%E8%BF%99%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D%E5%90%A7%EF%BC%9F"));

console.log(decodeURIComponent(location.pathname));
console.log(location.search);//? query
console.log(location.hash);//锚点 做 单页面应用程序SPA
console.log(decodeURIComponent(location.href)); //完整的路径

location对象的方法

location.assign("www.baidu.com"); //跳转到指定的URL, 与href等效
location.reload(); //最有效的重新加载,有缓存加载
location.reload(true); //强制加载,从服务器源头重新加载
location.replace("www.baidu.com"); //用新的URL替代,可以避免产生历史记录

var btn=document.getElementsByTagName("button");
//跳转
btn[0].onclick=function(){
    //以下代码都可以实现跳转
    // location.href="http://www.baidu.com" 
    // location="http://www.baidu.com"
    // location.replace("http://www.baidu.com")//不会破坏历史记录，所以不能回退
    location.assign("http://www.baidu.com")
}
//刷新
btn[1].onclick=function(){
    location.reload();
}

history

history对象是window对象的属性，它保存着用户上网的记录,从窗口被打开的那一刻算起。

history对象的属性

history.length; //history对象中的记录数

history对象的方法

history.back(); //前往浏览器历史条目前一个URL, 类似后退
history.forward(); //前往浏览器历史条目下一个URL, 类似前进
history.go(0); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)

navigator

navigator对象是window对象的属性，它保存了浏览器的信息, 如: 浏览器名称,版本,浏览器所在的电脑操作系统等。

navigator对象的属性

console.log(navigator.userAgent); //用户代理信息, 通过该属性可以获取浏览器及操作系统信息
console.log(navigator.geolocation); //返回一个Geolocation对象,获取位置信息

//获取当前设备的位置信息
navigator.geolocation.getCurrentPosition(function(pos){
    //pos.coords.latitude//纬度
    //pos.coords.longitude//经度
    console.log(pos.coords.longitude,pos.coords.latitude);
},function(err){
    console.log("获取失败："+err);
})