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

2023-09-18 15:54:57 浏览数 (1)

Window 对象

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

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

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

代码语言：javascript复制
var a = 1;
window.a // 1

JavaScript

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)

设置对话框大小

…

…

使用

代码语言：javascript复制
// 使用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 头部的值

使用

代码语言：javascript复制
// 显示浏览器
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

返回屏幕的总宽度

使用

代码语言：javascript复制
// 显示客户端相关信息
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 列表中的某个具体页面

使用

代码语言：javascript复制
// 使用
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()

用新的文档替换当前文档

使用

代码语言：javascript复制
// 使用
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 对。 在关闭窗口或标签页之后将会删除这些数据

使用

代码语言：javascript复制
// 使用 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

参考 & 引用

JavaScript 教程 | 菜鸟教程

javascript browser 对象 浏览器 前端

0 人点赞