回顾 Browser对象

一、Navigator 对象

• Navigator 接口表示用户代理的状态和标识。 它允许脚本查询它和注册自己进行一些活动。 可以使用只读的window.navigator 属性检索navigator对象。
• 不从NavigatorID, NavigatorLanguage, NavigatorOnLine,
  NavigatorGeolocation, NavigatorPlugins, NavigatorUserMedia, 和
  NetworkInformation 中继承任何属性，但是实现了定义在这些对象中属性

navigator

只读属性 Window.navigator 会返回一个 Navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。

var sBrowser, sUsrAg = navigator.userAgent;

// The order matters here, and this may report false positives for unlisted browsers.

if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
  sBrowser = "Opera";
  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
  sBrowser = "Microsoft Internet Explorer";
  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
  sBrowser = "Microsoft Edge";
  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome or Chromium";
  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
  sBrowser = "unknown";
}

alert("当前浏览器为: " + sBrowser);

1、 NavigatorID

NavigatorID 接口包含浏览器识别相关的方法和属性。没有一个 NavigatorID 类型的对象，他是其他接口，如
Navigator 或 WorkerNavigator 实现了该接口。

（1）NavigatorID.appCodeName 返回所使用浏览器的内部名称.Mozilla, Netscape 6, 和 IE5 的内部名称都是 “Mozilla”.
（2）NavigatorID.appName返回所使用浏览器的名称。由于兼容性问题，HTML5 规范允许该属性返回 “Netscape” 。
（3）NavigatorID.platform返回一个字符串,表示浏览器所在的系统平台类型.
（4）NavigatorID.product该属性返回当前浏览器的产品名称。
在基于 Gecko 的浏览器中，product 为完整的用户代理（user agent）字符串中紧跟着平台（platform）后的部分。例如，在 Netscape 6.1 的用户代理中，product 是 “Gecko”，完整的代理字符串是：Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1。
在基于 WebKit 的浏览器中，product 仍然返回 “Gecko”，即使完整用户代理字符串中平台（platform）后紧跟着：(KHTML, like Gecko)。
（5）NavigatorID.userAgent只读属性返回当前浏览器的 user agent 字符串。

2、NavigatorLanguage

包含涉及导航（Navigator）的语言特性的方法和属性。
其实 NavigatorLanguage 这个对象并不存在，但是，一些其它的接口，如 Navigator 或 WorkerNavigator，实现了它。

NavigatorLanguage.language

只读属性返回一个表示用户偏好语言的字符串，通常指浏览器 UI 的语言。

let lang = navigator.language;

一个 DOMString。lang 存储一个表示语言版本（在 BCP 47 中定义）的字符串。合法的语言版本有 “zh-CN”、“en”、“en-US”、“fr”、“es-ES” 等。

注意 macOS 和 iOS 平台上的 Safari（10.2 之前版本），国家代码为小写：“zh-cn”、“en-us”、“fr-fr” 等。

if ( window.navigator.language != 'zh-CN' ) {       
  doLangSelect(window.navigator.language); 
}

3、NavigatorOnLine

接口包含了与浏览器网络连接状态相关的方法和属性。
不存在NavigatorOnLine类型的对象，但是存在其他的接口，比如 Navigator 或者 WorkerNavigator，可以实现它。

返回浏览器的联网状态。正常联网（在线）返回 true，不正常联网（离线）返回 false。一旦浏览器的联网状态发生改变，该属性值也会随之变化。当用户点击链接或者脚本进行网络请求时，如果发现浏览器连接不上互联网，则该属性会被赋值为false。

online = window.navigator.onLine;

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

要查看网络状态的变化，请使用 addEventListener 侦听 window.online 和 window.offline 事件，如以下示例所示：

window.addEventListener("offline", function(e) {alert("offline");})

window.addEventListener("online", function(e) {alert("online");})

二、Screen

接口表示一个屏幕窗口，往往指的是当前正在被渲染的window对象，可以使用 window.screen 获取它。

screen.availHeight

返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。

iAvail = window.screen.availHeight

screen.availLeft

返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离。

setY = window.screen.height - window.screen.availTop;
setX = window.screen.width - window.screen.availLeft;
window.moveTo(setX, setY);

screen.availWidth

返回浏览器窗口可占用的水平宽度（单位：像素）。

var screenAvailWidth = window.screen.availWidth;

console.log(screenAvailWidth);

三、History

DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问(不要与 WebExtensions history搞混了)。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从HTML5开始——提供了对history栈中内容的操作

向前和向后跳转

window.history.back();
window.history.forward();

跳转到 history 中指定的一个点

跳转到 history 中指定的一个点
你可以用 go() 方法载入到会话历史中的某一特定页面， 通过与当前页面相对位置来标志 (当前页面的相对位置标志为0).

window.history.go(-1);

您可以通过查看长度属性的值来确定的历史堆栈中页面的数量:

let numberOfEntries = window.history.length

1、pushState() 方法

pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.注意 pushState() 绝对不会触发 hashchange 事件，即使新的URL与旧的URL仅哈希不同也是如此。

2、replaceState() 方法

history.replaceState() 的使用与 history.pushState() 非常相似，区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。

let stateObj = {
    foo: "bar",
};

history.replaceState(stateObj, "page 3", "bar2.html");

popstate 事件

每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象。如果当前活动的历史记录项是被 pushState 创建的，或者是由 replaceState 改变的，那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。

 // 尝试通过 pushState 创建历史条目,然后再刷新页面查看state状态对象变化;
  window.addEventListener('load',() => {
    let currentState = history.state;
    console.log('currentState',currentState);
  }) 

四、Location

接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。
Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性。

Location.assign()

方法会触发窗口加载并显示指定的URL的内容。

// 跳转到 Location.reload() 这篇文章
	document.location.assign('https://baidu.com');

Location.reload()

方法用来刷新当前页面。该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可能从缓存中读取页面。

// 无缓存刷新页面（但页面引用的资源还是可能使用缓存，
// 大多数浏览器可以通过设置在打开开发者工具时禁用缓存实现无缓存需求）
window.location.reload(true);

Location.replace()

方法以给定的URL来替换当前的资源。 与assign() 方法 不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中（session History），这样，用户点击回退按钮时，将不会再跳转到该页面。

// Navigate to the Location.reload article by replacing this page
document.location.replace('https://baidu.com');

hash

接口的 hash 属性返回一个 USVString，其中会包含URL标识中的 ‘#’ 和 后面URL片段标识符。

<a id="myAnchor" href="/en-US/docs/Location.href#Examples">Examples</a>
<script>
  var anchor = document.getElementById("myAnchor");
  console.log(anchor.hash); // 返回'#Examples'
</script>