window 对象

Window 对象表示浏览器中打开的窗口。

如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

Note注意： 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅 对象)
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。请参阅 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
localStorage	在浏览器中存储 key/value 对。没有过期时间。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。请参阅 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。请参阅 Screen 对象。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
sessionStorage	在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY	返回相对于屏幕窗口的y坐标
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的父窗口。

方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
atob()	解码一个 base-64 编码的字符串。
btoa()	创建一个 base-64 编码的字符串。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
getSelection()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()	获取指定元素的 CSS 样式。
matchMedia()	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()	已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
stop()	停止页面载入。
postMessage()	安全地实现跨源通信。
addEventListener()	注册一个事件处理程序，该处理程序在特定事件发生时执行。
removeEventListener()	移除由 addEventListener() 方法注册的事件处理程序。
dispatchEvent()	分派一个事件到目标对象。

javascript

function myFunction() {
    alert("你好，我是一个警告框！");
}

// 使用window对象的其他方法
function openWindow() {
    window.open("https://www.example.com", "_blank", "width=400,height=300");
}

// 注册点击事件
document.getElementById("myButton").addEventListener("click", myFunction);
document.getElementById("openWindowButton").addEventListener("click", openWindow);

html

<button id="myButton" >点击我</button>
<button id="openWindowButton">打开新窗口</button>

Navigator

• Navigator 对象是 window 对象的属性，可以通过 window.navigator 访问。

属性

属性	描述
appName	返回浏览器的名称
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值
geolocation	返回浏览器的地理位置信息
language	返回浏览器使用的语言
onLine	返回浏览器是否在线，在线返回 ture，否则返回 false
product	返回浏览器使用的引擎（产品）
vendor	返回浏览器的供应商
plugins	返回一个 PluginArray 对象，包含所有已安装的插件
mimeTypes	返回一个 MimeTypeArray 对象，包含所有已安装的插件的 MIME 类型
connection	返回一个 NetworkInformation 对象，包含有关当前网络连接的信息

方法

方法	描述
javaEnabled()	检测当前浏览器是否启用了 Java。
registerProtocolHandler()	注册一个协议处理程序，当用户点击超链接或输入特定协议的 URL 时，将调用该处理程序。
requestMediaKeySystemAccess()	请求获取解密媒体内容的许可。
getUserMedia()	请求获取用户的媒体输入设备的权限。
sendBeacon()	发送一个异步请求，不阻塞页面的加载。
vibrate()	使手机或其他设备振动。
wakeLock()	获取设备的唤醒锁，以防止设备进入休眠状态。
requestWakeLock()	获取设备的唤醒锁，以防止设备进入休眠状态。
getBattery()	获取设备的电池状态。
getGamepads()	返回一个包含游戏手柄信息的数组。
getStorageUpdates()	获取存储的更新。
requestMIDIAccess()	请求 MIDI 权限。
requestPointerLock()	请求指针锁定。
requestWakeLock()	获取设备的唤醒锁，以防止设备进入休眠状态。
requestDeviceMotion()	请求设备的运动传感器权限。
requestDeviceOrientation()	请求设备的方向传感器权限。
requestNetworkInformation()	请求网络信息。
requestFullscreen()	请求全屏模式。
exitFullscreen()	退出全屏模式。
getInstalledRelatedApps()	获取安装的相关应用。
getVRDisplays()	获取 VR 显示器。
requestMediaKeySystemAccess()	请求获取解密媒体内容的许可。
requestStorageAccess()	请求存储权限。
requestMIDIAccess()	请求 MIDI 权限。

javascript

// 获取浏览器信息
document.write("浏览器名称：" + navigator.appName + "<br>");
document.write("浏览器代码名称：" + navigator.appCodeName + "<br>");
document.write("浏览器版本：" + navigator.appVersion + "<br>");
document.write("cookie 是否启用：" + navigator.cookieEnabled + "<br>");
document.write("运行平台：" + navigator.platform + "<br>");
document.write("user-agent：" + navigator.userAgent + "<br>");
document.write("语言：" + navigator.language + "<br>");
document.write("是否在线：" + navigator.onLine + "<br>");
document.write("浏览器引擎：" + navigator.product + "<br>");
document.write("浏览器供应商：" + navigator.vendor + "<br>");

html

<p>浏览器信息</p>

Screen

• Screen 对象是 window 对象的属性，可以通过 window.screen 访问。

属性

属性	描述
availHeight	返回屏幕的可用高度
availLeft	返回屏幕的可用宽度
availTop	返回屏幕的可用高度
availWidth	返回屏幕的可用宽度
colorDepth	返回屏幕的颜色深度
height	返回屏幕的高度
left	返回屏幕的左边缘
pixelDepth	返回屏幕的像素深度
top	返回屏幕的顶边缘
width	返回屏幕的宽度

方法

方法	描述
lockOrientation()	锁定屏幕方向。
unlockOrientation()	解锁屏幕方向。
mozLockOrientation()	锁定屏幕方向。
mozUnlockOrientation()	解锁屏幕方向。
matchMedia()	检查媒体查询。
mozMatchMedia()	检查媒体查询。
orientation	返回屏幕方向。
mozOrientation()	返回屏幕方向。

javascript

// 获取屏幕信息
document.write("屏幕可用高度：" + screen.availHeight + "<br>");
document.write("屏幕可用宽度：" + screen.availWidth + "<br>");
document.write("屏幕颜色深度：" + screen.colorDepth + "<br>");
document.write("屏幕高度：" + screen.height + "<br>");
document.write("屏幕左边缘：" + screen.left + "<br>");
document.write("屏幕像素深度：" + screen.pixelDepth + "<br>");
document.write("屏幕顶边缘：" + screen.top + "<br>");
document.write("屏幕宽度：" + screen.width + "<br>");

html

<p>屏幕信息</p>

History

• History 对象是 window 对象的属性，可以通过 window.history 访问。

属性

属性	描述
length	返回历史记录的数量

方法

方法	描述
back()	加载历史记录中的前一个 URL。
forward()	加载历史记录中的下一个 URL。
go()	加载历史记录中的某个具体页面。
pushState()	添加一个新的历史记录条目。
replaceState()	替换当前历史记录条目。

javascript

// 前进后退
function goBack() {
    window.history.back();
}

function goForward() {
    window.history.forward();
}

// 加载历史记录
function goPage(page) {
    window.history.go(page);
}

// 加载新页面
function loadPage(url) {
    window.location.href = url;
}

document.getElementById("goBackButton").addEventListener("click", goBack);
document.getElementById("goForwardButton").addEventListener("click", goForward);
document.getElementById("goPageButton").addEventListener("click", goPage);
document.getElementById("loadPageButton").addEventListener("click", loadPage('https://www.example.com'));

html

<button id="goBackButton" >后退</button>
<button id="goForwardButton">前进</button>
<button id="goPageButton" >前一页</button>
<button id="goPageButton" >后一页</button>
<button id="loadPageButton" >加载页面</button>

Location

• Location 对象是 window 对象的属性，可以通过 window.location 访问。

属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚点）
host	设置或返回主机名和端口号
hostname	设置或返回当前 URL 的主机名
href	设置或返回当前页面的 URL
origin	设置或返回当前页面的源
pathname	设置或返回当前 URL 的路径部分
port	设置或返回当前 URL 的端口号
protocol	设置或返回当前页面的协议
search	设置或返回查询字符串部分

方法

方法	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	加载新的文档。

javascript

// 加载新页面
function loadPage(url) {
    window.location.href = url;
}

// 加载新页面并替换当前历史记录条目
function replacePage(url) {
    window.location.replace(url);
}

document.getElementById("loadPageButton").addEventListener("click", loadPage('https://www.example.com'));
document.getElementById("replacePageButton").addEventListener("click", replacePage('https://www.example.com'));

html

<button id="loadPageButton" >加载页面</button>
<button id="replacePageButton" >加载页面并替换当前历史记录条目</button>

存储对象

• localStorage 和 sessionStorage 对象是 window 对象的属性，可以通过 window.localStorage 和 window.sessionStorage 访问。
• localStorage 和 sessionStorage 存储在浏览器中，可以持久化存储数据。
• localStorage 存储在本地，除非被手动清除，否则数据在浏览器关闭后依然存在。
• sessionStorage 存储在会话中，页面关闭后数据也会被清除。

属性

属性	描述
length	返回存储中的键值对数量

方法

方法	描述
getItem()	返回指定键对应的值。
key()	返回指定索引的键。
removeItem()	删除指定键对应的值。
setItem()	设置指定键对应的值。
clear()	清除所有键值对。

javascript

// 设置localStorage
function setLocalStorage(key, value) {
    localStorage.setItem(key, value);
}

// 获取localStorage
function getLocalStorage(key) {
    return localStorage.getItem(key);
}

// 设置sessionStorage
function setSessionStorage(key, value) {
    sessionStorage.setItem(key, value);
}

// 获取sessionStorage
function getSessionStorage(key) {
    return sessionStorage.getItem(key);
}

document.getElementById("setLocalStorageButton").addEventListener("click", setLocalStorage('name', '小明'));
document.getElementById("getLocalStorageButton").addEventListener("click", getLocalStorage('name'));
document.getElementById("setSessionStorageButton").addEventListener("click", setSessionStorage('name', '小明'));
document.getElementById("getSessionStorageButton").addEventListener("click", getSessionStorage('name'));

html

<button id="setLocalStorageButton" >设置localStorage</button>
<button id="getLocalStorageButton" >获取localStorage</button>
<button id="setSessionStorageButton" >设置sessionStorage</button>
<button id="getSessionStorageButton" >获取sessionStorage</button>

贡献者: yulc