JS Web-API-BOM

2. JS Web-API-BOM

 

2.1 面试题

如何识别浏览器的类型
分析拆解 url 各个部分

 

2.2 navigator

window.navigator 对象包含有关访问者浏览器的信息。

 
1.常用的一些属性

console.log(`浏览器代号：${navigator.appCodeName}`);
console.log(`浏览器名称：${navigator.appName}`);
console.log(`浏览器版本：${navigator.appVersion}`);
console.log(`启用Cookies：${navigator.cookieEnabled}`);
console.log(`硬件平台：${navigator.platform}`);
console.log(`用户代理：${navigator.userAgent}`);
console.log(`用户代理语言：${navigator.language}`);

 
2.浏览器检测
 
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
一些浏览器对测试站点会识别错误
浏览器无法报告晚于浏览器发布的新操作系统
 

使用对象来检测浏览器，用下面代码举个例子

if (window.chrome) {
  console.log('isChrome');
} else if (window.opera) {
  console.log('isOpera');
} else {
  console.log('other');
}

 

2.3 screen

window.screen 对象包含有关用户屏幕的信息。
 

1.常用的一些属性

// 属性返回访问者屏幕的高度和宽度，以像素计，减去界面特性，比如窗口任务栏。
console.log(screen.availHeight);
console.log(screen.availWidth);
 // 属性返回访问者整块屏幕的高度和宽度
console.log(screen.height);
console.log(screen.width);

 

2.4 location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
 

1.常用的一些属性

// 假设当前 url = http://example.com:1234/test.html#part2
// 常用对象属性
// 1.设置或返回从井号 (#) 开始的 URL（锚）。
console.log(location.hash); // #part2
// 2.设置或返回主机名和当前 URL 的端口号。
console.log(location.host); // example.com:1234
// 3.设置或返回当前 URL 的主机名。
console.log(location.hostname); // example.com
// 4.设置或返回完整的 URL。
console.log(location.href); // http://example.com:1234/test.html#part2
// 5.设置或返回当前 URL 的路径部分。
console.log(location.pathname); // /test.html
// 6.设置或返回当前 URL 的端口号。
console.log(location.port); // 1234
// 7.设置或返回当前 URL 的协议。
console.log(location.protocol); // http:
// 8.设置或返回从问号 (?) 开始的 URL（查询部分）。
// 假设url = http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
console.log(location.search); // ?f=hdom_loc_search

 

2.常用的一些方法
 

assign() 方法可加载一个新的文档。

window.location.assign("http://www.w3school.com.cn")

 
reload() 方法用于重新加载当前文档。

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

// 不传参
window.location.reload()
// 传参
window.location.reload(true)

 
replace() 方法可用一个新文档取代当前文档。

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

window.location.replace("http://www.w3school.com.cn")

 

2.5 history

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

1.常用的一些属性

// 返回浏览器历史列表中的 URL 数量。
console.log(window.history.length)

2.常用的一些方法
 
history.back()：

back() 方法可加载历史列表中的前一个 URL（如果存在）。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
 

history.forward()：

forward() 方法可加载历史列表中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
 

history.go(number | URL)：

URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
例如：window.history.go(-1)