js中浏览器对象BOM

参考  ：  https://www.cnblogs.com/Peng2014/p/4725524.html

1、 window对象   https://www.runoob.com/jsref/obj-window.html

　　属性：

　　a、onpopstate 和 onhashchange：这两个事件都是 url变化的监听器（必须是同一个document文档上，url变化才会触发这个事件。如：单页面应用的url，history.pushState创建的url）。

　　b、window.name：每个窗口都有独立的window.name属性，这个属性是挂在窗口上的，这个窗口 document文档 无论怎么变，文档的js都可以读写到。（只要窗口不关，就不会销毁）

　　c、window.parent：parent 属性返回当前窗口的父窗口。

　　d、window.self：self 属性返回指向当前 window 对象的引用。

　　e、window.top：Top属性返回当前窗口的最顶层浏览器窗口。

　　f、window.innerWidth：返回窗口的文档显示区的宽度。

　　方法：

　　a、window.scrollTo()：把内容滚动到指定的坐标。

　　b、window.scrollBy()：按照指定的像素值来滚动内容。

2.、history对象 （常用） ：https://blog.csdn.net/u012028371/article/details/67636395 或 https://developer.mozilla.org/zh-CN/docs/Web/API/History_API（推荐） 或 https://www.cnblogs.com/accordion/p/5699372.html（有实践案例）

　　 history对象保存着从窗口被打开起的历史记录，每个浏览器窗口、标签页、框架都有自己的history对象。

　　history的使用  http://www.cnblogs.com/yy95/p/5678961.html  （有时间研究下）

　　用history api"偷换"浏览器历史记录   ：   http://justcoding.iteye.com/blog/2219339

　　a、pushState(stateObject, title, url) ：三个参数，pushState函数向浏览器的 url堆栈 压入一个设定值的 url 记录，并改变 url堆栈的当前指针至栈顶。（亲测，这个url必须和当前URL在同一个域，感觉是为hybrid-App开发的）

　　　  url 的值有多种用法：

　　　　　　1、""   【添加一个当前的url进去】、
　　　　　　2、"?data=1"  【拼接在之前url后面】
　　　　　　3、"https://www.cnblogs.com/?data=1"  【添加的就是这个url】
　　　　　　4、"data/1"   【替换url最后一个目录的值】
　　　　　　5、"/data/1"  【替换url根下的所有值】
　　　　　　6、"data=1"   【替换url最后一个目录的值】等等

　　　  history.pushState 给 url堆栈 添加的的url，只是一个url标志，占一个位置,并没有真实请求这个地址的文件。手动刷新下页面，就会真实发起请求。所以一般的都是添加一个当前 url+string

　　b、replaceState()：和 pushState是一样的用法，replaceState是替换浏览器历史堆栈的当前历史记录为设定的ur。

　　c、onpopstate事件触发（该事件是window的属性）：在不改变document的前提下，一旦当前指针改变则会触发onpopstate事件。（跳转到其他的html文档不会触发这个事件）

　　　  document文档不变（即html文件不变），只有两种情况，地址栏url变化，而html文档不变。第一种是，单页面的跳转，文档是不变的；第二种是，history.pushState创建的url地址，前进回退，页面html文档不变。

　　　　onpopstate触发条件：点击后退或前进按钮(或者在JavaScript中调用history.back()或history.go()方法)时触发。       http://www.mamicode.com/info-detail-1331288.html

　　　　注意：在 history 中插入新的url是不会触发这个事件的，即页面中正常的链接跳转是不会触发这个事件的。

　　d、history.state：获取当前状态

　  案例说明：history.pushState 的功能，在 hybrid-App 中就很有用（所有 点击回退按钮，而不希望页面跳转，只是执行某个程序的功能，都会用到history.pushStat。因为，点击回退按钮，url是一定会后退的）。

• 需求描述：H5中调用 原生的 app 分享功能，底部弹出原生分享组件。这个时候如果点击回退按钮，H5页面肯定会退回到上一个页面，但是我们实际需求是页面不变，分享组件退出去。
• 实现原理：点击回退按钮，H5页面回退到上一个页面肯定是改不了的。但是我们可以通过history.pushState，给url堆栈中加一个url，但是页面又不变。这个时候url堆栈回退了，H5页面并没有刷新动作。

3.、location对象  （常用）：既是window对象的属性，同时也是document对象的属性

　　location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;它既是window对象的属性，同时也是document对象的属性.

　　a、location.href 跳转页面 会刷新页面，所以单页面之间的跳转，不要使用 location.href 来实现，功能上虽然是实现了。但是会有bug(用户体验的问题)，当页面刷新时，vue实例都会被重新加载，页面跳转会出现闪烁。

主要属性有：

4.、navigator对象 

　　 navigator对象用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.

5.、screen对象  

　　screen对象用来表明客户端显示器的能力。 包括浏览器窗口外部的显示器的信息，如像素宽度和高度等，每个浏览器中的screen对象都包含着各不相同的属性。

6.、document对象  

　　document对象既是BOM顶级对象的一个属性，更是DOM模型中的顶级对象，在DOM中一起总结。

---

总结：

1、location.href 和 history.pushState 对浏览器 url 堆栈的操作：（这里url堆栈就是，保存 浏览器历史记录的一些信息，即地址栏上url每次的改变都反馈到 url堆栈中）

　　　　a、location 和 history对象都有 操作 浏览器 url堆栈 的API接口。（如，location.href 、history.pushStat 等）

　　　　b、window.location.href=newUrl和window.history.pushState(obj，" ",newUrl)之间有什么区别：

　　　　　　相同点：他们都会使  浏览器向 url堆栈 中 push newURl，url地址变成newURl。

　　　　　　不同点：location.href 操作后，使用新的url向服务器发送请求刷新页面；而

　　　　　　　　　　history.pushState 不会去请求，也不会刷新页面。

　　　　    但是，history.pushState不允许跨域使用。location.href 跳转到当前url上，刷新页面，浏览器不会向url堆栈中push newURl，而history.pushState会把这个url压入url堆栈中。

　　　　　比如：

　　个人理解：随着技术的发展（SPA和Hybrid的广泛使用），在location对象下的历史记录功能不够用，于是创建一个history对象，和历史记录相关的属性方法在这个对象里面（history对象操作url必须是tongyu，感觉就是为单页面应用开发的功能）。

　　　　　　  location对象的历史记录更多的是这个窗口的一个历史记录，所以 location.href 可以跳转 任意的地址。

　　　　　　   location对象的历史记录和history对象是两个东西，他们各管个的。只是两个对象都有操作 url 堆栈 的API（location.href，history.pushState）。

2、（个人理解，只是猜测的一个模型，至于底层具体怎么实现的，这是浏览器工程师考虑的问题，我们不需要去深究）可以想象 url堆栈 是一个二维数组 形式的 储存对象。比如：

pushState = [pushState1,pushState2]   // history.pushState 生成的 url地址。url指针 指向 pushState 时，刷新一次浏览器，之后url指针 在pushState内变化时，就不去刷新页面了
urls = [url0,url1,pushState,url3,url4,url5]  // 浏览器当前url指针在外层数组中变化会刷新浏览器，在内层数组中数组中变化不会刷新页面。

　　基于这种模型就很好理解 location.href 和 history.pushState的差别了，前一个是操作外层数组；后一个是操作内层数组。