浏览器对象
yuhuo2021-05-29JavaScriptJavaScript对象
window 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
window | Window | 返回自身 window 对象 |
self | Window | 返回自身 window 对象 |
frames | Window | 返回自身 window 对象 |
opener | Window | 作为被创建窗口,返回其创建者 window 对象 |
parent | Window | 作为 iframe 页面,返回其父窗口的 window 对象; 不作为 iframe 页面时返回自身 window 对象 |
top | Window | 作为多层嵌套中的 iframe 页面,返回其顶层窗口的 window 对象; 不作为 iframe 页面时返回自身 window 对象 |
<iframeId> | HTMLIFrameElement | 返回与 iframe 标签的 id 属性同名,指向 iframe 元素对象 |
<iframeName> | Window | 返回与 iframe 标签的 name 属性同名,指向 iframe 的 window 对象 |
[index] | Window | 返回 iframe 的 window 对象 |
length | number | 返回 iframe 的数量 |
frameElement | HTMLIFrameElement | 作为 iframe 页面,返回其父窗口中对应的 iframe 元素对象 |
innerWidth | number | 返回浏览器窗口内容区域宽度 |
innerHeight | number | 返回浏览器窗口内容区域高度 |
outerWidth | number | 返回浏览器窗口总宽度 |
outerHeight | number | 返回浏览器窗口总高度 |
pageXOffset | number | 返回水平滚动距离 |
pageYOffset | number | 返回垂直滚动距离 |
screenLeft | number | 返回相对于屏幕窗口的 x 坐标 |
screenX | number | 返回相对于屏幕窗口的 x 坐标 |
screenTop | number | 返回相对于屏幕窗口的 y 坐标 |
screenY | number | 返回相对于屏幕窗口的 y 坐标 |
closed | boolean | 返回窗口是否已被关闭 |
name | string | 窗口的名称 |
2. 对象方法
对象方法 | 描述 | |
---|---|---|
窗口 | `open(url?: string | URL, target?: string, features?: string): Window` |
close(): void | 关闭窗口(谷歌浏览器只能关闭由 window.open() 或 a 标签创建的窗口) | |
focus(): void | 窗口获取焦点,只适用open打开的小窗 | |
blur(): void | 窗口失去焦点(测试无效) | |
stop(): void | 停止载入文档 | |
scrollTo(xpos: number, ypos: number): void | 内容滚动到指定的坐标 | |
scrollBy(xnum: number, ynum: number): void | 内容相对当前位置滚动 | |
moveTo(xpos: number, ypos: number): void | 窗口滚动到指定的坐标,只适用open打开的小窗 | |
moveBy(xnum: number, ynum: number): void | 窗口相对当前位置滚动,只适用open打开的小窗 | |
============== | ============== | |
弹窗 | print(): void | 显示打印弹窗 |
alert(message?: any): void | 显示提示弹窗 | |
confirm(message?: string): boolean | 显示确认弹窗,返回选择结果 | |
prompt(message?: string, _default?: string): string | 显示输入弹窗,返回输入文本 | |
============== | ============== | |
定时 | setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number | 超时定时器,返回定时器 id (time最小4毫秒,不足自动补) |
setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[]): number | 间隔定时器,返回定时器 id | |
requestAnimationFrame(callback: Function): number | 动画帧定时器,系统下次绘制时调用,返回定时器 id | |
clearTimeout(id?: number): void | 撤销超时定时器 | |
clearInterval(id?: number): void | 撤销间隔定时器 | |
cancelAnimationFrame(id: number): void | 撤销动画帧定时器 | |
============== | ============== | |
编码 | btoa(data: string): string | 字符串转 base64,不支持中文 |
atob(data: string): string | base64 转字符串 | |
escape(string: string): string | 字符串转 Unicode 编码,如:知→%u77E5 对字母数字 * @ - _ + . / 不转 | |
unescape(string: string): string | Unicode 编码转字符串 | |
encodeURI(uri: string): string | 字符串转 UTF-8 编码,如:知→%E7%9F%A5 对字母数字 ~ ! @ # $ & * ( ) _ + - = ; ' : , . / ? 不转 | |
decodeURI(encodedURI: string): string | UTF-8 编码转字符串 | |
encodeURIComponent(uri: string): string | 字符串转 UTF-8 编码 对字母数字 , * - _ . 不转 | |
decodeURIComponent(encodedURI: string): string | UTF-8 编码转字符串 | |
============== | ============== | |
引用 | matchMedia(query: string): MediaQueryList | 返回 MediaQueryList 媒体查询对象 详情 |
getSelection(): Selection | 返回 Selection 对象 getSelection().toString() 获取当前选择的文本 | |
getComputedStyle(elt: Element, pseudoElt?: string): CSSStyleDeclaration | 返回指定元素或其伪元素样式的 CSSStyleDeclaration 对象 | |
============== | ============== | |
数字 | isFinite(number: number): boolean | 是否有限,有隐式转换 |
isNaN(number: number): boolean | 是否 NaN,有隐式转换 | |
parseInt(string: string, radix?: number): number | 将指定进制的字符串/数字转为整数 | |
parseFloat(string: string): number | 将字符串转为浮点数 | |
============== | ============== | |
其他 | eval(x: string): any | 将字符串作为 JavaScript 代码执行(参数非字符串时无操作,直接返回参数) |
postMessage(message: any, origin: string, transfer?: Transferable[]): void | 跨文档消息传递 |
eval
- 直接 eval:作用域为当前代码块
- 全局 eval:起别名间接调用的情况下,作用域为全局作用域,无法读写定义局部变量
- 严格 eval:严格模式下,不可定义局部变量,eval不可起别名,不可被覆盖
3. 消息传递
// 1.不同源
// A窗口
var bWin = window.open("http://127.0.0.1:5500/Test/test2.html"); // 打开新窗口
var bWin = window.iframeName; // iframe 窗口
bWin.postMessage("数据", "http://127.0.0.1:5500/"); // 指定能接收数据的域名
bWin.postMessage("数据", "*"); // 不限制接收数据的域名
// B窗口
window.addEventListener("message", function(e) {
// 数据
e.data;
// 发送方协议+域名+端口
e.origin;
// 发送方window对象,可通过该对象调用postMessage反向传递消息
e.source;
});
// 2.同源
// A窗口
var bWin = window.open(<url>);
bWin.receive("发给B的数据");
function receive(data) {}
// B窗口
window.opener.receive("发给A的数据");
function receive(data) {}
localStorage 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
length | number | 存储数据的数量 |
2. 对象方法
对象方法 | 描述 |
---|---|
setItem(key: string, value: string): void | 设置数据 |
getItem(key: string) | 获取数据 |
removeItem(key: string) | 删除数据 |
clear(): void | 清空数据 |
key(index: number): string | 根据序号获取数据键名 |
sessionStorage 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
length | number | 存储数据的数量 |
2. 对象方法
对象方法 | 描述 |
---|---|
setItem(key: string, value: string): void | 设置数据 |
getItem(key: string) | 获取数据 |
removeItem(key: string) | 删除数据 |
clear(): void | 清空数据 |
key(index: number): string | 根据序号获取数据键名 |
indexedDB 对象
参见 indexedDB 库
location 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
href | string | 完整 URL(http://127.0.0.1:5502/WebNote/demo.html?search=key#hash) |
origin | string | 协议 + 主机名 + 端口(http://127.0.0.1:5502) |
protocol | string | 协议(http:) |
host | string | 主机名 + 端口(127.0.0.1:5502) |
hostname | string | 主机名(127.0.0.1) |
port | string | 端口(5502) |
pathname | string | 路径(/WebNote/demo.html) |
search | string | 查询(?search=key) |
hash | string | 锚(#hash) |
2. 对象方法
对象方法 | 描述 |
---|---|
assign(url: string | URL): void | 载入一个新的文档 |
replace(url: string | URL): void | 新的文档替换当前文档 |
reload(): void | 重新加载当前文档 |
screen 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
width | number | 屏幕总宽度 |
height | number | 屏幕总高度 |
availWidth | number | 屏幕可供显示宽度(排除菜单栏工具栏) |
availHeight | number | 屏幕可供显示高度(排除菜单栏工具栏) |
colorDepth | number | 屏幕调色板的比特深度 |
pixelDepth | number | 屏幕的颜色分辨率 |
history 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
length | number | 浏览历史条目数量 |
state | any | 通过 pushState 或 replaceState 接收的状态对象 |
2. 对象方法
对象方法 | 描述 |
---|---|
back(): void | 浏览历史后退一步 |
forward(): void | 浏览历史前进一步 |
go(delta?: number): void | 转到对应历史位置(负数后退,正数前进,0刷新当前页面) |
pushState(state: any, title: string, url?: string | URL): void | 向浏览历史添加一个条目,url 变化,页面不会重新加载 state:传递的状态对象 title:无效,传 null 即可 url:必须与原文档同源,也可只使用查询 ? 或锚 # |
replaceState(state: any, title: string, url?: string | URL): void | 替换浏览历史中的当前条目,url 变化,页面不会重新加载 |
console 对象
1. 对象属性
对象属性 | 描述 |
---|---|
debug(...data: any[]): void | 打印详细信息 |
log(...data: any[]): void | 打印普通信息 |
info(...data: any[]): void | 同 log |
dir(...data: any[]): void | 同 log |
dirxml(...data: any[]): void | 同 log |
warn(...data: any[]): void | 打印警告信息 |
error(...data: any[]): void | 打印错误信息 |
table(data?: any, properties?: string[]): void | 表格形式打印数组或对象 |
count(label?: string): void | 打印字符串以及其被打印过多少次 |
assert(condition?: boolean, ...data: any[]): void | 断言, condition = false 时打印错误信息 |
time(label?: string): void | 开始计时, str 为计时器名 |
timeEnd(label?: string): void | 结束计时,打印耗费的毫秒数 |
group(...data: any[]): void | 将打印信息分组,后续打印的都在这个组内,可折叠 |
groupCollapsed(...data: any[]): void | 同 group,但是默认折叠状态 |
groupEnd(): void | 结束分组 |
trace(...data: any[]): void | 当前执行的代码在堆栈中的调用路径 |
clear(): void | 清除控制台历史(控制台开启 “保留日志” 选项时不起作用) |
对象属性 | 描述 |
---|---|
$_ | 返回上一个表达式的值 |
$0 - $4 | 返回最近5个在元素面板选中的 DOM 元素($0 最近,$4 最远) |
$(selector: string): HTMLElement | 返回匹配选择器第一个的 DOM 元素,等同于 document.querySelector(当脚本对 $ 有定义,则覆盖该原始定义) |
$$(selector: string): HTMLElement[] | 返回匹配选择器的 DOM 元素数组,等同于 document.querySelectorAll |
getEventListeners(dom: HTMLElement) | 返回传入的 DOM 对象登记的各种事件 |
keys(obj: Object): string[] | 返回指定对象的键名数组 |
values(obj: Object): any[] | 返回指定对象的键值数组 |
monitorEvents(obj: Object, events?: Event) | 返回监听特定对象上发生的特定事件 |
unmonitorEvents(obj: Object, events?: Event) | 停止监听 |
copy(obj: Object) | 复制对象到粘贴板 |
clear() | 清除控制台历史 |
navigator 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
appName | string | 返回浏览器名称 |
appCodeName | string | 返回浏览器代码名 |
appVersion | string | 返回浏览器平台和版本 |
platform | string | 返回操作系统平台 |
userAgent | string | 返回用户代理信息,在 http 请求头会携带 |
onLine | string | 返回网络是否在线 |
cookieEnabled | string | 返回是否启用cookie |
serviceWorker | ServiceWorkerContainer | 返回 serviceWorker 容器,用于注册 serviceWorker |
geolocation | Geolocation | 返回 geolocation 对象 |
mediaDevices | MediaDevices | 返回 mediaDevices 对象 |
2. 对象方法
对象方法 | 描述 |
---|---|
sendBeacon(url: string | URL, data?: string | ArrayBuffer | ArrayBufferView | Blob | FormData | URLSearchParams): boolean | 通过 HTTP POST 将少量数据异步传输到 Web 服务器,可用于埋点上报 |
geolocation 对象
1. 获取对象
var geolocation = navigator.geolocation;
2. 对象方法
对象方法 | 描述 |
---|---|
getCurrentPosition(success: Function, error?: Function, options?: PositionOptions): void | 获取当前位置,通过回调函数返回结果 |
watchPosition(success: Function, error?: Function, options?: PositionOptions): number | 监听位置变化,通过回调函数返回结果,返回监听编号(用于取消监听) |
clearWatch(watchId: number): void | 取消指定监听编号对应的位置变化监听 |
3. 使用示例
navigator.geolocation.getCurrentPosition(function(position) {
position = {
coords: {
accuracy: 76, // 精度(多少米范围内)
altitude: null, // 海拔
altitudeAccuracy: null, // 海拔精度
heading: null, // 航向
latitude: 23.120709136711717, // 纬度
longitude: 113.3173830443544, // 经度
speed: null, // 速度
},
timestamp: 1652063381687, // 当前时间戳
}
}, function(error) {
error = {
code: 1, // 错误码:1 用户禁止,2 浏览器无法确定位置,3 超时
message: "User denied Geolocation", // 错误信息
}
}, {
enableHighAccuracy: true, // 是否启用高精度(默认true)
maximumAge: 0, // 缓存该位置信息时间的秒数(默认0)
timeout: 0, // 超时时间秒数(默认无限)
});
mediaDevices 对象
1. 获取对象
var mediaDevices = navigator.mediaDevices;
2. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
ondevicechange | function | 媒体设备连接状态变化事件回调 |
3. 对象方法
对象方法 | 描述 |
---|---|
enumerateDevices(): Promise<MediaDeviceInfo[]> | 请求所有媒体设备的列表,返回 Promise 完成时会携带 MediaDeviceInfo 对象数组 |
getDisplayMedia(constraints?: object): Promise<MediaStream> | 请求获取用户屏幕,返回 Promise 完成时会携带 MediaStream 对象 |
getUserMedia(constraints?: object): Promise<MediaStream> | 请求获取用户媒体输入(视频源或音频源),返回 Promise 完成时会携带 MediaStream 对象 |
getSupportedConstraints() | 返回当前浏览器支持的约束字段 |
MediaDeviceInfo 类
设备信息
1. 原型属性
原型属性 | 类型 | 描述 |
---|---|---|
deviceId | string | 返回设备id |
groupId | string | 返回设备组id(属于同一设备,比如同时具有内置摄像头和麦克风的监视器) |
kind | string | 返回设备类型 |
label | string | 返回设备名称 |
performance 对象
1. 对象属性
对象属性 | 类型 | 描述 |
---|---|---|
eventCounts | ||
timeOrigin | ||
onresourcetimingbufferfull |
2. 对象方法
对象方法 | 描述 |
---|---|
mark() | |
clearMarks() | |
measure() | |
clearMeasures() | |
clearResourceTimings() | |
getEntries() | |
getEntriesByName() | |
getEntriesByType() | |
now() | 返回页面加载至当前的时间 |
setResourceTimingBufferSize() | |
toJSON() |