浏览器对象

yuhuo2021-05-29JavaScriptJavaScript对象

window 对象

1. 对象属性

对象属性类型描述
windowWindow返回自身 window 对象
selfWindow返回自身 window 对象
framesWindow返回自身 window 对象
openerWindow作为被创建窗口,返回其创建者 window 对象
parentWindow作为 iframe 页面,返回其父窗口的 window 对象;
不作为 iframe 页面时返回自身 window 对象
topWindow作为多层嵌套中的 iframe 页面,返回其顶层窗口的 window 对象;
不作为 iframe 页面时返回自身 window 对象
<iframeId>HTMLIFrameElement返回与 iframe 标签的 id 属性同名,指向 iframe 元素对象
<iframeName>Window返回与 iframe 标签的 name 属性同名,指向 iframe 的 window 对象
[index]Window返回 iframe 的 window 对象
lengthnumber返回 iframe 的数量
frameElementHTMLIFrameElement作为 iframe 页面,返回其父窗口中对应的 iframe 元素对象
innerWidthnumber返回浏览器窗口内容区域宽度
innerHeightnumber返回浏览器窗口内容区域高度
outerWidthnumber返回浏览器窗口总宽度
outerHeightnumber返回浏览器窗口总高度
pageXOffsetnumber返回水平滚动距离
pageYOffsetnumber返回垂直滚动距离
screenLeftnumber返回相对于屏幕窗口的 x 坐标
screenXnumber返回相对于屏幕窗口的 x 坐标
screenTopnumber返回相对于屏幕窗口的 y 坐标
screenYnumber返回相对于屏幕窗口的 y 坐标
closedboolean返回窗口是否已被关闭
namestring窗口的名称

2. 对象方法

对象方法描述
窗口`open(url?: stringURL, 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): stringbase64 转字符串
escape(string: string): string字符串转 Unicode 编码,如:知→%u77E5
对字母数字 * @ - _ + . / 不转
unescape(string: string): stringUnicode 编码转字符串
encodeURI(uri: string): string字符串转 UTF-8 编码,如:知→%E7%9F%A5
对字母数字 ~ ! @ # $ & * ( ) _ + - = ; ' : , . / ? 不转
decodeURI(encodedURI: string): stringUTF-8 编码转字符串
encodeURIComponent(uri: string): string字符串转 UTF-8 编码
对字母数字 , * - _ . 不转
decodeURIComponent(encodedURI: string): stringUTF-8 编码转字符串
============================
引用matchMedia(query: string): MediaQueryList返回 MediaQueryList 媒体查询对象 详情open in new window
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. 对象属性

对象属性类型描述
lengthnumber存储数据的数量

2. 对象方法

对象方法描述
setItem(key: string, value: string): void设置数据
getItem(key: string)获取数据
removeItem(key: string)删除数据
clear(): void清空数据
key(index: number): string根据序号获取数据键名

sessionStorage 对象

1. 对象属性

对象属性类型描述
lengthnumber存储数据的数量

2. 对象方法

对象方法描述
setItem(key: string, value: string): void设置数据
getItem(key: string)获取数据
removeItem(key: string)删除数据
clear(): void清空数据
key(index: number): string根据序号获取数据键名

indexedDB 对象

参见 indexedDB 库

location 对象

1. 对象属性

对象属性类型描述
hrefstring完整 URL(http://127.0.0.1:5502/WebNote/demo.html?search=key#hash)
originstring协议 + 主机名 + 端口(http://127.0.0.1:5502)
protocolstring协议(http:)
hoststring主机名 + 端口(127.0.0.1:5502)
hostnamestring主机名(127.0.0.1)
portstring端口(5502)
pathnamestring路径(/WebNote/demo.html)
searchstring查询(?search=key)
hashstring锚(#hash)

2. 对象方法

对象方法描述
assign(url: string | URL): void 载入一个新的文档
replace(url: string | URL): void 新的文档替换当前文档
reload(): void重新加载当前文档

screen 对象

1. 对象属性

对象属性类型描述
widthnumber屏幕总宽度
heightnumber屏幕总高度
availWidthnumber屏幕可供显示宽度(排除菜单栏工具栏)
availHeightnumber屏幕可供显示高度(排除菜单栏工具栏)
colorDepthnumber屏幕调色板的比特深度
pixelDepthnumber屏幕的颜色分辨率

history 对象

1. 对象属性

对象属性类型描述
lengthnumber浏览历史条目数量
stateany通过 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清除控制台历史(控制台开启 “保留日志” 选项时不起作用)

2. 控制台命令行open in new window

对象属性描述
$_返回上一个表达式的值
$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()清除控制台历史

1. 对象属性

对象属性类型描述
appNamestring返回浏览器名称
appCodeNamestring返回浏览器代码名
appVersionstring返回浏览器平台和版本
platformstring返回操作系统平台
userAgentstring返回用户代理信息,在 http 请求头会携带
onLinestring返回网络是否在线
cookieEnabledstring返回是否启用cookie
serviceWorkerServiceWorkerContainer返回 serviceWorker 容器,用于注册 serviceWorker
geolocationGeolocation返回 geolocation 对象
mediaDevicesMediaDevices返回 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. 对象属性

对象属性类型描述
ondevicechangefunction媒体设备连接状态变化事件回调

3. 对象方法

对象方法描述
enumerateDevices(): Promise<MediaDeviceInfo[]>请求所有媒体设备的列表,返回 Promise 完成时会携带 MediaDeviceInfo 对象数组
getDisplayMedia(constraints?: object): Promise<MediaStream>请求获取用户屏幕,返回 Promise 完成时会携带 MediaStream 对象
getUserMedia(constraints?: object): Promise<MediaStream>请求获取用户媒体输入(视频源或音频源),返回 Promise 完成时会携带 MediaStream 对象
getSupportedConstraints()返回当前浏览器支持的约束字段

MediaDeviceInfo 类

设备信息

1. 原型属性

原型属性类型描述
deviceIdstring返回设备id
groupIdstring返回设备组id(属于同一设备,比如同时具有内置摄像头和麦克风的监视器)
kindstring返回设备类型
labelstring返回设备名称

performance 对象

1. 对象属性

对象属性类型描述
eventCounts
timeOrigin
onresourcetimingbufferfull

2. 对象方法

对象方法描述
mark()
clearMarks()
measure()
clearMeasures()
clearResourceTimings()
getEntries()
getEntriesByName()
getEntriesByType()
now()返回页面加载至当前的时间
setResourceTimingBufferSize()
toJSON()

PerformanceObserver 类

Last Updated 2024/4/24 16:23:29