前端温习(三)： JavaScript Browser 对象
前端温习(三)： JavaScript Browser 对象
Window 对象
Window 对象表示浏览器中打开的窗口。这么一说大家肯定还是和我一样一脸懵逼，浏览器中打开的窗口是新的标签吗？就有下文的白话文。
JavaScript 的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为“ 顶层对象 ”。这就是说，JavaScript 的所有对象，都是“ 顶层对象 ”的下属。不同的运行环境有不同的“ 顶层对象 ”，在浏览器环境中，这个顶层对象就是 window 对象。
所有浏览器环境的全局变量，都是window对象的属性。
var a = 1;
window.a // 1JavaScript
Copy
可以简单理解成，window 就是指当前的浏览器窗口。
只要指定某个 window 或帧框（frame）的名字，就可以从这个全局对象读取该窗口的全局变量。比如，某个文档存在一个全局变量 x，就可以从 iframe 的 parent.x 读取该全局变量。
属性
属性 | 说明 |
|---|---|
document | 对话框中显示的当前的文档 |
frames | 表示当前对话框中所有frame对象的集合 |
location | 指定当前文档的URI |
name | 对话框的名字 |
status | 状态栏中的当前信息 |
defaultstatus | 状态栏的默认信息 |
top | 表示最顶层的浏览器对话框 |
parent | 表示包含当前对话框的父对话框 |
opener | 表示打开当前对话框的父对话框 |
closed | 表示当前对话框是否关闭的逻辑值 |
length | 设置或返回窗口中的框架数量 |
… | … |
方法
方法 | 说明 |
|---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框 |
confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
prompt() | 显示可提示用户输入的对话框 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
close() | 关闭浏览器窗口 |
focus() | 把键盘焦点给予一个窗口 |
blur() | 将被引用的的对话框放在所有打开对话框的后面 |
scrollTo(x，y) | 把对话框滚动到指定的坐标 |
scrollBy(x，y) | 按照指定的位移量滚动对话框 |
setTimeout(timer) | 在指定毫秒后，对传递的表达式求值 |
clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
setInterval(interval) | 指定周期性执行代码 |
clearInterval() | 取消由 setInterval() 设置的 timeout |
moveTo(x，y) | 将对话框移动到指定坐标处 |
moveBy(offsetx，offsety) | 将对话框移动到指定的位移量处 |
resizeTo(x，y) | 设置对话框大小 |
… | … |
使用
// 使用window
window
// 获取整个页面
window.document
// 打开一个新窗口
myW=window.open('http://c69p.com');
// 经过三秒后关闭打开的窗口
window.setTimeout(function(){
myW.close();
}, 3000);JavaScript
Copy
Navigator 对象
Navigator 对象包含有关浏览器的信息。
属性
属性 | 说明 |
|---|---|
appCodeName | 返回浏览器的代码名 |
appName | 返回浏览器的名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
platform | 返回运行浏览器的操作系统平台 |
userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
使用
// 显示浏览器
console.log(navigator)
// output: Navigator {vendorSub: '', productSub: '20030107', vendor: 'Google Inc.', maxTouchPoints: 0, scheduling: Scheduling, …}JavaScript
Copy
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
属性
属性 | 说明 |
|---|---|
availHeight | 返回屏幕的高度（不包括Windows任务栏） |
availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
height | 返回屏幕的总高度 |
pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
width | 返回屏幕的总宽度 |
使用
// 显示客户端相关信息
console.log(screen)
// output: Screen {availWidth: 1536, availHeight: 824, width: 1536, height: 864, colorDepth: 24, …}JavaScript
Copy
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history.xxx 属性对其进行访问。
属性
属性 | 说明 |
|---|---|
length | 返回历史列表中的网址数 |
方法
方法 | 说明 |
|---|---|
back() | 加载 history 列表中的前一个 URL |
forward() | 加载 history 列表中的下一个 URL |
go() | 加载 history 列表中的某个具体页面 |
使用
// 使用
history
// or window.history
window.history
// output: History {length: 5, scrollRestoration: 'auto', state: null}
// 获取长度属性
history.length
// output: 3
// 后退一页
history.go(-1)JavaScript
Copy
Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。
属性
属性 | 描述 |
|---|---|
hash | 返回一个URL的锚部分 |
host | 返回一个URL的主机名和端口 |
hostname | 返回URL的主机名 |
href | 返回完整的URL |
pathname | 返回的URL路径名 |
port | 返回一个URL服务器使用的端口号 |
protocol | 返回一个URL协议 |
search | 返回一个URL的查询部分 |
方法
方法 | 说明 |
|---|---|
assign() | 载入一个新的文档 |
reload() | 重新载入当前文档 |
replace() | 用新的文档替换当前文档 |
使用
// 使用
location
// or window.location
window.location
// output: Location {ancestorOrigins: DOMStringList, href: 'http://c69p.com.test/test#aa', origin: 'http://c69p.com.test', protocol: 'http:', host: 'c69p.com.test', …}
// 获取 URL 锚部分
location.hash
// output: '#aa'JavaScript
Copy
JavaScript 存储对象
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
属性 | 描述 |
|---|---|
length | 返回存储对象中包含多少条数据 |
存储对象方法
方法 | 描述 |
|---|---|
key(n) | 返回存储对象中第 n 个键的名称 |
getItem(keyname) | 返回指定键的值 |
setItem(keyname, value) | 添加键和值，如果对应的值存在，则更新该键对应的值 |
removeItem(keyname) | 移除键 |
clear() | 清除存储对象中所有的键 |
Web 存储 API
属性 | 描述 |
|---|---|
window.localStorage | 在浏览器中存储 key/value 对。没有过期时间 |
window.sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据 |
使用
// 使用 window.localStorage or localStorage
window.localStorage
localStorage
// 设置 name 为 chendasheng localStorage是永久缓存需要手动删除
localStorage.setItem('name','chendasheng')
localStorage.getItem('name')
// output: 'chendasheng'
// 使用 window.sessionStorage or sessionStorage
window.sessionStorage
sessionStorage
// 设置 name 为 chendasheng sessionStorage 是临时缓存关闭浏览器或关闭当前窗口将会清理
sessionStorage.setItem('name','chendasheng')
sessionStorage.getItem('name')
// output: 'chendasheng'JavaScript
Copy