Bom

浏览器对象模型

navigator

Navigator 对象包含有关浏览器的信息。

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。可用来判断浏览器内核
userLanguage	返回 OS 的自然语言设置。

navigator.hardwareConcurrency // 检测当前电脑cpu是多少核,可配合webworker工作

Location

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

[http://127.0.0.1:8081/basic/027navigator.html?id=3#location]

属性	描述	-
hash	设置或返回从井号 (#) 开始的 URL（锚）。	#navigator
host	设置或返回主机名和当前 URL 的端口号。	127.0.0.1:8081
hostname	设置或返回当前 URL 的主机名。	127.0.0.1
href	设置或返回完整的 URL。	http://127.0.0.1:8081/basic/027navigator.html?id=3#location
origin	返回一个URL的协议，主机名和端口号	http://127.0.0.1:8081
pathname	设置或返回当前 URL 的路径部分。	/basic/027navigator.html
port	设置或返回当前 URL 的端口号。	8081
protocol	设置或返回当前 URL 的协议。	http:
search	设置或返回从问号 (?) 开始的 URL（查询部分）。	?id=3

// 例如当前网址是 https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.href) // https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.protocol) // https:
console.log(location.pathname) // /timeline/frontend
console.log(location.search) // ?a=10&b=10
console.log(location.hash) // #some 

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

location.reload(true),Firefox 对于该方法支持一个非标准的 forceGet boolean 参数 ，当值为 true 时，将强制 Firefox 从服务器加载页面资源。但是在其他浏览器中任何参数都是无效的，location.reload() 执行时将会忽略它们并且不会有任何效果。

URLSearchParams匹配参数方法

var url = new URL('https://example.com?foo=1&bar=2');

// Retrieve params via url.search, passed into ctor
var params = new URLSearchParams(url.search);

console.log(params)//URLSearchParams {}
console.log(params.get('bar'))// 2
for(let i of params){
	console.log(i)
	//['foo', '1']
	//['bar', '2']
}

History

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

属性	描述
length	返回浏览器历史列表中的 URL 数量。

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	可加载历史列表中的某个具体的页面。

go() 方法。

history.go(number)

该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。

MDN中go不支持url，测试了也没支持url

popstate事件

当活动历史记录条目更改时，将触发popstate事件。 如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用 history.back()或者history.forward()方法 ）

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

history.replaceState【H5】

history.replaceState(stateObj, title[, url]);

replaceState()方法使用state objects, title,和 URL 作为参数， 修改当前历史记录实体，如果想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

history.pushState()【H5】

向当前浏览器会话的历史堆栈中添加一个状态（state）

history.pushState(state, title[, url])

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

刷新页面的方法

• history.go(0)
• location.reload()
• location=location
• location.assign(location)
• location.replace(location)
• location.href='https://www.baidu.com'
• window.open("https://baidu.com","_self")

参考 (opens new window)