chrome学习笔记

# 一.全局对象

# 1.window 对象

# 1.1 Window 对象的属性

属性 含义 案例
applicationCache(只读) 返回该 window 中的应用缓存对象的一个引用 -
caches(只读) 返回了与当前上下文紧密相关的 CacheStorage 对象 -
close（只读） 指示引用窗口关闭或没有
console window.console 提供了向浏览器控制台输出日志信息的方法（log、info、warn、error 等）
crypto window.crypto 只读属性返回与全局对象关联的 Crypto 对象。此对象允许网页访问某些加密相关服务
customElements 返回一个 CustomElementRegistry 对象的引用，可以用于注册一个新的 custom elements,并且可以用于获取之前定义 过的自定义元素的信息。
devicePixelRatio 此属性返回当前显示设备的物理像素分辨率与 CSS 像素分辨率的壁纸
document 指向当前窗口内的文档节点
frameElement 返回嵌入当前 window 对象的元素（比如<iframe>或者<object>），如果当前 window 对象已经是顶层窗口，则返回 null。
frames 返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。
fullScreen 这个属性表明了窗口是否处于全屏模式下。f11 全屏切换。
history(只读) 用来获取 History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。
indexDB（只读） indexDB 是 window 的一个只读属性，它集成了为应用程序提供异步访问索引数据库的功能的机制。
innerHeight（只读） 浏览器窗口的视口(viewport)高度（以像素为单位），如果存在滚动条，则包括它。
innerWidth(只读) 浏览器视口（viewport）宽度（单位：像素）,如果存在滚动条则包括它。
length(只读) 返回当前窗口中包含的框架数量（框架包含 frame 和 iframe 两种元素）
localStorage 只读的 localStorage 允许你访问一个 Document 的远端（origin）对象 Storage。数据存储为跨浏览器会话。
location(只读) 返回一个 Location 对象，其中包含有关文档当前位置的信息。
locationbar 返回一个可以检查 visibility 属性的 locationbar 对象
menubar 返回一个可以检测 visibility 属性的 menubar 对象。
name 获取/设置窗口的名称。
navigator 返回一个 Navigator 对象的引用，可以用它来查询一些关于运行当前脚本的应用程序的相关信息。
onabort 一个处理发送到 Window 中断事件的事件处理。
onbeforeprint 打印之前的处理函数。
onafterprint 打印之后的处理函数。
onanimationcancel 这是一个事件处理操作，这个事件在 CSS Animation 属性意外中断时派发出来。
onanimationend 当 CSS 动画到达其活动的结束时发送此事件。
onanimationiteration 当动画迭代时触发。
onappinstalled Window 对象的 onappinstalled 属性用于处理 appinstalled 事件处理程序。PWA 成功安装时被触发一次。
onbeforeunload 当窗口即将被卸载（关闭）时，会触发事件。此时页面文档依然可见，且该事件的默认动作可以被取消。
onclose 当在 Window 对象触发 close 事件时的事件处理器。
oncontextmenu 获取或设置当前窗口 Contextmenu 事件的事件处理函数。除非默认行为已经阻止了，否则右键菜单会被激活。
ondevicelight 事件在设备的光传感器检测到周围环境光的强度发生变化时触发。
ondevicemotion 设备移动时触发
ondeviceorientation 设备方向改变时触发。
ondeviceproximity 接近或远离设备时触发。
onerror 加载一个全局 error 事件处理函数可用于自动收集错误报告。
ongamepadconnected 手柄连接时触发。
ongamepaddisconnected 手柄断开时触发。
onhashchange 当一个窗口的哈希改变时就会触发 hashchange 事件（查看 location.hash）
onlanguagechange 这样的事件在浏览器通知更佳的语言列表已被更新后被触发。
onloadstart 在 onload 之前触发。
onload 当资源已加载时被触发。
onloadend onloadend 属性表示当代码被调用时优先级提高，资源的加载事件触发时调用处理函数。
onunload 当页面关闭后，会触发 unload 事件。
onmessage onmessage 属性是当对象接收到 message 事件时调用。
onmessageerror 一个 messageerror 事件发送给 window
onpopstate Window.onpopstate 是 popstate 事件在 Window 对象上的事件处理程序。
onrejectionhandled Promise 拒绝时触发。
onreset 表单重置
onresize 可以用来获取或设置当前窗口的 resize 事件的事件处理函数。
onselect onselect 用来获取或设置当前窗口的 select 事件的事件处理函数。
onstorage 当存储域发生改变时会触发事件。
opener 如果当前窗口是由另一个窗口打开的，Window.opener 保留了那个窗口的引用，如果当前窗口不是由其他窗口打开的，则该属性返回 null。
origin(只读) 返回全局范围的 origin，序列化为一个字符串。域的概念。
outerHeight(只读) 为窗口的外层的高度（包括导航栏+状态栏等）。
outerWidth 是窗口的外层宽度。
parent 返回当前窗口的父窗口对象。如歌一个窗口没有父窗口，则它的 parent 属性为自身的引用。
performance Web Performance API 允许网页访问某些函数来测量网页和 Web 应用程序的性能，包括 Navigation TimingAPI 和高分辨率时间数据。
screen 返回当前 window 的 screen 对象。screen 对象实现了 Screen 接口，它是个特殊的对象，返回当前渲染窗口中和屏幕有关的属性。
screenX 返回浏览器左边界到操作系统桌面左边界的水平距离。
screenY 返回浏览器顶部距离系统桌面顶部的垂直距离。
scrollbars 返回滚动条对象，可以检查其可见性。
scrollMaxX 返回水平最大可以 scroll 的长度，单位像素。
scrollMaxY 返回垂直最大可以 scroll 的长度，单位像素。
scrollX 返回文档/页面水平方向滚动的像素值。
scrollY 返回文档/页面垂直方向滚动的像素值。
self 返回一个指向当前 window 对象的引用。
sessionStorage 其属性允许你访问一个 session Storage 对象。
status 设置浏览器底部状态栏的文本。
statusbar 返回一个 statusbar 对象。
toolbar 返回一个 toolbar 对象。
top 返回窗口体系中的最顶层窗口的引用。
URL window.URL 属性返回一个对象，它提供了用于创建和管理对象 URLs 的静态方法。
visualViewport 返回视觉窗口对象。
PushManager 提供接收服务器及请求 url 的推送功能的一些方法。PWA 推功能。
window window 对象的 window 属性指向这个 window 对象本省。

# 1.2 window 对象的方法

属性 含义 案例
alert(message) 浏览器自带的警告对话框。
btoa(str) 从 String 对象中创建一个 base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。
atob(code) 对用 base-64 编码过的字符串进行解码。
blur() 将焦点移出顶层窗口。
requestAnimationFrame(callback) 告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。
cancelAnimationFrame(requestID) 取消一个先前通过调用 window.requestAnimationFrame()方法添加到计划中的动画帧请求。
requestIdleCallback(callback[,options]) 会在浏览器空闲时期依次调用函数，这就可以让开发者在主事件循环中执行后台或低优先级的任务，而且不会对像动画和用户交互这样延迟触发而且关键的事件产生影响。
cancelIdleCallback(handle) 用于取消之前调用 window.requestIdleCallback 的回调。
setImmediate(func) 该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。
clearImmediate(immediateID) 此方法用来清除 setImmediate。
setInterval(callback,delay) 重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
clearInterval(intervalID) 取消用 setInterval 设置的重复定时任务。
setTimeout(code[,delay]) delay 时间之后执行 code，code 可为 string 或 function
clearTimeout(timeoutId) 清除由 window.setTimeout()设置的延时定时器
close() 关闭当前窗口。
confirm(message) window.confirm()方法显示一个具有一个可选消息和两个按钮（确定和取消）的模态对话框。
event IE 专用，表示正在处理的事件对象。
fetch(input[,init]) 用于发起获取资源的请求。它返回一个 Promise 对象。
focus() 将窗口显示在前（靠近屏幕）。
getComputedStyle(element,[pseudoElt]) 给出应用活动样式表后的元素的所有 CSS 属性的值，并解析这些值可能包含的任何基本计算。
getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
matchMedia(mediaQueryString) 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
minimize() 窗口最小化。
moveBy(deltaX,deltaY) 根据指定的值，移动当前窗口。
movueTo(x,y) 将当前窗口移动到指定的坐标位置。
open(strUrl,windowName,[strWindowFeatures]) 根据指定的参数，将一个资源加载到一个新的浏览上下文（如一个窗口）或一个已经存在的浏览上下文中。
postMessage(message,targetOrigin,[transfer]) 可以安全地实现跨源通信。
print() 打开打印对话框打印当前文档。
prompt(text,value) 显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字。
resizeBy(xDelta,yDelta) 调整窗口大小。
resizeTo(aWidth,aHeight) 动态调整窗口的大小。
scroll(x-coord,y-coord) 滚动窗口至文档中的特定位置。
scrollBy(x,y) 在窗口中按指定的距离滚动文档。
scrollByLines(num) 按给定的行数滚动文档。
scrollByPages(pages) 在当前文档页面按照指定的页数翻页。
scrollTo(x-coord,y-coord) 滚动到文档中的某个坐标。
stop() 此方法用于阻止页面资源加载。

# 1.3 全局作用域

由于 window 对象同时扮演着 ECMAScript 中 Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

抛开全局变量会成为 window 对象的属性不谈，定义全局变量与在 window 对象上直接定义属性还是有一点差别：全局变量不能通过 delete 操作符删除，而直接在 window 对象上定义的属性可以。

这是因为，通过var语句添加的 window 属性有一个名为[[Configurable]]的特征，这个特征的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。

# 2.Location 对象

# 2.1 location.assign()

location.assign("http:baidu.com")
1

使用assign()方法并为其传递一个 URL，可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将location.href或window.location设置为一个 URL 值，相当于调用assign()方法。

window.location = "http://baidu.com"
location.href = "http://baidu.com"
1
2

修改location对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、hostname、pathname和port属性设置为新值来改变 URL。

// 假设初始 URL 为 http://github.com/about/
location.href = "http://github.com/about/"

// 将 URL 修改为 "http://github.com/about/#ds-thread"
location.hash = "#ds-thread"

// 将 URL 修改为 "http://github.com/about/?search=123"
location.search = "?search=123"

// 将 URL 修改为 "https://gist.github.com/"
location.hostname = "gist.github.com"

// 将 URL 修改为 "https://gist.github.com/u/10086"
location.pathname = "u/stone0090"

// 将 URL 修改为 "https://gist.github.com:8080/"
location.port = 8080
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

当通过上述任何一种方式修改URL之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击后退按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。

# 2.2 location.replace()

location.replace()方法接收一个参数即要导航到的URL，结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录（只有 chrome 下有效）

location.replace("http://baidu.com")
1

# 2.3 location.reload()

reload方法用于重新加载当前显示的页面。如果调用reload()方法时不传递任何参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器加载，则需要传递参数true。

位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素，为此，最好将reload()放在代码的最后一行。

// 重新加载（有可能从缓存中加载）
location.reload()

// 重新加载（从服务器重新加载）
location.reload(true)
1
2
3
4
5

千万不要在页面中直接使用location.reload()方法，此方法会造成页面的无限刷线。因为页面刚加载完成，遇到该方法，则重新加载页面，又遇到该方法，则又加载页面，从而造成页面的无限刷新。

# 2.4 location 对象的属性

location对象提供了与当前窗口加载的文档有关的信息，还提供了一些导航功能。

实际上，location对象是很特别的一个对象，因为它既是window对象的属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。

属性名 例子 描述
href https://www.baidu.com 返回当前加载页面的完整 URL。而 location 对象的 toString() 方法也返回这个值。
protocol "https:" 返回页面使用的协议。
host www.baidu.com:8080 返回服务器名称和端口号（如果有）。
hostname "www.baidu.com" 返回不带端口号的服务器名称。
port "8080" 返回 URL 中指定的端口号。如果 URL 中不包含端口号，则这个属性返回空字符串。
pathname "/src" 返回 URL 中的目录和（或）文件名（/以斜杆开头）
search "?js=javascript" 返回 URL 的查询字符串（? 以问号开头）
hash "#contents" 返回 URL 中的 hash，如果 URL 中不包含散列，则返回空字符串（# 以井号开头跟零或多个字符串）
origin "https://www.baidu.com" 页面来源的域名的标准形式

⚠️ 注意：如果 URL 中 ? 之前有一个 #，比如 #text?q=test，那么， location.search 得到的就是空字符串，因为 location.search只取 ? 后面和 # 前面的内容。

# 2.5 查询字符串参数

/*
 * 这个函数用来解析来自URL的查询串中的name=value参数对
 * 它将name=value对存储在一个对象的属性中，并返回该对象
 * 这样来使用它
 *
 * var args = urlArgs(); // 从URL中解析参数
 * var q = args.q || ""; // 如果参数定义了的话就使用参数；否则使用一个默认值
 * var n = args.n ? parseInt(args.n) : 10;
 */

function urlArgs() {
  // 定义一个空对象
  var args = {}

  // 查找到查询串，并去掉问号
  var query = location.search.substring(1)

  // 根据 & 符号将查询字符串分隔开
  var pairs = query.split("&")

  for (let i = 0; i < pairs.length; i++) {
    // 查找"name=value"
    const pos = pairs[i].indexOf("=")
    // 如果没有找到的话，就跳过
    if (pos == -1) continue
    // 提取name
    const name = pairs[i].substring(0, pos)
    // 提取value
    let value = pairs[i].substring(pos + 1)
    // 对value进行解码
    value = decodeURIComponent(value)
    // 存储为属性
    args[name] = value
  }
  return args
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 3.History 对象

# 3.1 history.go

使用  history.go  方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。

  • 负数表示向后跳转（类似于单击浏览器的 后退 按钮）
  • 正数表示向前跳转（类似于单击浏览器的 前进 按钮）
// 前进一页
history.go(1)

// 前进两页
history.go(2)

// 后退一页
history.go(-1)
1
2
3
4
5
6
7
8

也可以给  go  方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做。

// 跳转到最近的 github.com 页面
history.go("github.com")
1
2

当history.go() 方法无参数时，相当于 history.go(0)，可以刷新当前页面

// 刷新当前页面
history.go()

// 刷新当前页面
history.go(0)
1
2
3
4
5

# 3.2 history.back

history.back() 方法用于模仿浏览器的后退按钮，相当于 history.go(-1)

// 下面两种写法效果一致
history.back()
history.go(-1)
1
2
3

# 3.3 history.forward

forward() 方法用于模仿浏览器的前进按钮，相当于 history.go(1)

// 后退一页
history.back()
// 前进一页
history.forward()
1
2
3
4

如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败 。

使用历史记录时，页面通常从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。

# 3.4 history.pushState

向当前浏览记录栈中添加一条新的历史记录，添加后页面不会重新加载。

history.pushState(state, title, url)
1
  • state：用于存储该 URL 对应的状态对象。该对象可通过 history.state 或 popstate 事件回调中的 event 对象获取。如果不需要这个对象，此处可以填 null。
  • title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填 null。
  • url：URL 地址，不允许跨域。这个参数可选，如果它没有被特别标注，会被设置为文档的当前 URL。

history.pushState 函数向浏览器的历史堆栈压入一个 URL 为设定值的记录，并改变历史堆栈的当前指针至栈顶。

调用 pushState() 方法将新生成一条历史记录，方便用浏览器的 后退 和 前进 来导航（后退 可是相当常用的按钮）。

另外，从 URL 的同源策略可以看出，HTML5 History API 的出发点是很明确的，就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态。

将 url 设为锚点值时不会触发 onhashchange

根据 同源策略，如果设置不同域名地址，会报错，这样做的目的是：防止用户以为它们是同一个网站，若没有此限制，将很容易进行 XSS 、 CSRF 等攻击方式

# 3.5 history.replaceState()

它和 history.pushState() 方法基本相同，区别只有一点，history.replaceState() 不会新生成历史记录，而是将当前历史记录替换掉，常用于落地页。

history.replaceState(state, title, url)
1

# 3.6 window.onpopstate

push 的对立就是 pop，可以猜到这个事件是在浏览器取出历史记录并加载时触发的。但实际上，它的条件是比较苛刻的，几乎只有 点击浏览器的“前进”、“后退”这些导航按钮，或者是由 JavaScript 调用的 history.back() 等导航方法，且 切换前后的两条历史记录都属于同一个网页文档，才会触发本事件，因为这些操作有一个共性，即修改了历史堆栈的当前指针。

上面的 同一个网页文档 请理解为 JavaScript 环境的 document 是同一个，而不是指基础 URL（去掉各类参数的）相同。也就是说，只要有重新加载发生（无论是跳转到一个新站点还是继续在本站点），JavaScript 全局环境发生了变化，popstate 事件都不会触发。

popstate 事件是设计出来和前面的 2 个方法搭配使用的。一般只有在通过前面 2 个方法设置了同一站点的多条历史记录，并在其之间导航（前进或后退）时，才会触发这个事件。同时，前面 2 个方法所设置的状态对象（第 1 个参数），也会在这个时候通过事件的 event.state 返还回来。

此外请注意，history.pushState() 及 history.replaceState() 本身调用时是不触发 popstate 事件的。

window.onpopstate = function (event) {
  alert(
    "location: " + document.location + ", state: " + JSON.stringify(event.state)
  )
}
1
2
3
4
5

# 3.7 History 属性

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window 对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。不过，借由用户访问过的页面列表，同样可以在不知道实际 URL 的情况下实现后退和前进。

属性 描述
length 返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。
scrollRestoration 允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。
state 返回一个表示历史栈堆顶部状态的值。这是一种可以不必等待 popstate 事件而查看状态的方式。

# 3.8 history.length

history.length 属性保存着历史记录的 URL 数量。初始时，该值为 1。如果当前窗口先后访问了三个网址，history.length 属性等于 3。

由于 IE10+浏览器在初始时返回 2，存在兼容性问题，所以该值并不常用

history.length // 初始时，该值为1
history.length // 访问三个网址后，该值为3
1
2

# 4.Screen 对象

Screen Orientation API 是一个能让 Web 开发者能控制屏幕旋转方向的 API，开发者可以利用该 API 检测屏幕的当前方向，在屏幕方向发生改变时得到消息通知，并能通过 API 将屏幕方向锁定到指定状态。目前主流的浏览器都已经部分支持或决定支持该 API，FireFox 26 和 IE 11 都支持了 lockOrientation 和 unlockOrientation API，Crosswalk 4（基于 Chromium 的 Web Runtime）也支持了该 API，Android 上的 Chrome 也正在实现该 API，估计 2014 年一季度之前能够完成。

# 4.1 lockOrientation()

const lockedAllowed = window.screen.lockOrientation(orientation)
1

参数介绍

  • orientation：需要锁定屏幕的方向。这个参数是一个字符串或者是一个由字符串组成的数组。通过多个字符串可以让屏幕只在选定的方向上进行旋转。

以下字符串即表示你也许会指定的一些可能的方向。

  • portrait-primary

    它表示屏幕处于主要的肖像模式时的方向。如果设备处于正常位置且该位置处于纵向位置，或设备的正常位置处于横向并且设备保持顺时针转动 90°，则会在主肖像模式下考虑屏幕。正常的位置是依赖于设备的。

  • portrait-secondary

    它表示屏幕处于辅助肖像模式时的方向。如果设备与正常位置保持 180°，并且该位置处于纵向位置，或者设备的正常位置处于横向位置，并且持有的设备逆时针转动 90°，则屏幕将处于辅助人像模式。正常的位置是依赖于设备的。

  • landscape-primary

    它代表了屏幕处于主要风景模式时的方向。 如果设备保持在正常位置，并且该位置处于横向位置，或者设备的正常位置处于纵向位置，并且所保持的设备顺时针旋转 90°，则会将其视为主要横向模式。正常的位置是依赖于设备的。

  • landscape-secondary

    它代表了屏幕处于次要风景模式时的方向。如果设备与其正常位置保持 180° 并且该位置处于横向，或者如果设备的正常位置是纵向的，并且所保持的设备逆时针旋转 90°，则将其视为次要横向模式。正常的位置是依赖于设备的。

  • portrait

    它表示同时包含 portrait-primary 和 portrait-secondary.

  • landscape

    它表示同时包含 landscape-primary 和 landscape-secondary.

  • default

    它代表 portrait-primary 和 landscape-primary 主要取决于设备的自然方向。例如，如果面板分辨率为 1280 800，则 default 为横向，如果分辨率为 800 1280，则 default 为纵向。

⚠️ 注意：可同时设置多个锁定值。因此，如果锁定设置为只有一个方向，屏幕方向将永远不会改变，知道屏幕方向解锁。否则，只要方向在设备锁定的方向之中，屏幕方向就会从一个方向改变到另一个方向。

返回值

如果方向被授权锁定，则返回 true；如果方向锁定被拒绝，则返回 false。请注意，返回值并不表示屏幕方向确实被锁定：可能会有延迟。

# 4.2 unlockOrientation()

const unlocked = window.screen.unlockOrientation()
1

返回值

如果方向授权解锁成功，则返回 true；如果方向锁定解除失败，则返回 false。

# 4.3 示例

// 锁定屏幕为竖屏模式，不能设备如何旋转，屏幕都不会切换到横屏模式。
window.screen.lockOrientation([“portrait-primary”,“portrait-secondary”]);

// 锁定屏幕为横屏模式，无论设备如何旋转，屏幕都不会切换到竖屏模式。
window.screen.lockOrientation([“landscape-primary”,“landscape-secondary”]);

// 取消屏幕的锁屏，屏幕回到原始状态，
window.screen.unlockOrientation();
1
2
3
4
5
6
7
8

# 4.4 兼容性

另外需要注意的是 Screen Orientation API 的文档规范还处于开发阶段，浏览器的实现可能带有前缀，例如 Firefox 带有 moz 前缀，IE 带有 ms 前缀。在使用前我们需要添加一些代码，保持更好的兼容性。

window.screen.lockOrientation =
  screen.lockOrientation ||
  screen.mozLockOrientation ||
  screen.msLockOrientation

window.screen.unlockOrientation =
  screen.unlockOrientation ||
  screen.mozUnLockOrientation ||
  screen.msUnLockOrientation
1
2
3
4
5
6
7
8
9

# 4.5 Screen 对象的属性

screen 对象用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素高度和宽度等。

每个浏览器中的 screen 对象都包含着各不相同的属性，其中 Chrome 包含 9 个属性，Firefox 包含 10 个，IE8- 浏览器包含 14 个，IE9+ 浏览器包含 17 个。

属性 说明
height 屏幕的像素高度（包括导航和底部）
width 屏幕的像素宽度（包括侧边栏）
availHeight 屏幕的像素高度减去系统部件高度之后的值（只读）
availWidth 屏幕的像素宽度减去系统部件宽度之后的值（只读）
left 当前屏幕距左边的像素距离（Firefox 返回 0，Chrome 和 IE 不支持）
top 当前屏幕距上方的像素距离（Firefox 返回 0，Chrome 和 IE 不支持）
availLeft 未被系统部件占用的最左侧的像素值（只读）（Chrome 和 Firefox 返回 0，IE 不支持）
availTop 未被系统部件占用的最上方的像素值（只读）（Chrome 和 Firefox 返回 0，IE 不支持）
orientation 屏幕的方向。
bufferDepth 读、写用于呈现屏外位图的位数（IE 返回 0，Chrome 和 Firefox 不支持）
colorDepth 用于表现颜色的位数（只读）（IE8- 返回 32，其他浏览器返回 24）
pixelDepth 屏幕的位深（只读）（IE8- 不支持，其他浏览器返回 24）
deviceXDPI 屏幕实际的水平 DPI（只读）（IE 返回 96，Chrome 和 Firefox 不支持）
deviceYDPI 屏幕实际的垂直 DPI（只读）（IE 返回 96，Chrome 和 Firefox 不支持）
logicalXDPI 屏幕逻辑的水平 DPI（只读）（IE 返回 96，Chrome 和 Firefox 不支持）
logicalYDPI 屏幕逻辑的垂直 DPI（只读）（IE 返回 96，Chrome 和 Firefox 不支持）
updateInterval 读、写以毫秒表示的屏幕刷新时间间隔（IE 返回 0，Chrome 和 Firefox 不支持）
fontSmoothingEnabled 是否启用了字体平滑（只读）（IE 返回 true，Chrome 和 Firefox 不支持）

# 5.Navigator 对象

Navigator 接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动。

与其他 BOM 对象的情况一样，每个浏览器中的 Navigator 对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本。

属性 说明
appCodeName 浏览器名称，所有浏览器都返回 Mozilla。
appName 浏览器官方名称。
appVersion 浏览器版本。
appMinorVersion 次版本信息（IE 返回 0，chrome 和 firefox 不支持）。
connection 设备的网络连接信息。
cookieEnabled 表示 cookie 是否启用，所有浏览器都返回 true。
geolocation 可访问设备的地理位置信息。
javaEnabled 浏览器是否支持 Java（IE8 浏览器返回 {}，其他浏览器返回 function javaEnabled()）
language 表示用户的首用语言（IE10 不支持，其他浏览器返回 zh-CN）。
languages 表示用户已知语言的 DOMString 数组，并按优先顺序排列。
maxTouchPoints 当前设备能够支持的最大同时触摸的点数。
mimeTypes 返回 MimeTypeArray 数组用于列举浏览器所支持的 MIME 类型。
onLine 浏览器是否连接因特网（IE 根据实际情况返回 true 或 false，chrome 和 firefox 始终返回 true）。
platform 浏览器所在的系统平台。
plugins 返回 PluginArray 数组用于列出浏览器安装的插件。
product 产品名称（IE10 不支持，其他浏览器返回 Gecko）
productSub 产品次要信息（IE 不支持，chrome 返回 20030107，firefox 返回 20100101）
userAgent 浏览器的用户代理。
vendor 浏览器品牌（chrome 返回 Google Inc.，IE 和 firefox 不支持）

表中的这些 Navigator 对象的属性通常用于检测显示网页的浏览器类型。

刷新
全屏/自适应

# 5.1 获取当前定位

您可以调用  getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。您可以选择性地提供第二个回调函数，当有错误时会被执行。第三个参数也是可选的，您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。

⚠️ 注意：默认情况下，getCurrentPosition()  会尽快返回一个低精度结果，这在您不关心准确度只关心快速获取结果的情况下很有用。有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位，在这种情况下  getCurrentPosition()  会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。

  • 语法
navigator.geolocation.getCurrentPosition(success, error, options)
1

  • 参数

  • success：成功得到位置信息时的回调函数，使用 Position 对象作为唯一参数。

  • error：（可选）获取位置信息失败时的回调函数，使用 PositionError 对象作为唯一的参数，这是一个可选项。

  • options：（可选）一个可选的 PositionOptions 对象，用于设置 getCurrentPosition 的参数。

  • 监视定位

您可以设定一个回调函数来响应定位数据发生的变更（设备发生了移动，或获取到了更高精度的地理位置信息）。您可以通过  watchPosition()  函数实现该功能。它与  getCurrentPosition()  接受相同的参数，但回调函数会被调用多次。错误回调函数与  getCurrentPosition()  中一样是可选的，也会被多次调用。

⚠️ 注意：  您可以直接调用  watchPosition()  函数，不需要先调用  getCurrentPosition()  函数。

watchPosition()  函数会返回一个 ID，唯一地标记该位置监视器。您可以将这个 ID 传给  clearWatch()  函数来停止监视用户位置。

  • 使用案例
刷新
全屏/自适应

# 5.2 复制粘贴

  • readText
刷新
全屏/自适应
  • read
刷新
全屏/自适应
  • writeText
刷新
全屏/自适应
  • write
刷新
全屏/自适应

← 二.全局 API →