Bom API 和 SAP

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: 函数, 替换当前页面, 有参数



navigator 对象是用来查询浏览器的信息的
比如当前的操作系统平台, 浏览器型号厂商等等
例如
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
猜你喜欢
