Fe-15 BOM

BOM(browser object model) 是什么 有什么用
HTML5 新增的 BOM API 和新功能
单页应用(SPA(single page application))

15-1

BOM(browser object model) 包含5个东西
location 管理 URL
navigator 管理浏览器
history 管理历史记录
screen 管理屏幕
window 管理浏览器所有的东西

• location 对象是用来管理 URL 的, 下面是例子
  改变 href 属性就可以跳转页面

hash: ""
host: "s.taobao.com"
hostname: "s.taobao.com"
href: "https://s.taobao.com/search?q=3ds&imgfile=&js=1&stats_click=search_radio_all&ie=utf8"
search: "?q=3ds&imgfile=&js=1&stats_click=search_radio_all&ie=utf8"
origin: "https://s.taobao.com"
pathname: "/search"
port: ""
protocol: "https:"

reload: 函数, 刷新当前页面
replace: 函数, 替换当前页面, 有参数

• avigator 对象是用来查询浏览器的信息的
  比如当前的操作系统平台, 浏览器型号厂商等等
  例如

navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.71 Safari/537.36"
navigator.platform
"MacIntel"

• history 对象是用来处理历史纪录的
  在 HTML5 它增加了一些 API 使得它也可以做单页应用(SPA, single page app)

history.length      // 历史列表中的 url 数量

history.back()      // 相当于点击后退按钮
history.forward()   // 相当于点前进
history.go(-2)      // 相当于点击两次后退按钮

• 下面是 HTML5 新函数

history.pushState(null, 'title', "/profile")

• 三个参数分别是
  自定义对象
  新页面的标题, 但是现在还没有浏览器实现这个功能
  新页面的地址

var state = {
    page: "settings"
}
history.pushState(state, "settings", "/settings")

用户点击 前进 后退 按钮的时候, 会触发 window 的 popstate 事件
于是可以在这里操作

window.addEventListener("popstate", function(e) {
    var state = e.state;
    // state 就是 pushState 的第一个参数
    console.log('pop state', state)
})

还有一个 replaceState 函数, 它的作用和 pushState 一样, 只是不生成一条历史纪录

• 其他
  只能在相同域名下
  可以使用 queryString
  主要作用是来做 SPA

SPA todo