陈大剩博客

前端温习(三): JavaScript Browser 对象

  • 陈大剩
  • 2023-01-31 11:03:26
  • 1005

Window 对象

Window 对象表示浏览器中打开的窗口。这么一说大家肯定还是和我一样一脸懵逼,浏览器中打开的窗口是新的标签吗?就有下文的白话文。

JavaScript 的所有对象都存在于一个运行环境之中,这个运行环境本身也是对象,称为“ 顶层对象 ”。这就是说,JavaScript 的所有对象,都是“ 顶层对象 ”的下属。不同的运行环境有不同的“ 顶层对象 ”,在浏览器环境中,这个顶层对象就是 window 对象。

所有浏览器环境的全局变量,都是window对象的属性。

var a = 1;
window.a // 1

可以简单理解成,window 就是指当前的浏览器窗口。

只要指定某个 window 或帧框(frame)的名字,就可以从这个全局对象读取该窗口的全局变量。比如,某个文档存在一个全局变量 x,就可以从 iframeparent.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);

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, …}

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, …}

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)

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 存储对象

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 教程 | 菜鸟教程

我的博客即将同步至腾讯云开发者社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=2cx8npfhvrk0w

分享到:
0

说点儿什么吧

头像

表情

本站由陈大剩博客程序搭建 | 湘ICP备2023000975号| Copyright © 2017 - 陈大剩博客 | 本站采用创作共用版权:CC BY-NC 4.0

站长统计| 文章总数[115]| 评论总数[9]| 登录用户[22]| 时间点[119]

logo

登入

社交账号登录