window.location / window.history / 以及相关事件
先看看这两个单词的中文翻译：
- location ：地方; 地点; 位置; 外景拍摄地; 定位
- history ：历史; 发展史，历史; 历史课; 历史学
看翻译，大致就能了解这两个对象的作用。
window.location 对象所包含的属性和方法
(翻译：窗口的地址）
| 属性 | 描述 |
|---|---|
| hash | 锚信息，URL的#号后面的内容，即可以读也可以写，写了锚信息是不会刷新页面。 |
| host | 主机名和当前 URL 的端口号 |
| hostname | 当前 URL 的主机名 |
| href | 完整的 URL |
| pathname | 当前 URL 的路径部分 |
| port | 当前 URL 的端口号 |
| protocol | 当前 URL 的协议 |
| search | 查询信息，从URL的 ?号与 #号之间的内容 比如：xxx?user=123&password=123 |
| 方法 | 描述 |
|---|---|
| reload() | 重新加载，刷新页面 |
window.history 对象
对象包含浏览器的历史。
方法：
- history.back() // 与在浏览器点击后退按钮相同，方法加载历史列表中的前一个 URL。
- history.forward() // 与在浏览器中点击向前按钮相同，方法加载历史列表中的下一个 URL。
- history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面，history.go(-1) 表示后退一个页面，history.go(0) 表示刷新页面。
- pushState(stateData, title, url)：在history中创建一个新的访问记录，不能跨域，且不造成页面刷新;
- replaceState(stateData, title, url)：修改当前的访问记录，不能跨域，且不造成页面刷新;
属性：
length、state
另，HTML5新增了可以监听 history 和 hash 访问变化的全局方法：
- window.onpopstate：当调用history.go()、history.back()、history.forward()时触发，pushState() \ replaceState() 方法不触发。
- window.onhashchange：当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发。
