2022-05-22 0 38 web前端社区
window 对象是 BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象,甚至我们前面介绍的 document 对象也属于 window 对象。
属性 | 描述 |
---|---|
closed | 返回窗口是否已被关闭 |
defaultStatus | 设置或返回窗口状态栏中的默认文本 |
document | 对 Document 对象的只读引用 |
frames | 返回窗口中所有已经命名的框架集合,集合由 Window 对象组成,每个 Window 对象在窗口中含有一个 或 |
history | 对 History 对象的只读引用,该对象中包含了用户在浏览器中访问过的 URL |
innerHeight | 返回浏览器窗口的高度,不包含工具栏与滚动条 |
innerWidth | 返回浏览器窗口的宽度,不包含工具栏与滚动条 |
localStorage | 在浏览器中以键值对的形式保存某些数据,保存的数据没有过期时间,会永久保存在浏览器中,直至手动删除 |
length | 返回当前窗口中 |
location | 引用窗口或框架的 Location 对象,该对象中包含当前 URL 的有关信息 |
name | 设置或返回窗口的名称 |
navigator | 对 Navigator 对象的只读引用,该对象中包含当前浏览器的有关信息 |
opener | 返回对创建此窗口的 window 对象的引用 |
outerHeight | 返回浏览器窗口的完整高度,包含工具栏与滚动条 |
outerWidth | 返回浏览器窗口的完整宽度,包含工具栏与滚动条 |
pageXOffset | 设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离 |
pageYOffset | 设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离 |
parent | 返回父窗口 |
screen | 对 Screen 对象的只读引用,该对象中包含计算机屏幕的相关信息 |
screenLeft | 返回浏览器窗口相对于计算机屏幕的 X 坐标 |
screenTop | 返回浏览器窗口相对于计算机屏幕的 Y 坐标 |
screenX | 返回浏览器窗口相对于计算机屏幕的 X 坐标 |
sessionStorage | 在浏览器中以键值对的形式存储一些数据,数据会在关闭浏览器窗口或标签页之后删除 |
screenY | 返回浏览器窗口相对于计算机屏幕的 Y 坐标 |
self | 返回对 window 对象的引用 |
status | 设置窗口状态栏的文本 |
top | 返回最顶层的父窗口 |
方法 | 描述 |
---|---|
alert() | 在浏览器窗口中弹出一个提示框,提示框中有一个确认按钮 |
atob() | 解码一个 base-64 编码的字符串 |
btoa() | 创建一个 base-64 编码的字符串 |
blur() | 把键盘焦点从顶层窗口移开 |
clearInterval() | 取消由 setInterval() 方法设置的定时器 |
clearTimeout() | 取消由 setTimeout() 方法设置的定时器 |
close() | 关闭某个浏览器窗口 |
confirm() | 在浏览器中弹出一个对话框,对话框带有一个确认按钮和一个取消按钮 |
createPopup() | 创建一个弹出窗口,注意:只有 IE 浏览器支持该方法 |
focus() | 使一个窗口获得焦点 |
getSelection() | 返回一个 Selection 对象,对象中包含用户选中的文本或光标当前的位置 |
getComputedStyle() | 获取指定元素的 CSS 样式 |
matchMedia() | 返回一个 MediaQueryList 对象,表示指定的媒体查询解析后的结果 |
moveBy() | 将浏览器窗口移动指定的像素 |
moveTo() | 将浏览器窗口移动到一个指定的坐标 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
print() | 打印当前窗口的内容 |
prompt() | 显示一个可供用户输入的对话框 |
resizeBy() | 按照指定的像素调整窗口的大小,即将窗口的尺寸增加或减少指定的像素 |
resizeTo() | 将窗口的大小调整到指定的宽度和高度 |
scroll() | 已废弃。您可以使用 scrollTo() 方法来替代 |
scrollBy() | 将窗口的内容滚动指定的像素 |
scrollTo() | 将窗口的内容滚动到指定的坐标 |
setInterval() | 创建一个定时器,按照指定的时长(以毫秒计)来不断调用指定的函数或表达式 |
setTimeout() | 创建一个定时器,在经过指定的时长(以毫秒计)后调用指定函数或表达式,只执行一次 |
stop() | 停止页面载入 |
postMessage() | 安全地实现跨源通信 |
JavaScript navigator 对象中存储了与浏览器相关的信息,例如名称、版本等,我们可以通过 window 对象的 navigator 属性(即 window.navigator)来引用 navigator 对象,并通过它来获取浏览器的基本信息。
属性 | 描述 |
---|---|
appCodeName | 返回当前浏览器的内部名称(开发代号) |
appName | 返回浏览器的官方名称 |
appVersion | 返回浏览器的平台和版本信息 |
cookieEnabled | 返回浏览器是否启用 cookie,启用返回 true,禁用返回 false |
onLine | 返回浏览器是否联网,联网则返回 true,断网则返回 false |
platform | 返回浏览器运行的操作系统平台 |
userAgent | 返回浏览器的厂商和版本信息,即浏览器运行的操作系统、浏览器的版本、名称 |
方法 | 描述 |
---|---|
javaEnabled() | 返回浏览器是否支持运行 Java Applet 小程序,支持则返回 true,不支持则返回 false |
sendBeacon() | 向浏览器异步传输少量数据 |
var u = navigator.userAgent;
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
JavaScript screen 对象中包含了有关计算机屏幕的信息,例如分辨率、宽度、高度等,我们可以通过 window 对象的 screen 属性来获取它。
下表中列举了 JavaScript screen 对象中常用的属性及其描述:
属性 | 说明 |
---|---|
availTop | 返回屏幕上方边界的第一个像素点(大多数情况下返回 0) |
availLeft | 返回屏幕左边边界的第一个像素点(大多数情况下返回 0) |
availHeight | 返回屏幕的高度(不包括 Windows 任务栏) |
availWidth | 返回屏幕的宽度(不包括 Windows 任务栏) |
colorDepth | 返回屏幕的颜色深度(color depth),根据 CSSOM(CSS 对象模型)视图,为兼容起见,该值总为 24。 |
height | 返回屏幕的完整高度 |
pixelDepth | 返回屏幕的位深度/色彩深度(bit depth),根据 CSSOM(CSS 对象模型)视图,为兼容起见,该值总为 24 |
width | 返回屏幕的完整宽度 |
orientation | 返回当前屏幕的方向 |
属性 | 描述 |
---|---|
hash | 返回一个 URL 中锚的部分,例如:http://c.biancheng.net#js 中的 #js。 |
host | 返回一个 URL 的主机名和端口号,例如 http://c.biancheng.net:8080。 |
hostname | 返回一个 URL 的主机名,例如 http://c.biancheng.net。 |
href | 返回一个完整的 URL,例如 http://c.biancheng.net/javascript/location-object.html。 |
pathname | 返回一个 URL 中的路径部分,开头有个/ 。 |
port | 返回一个 URL 中的端口号,如果 URL 中不包含明确的端口号,则返回一个空字符串' ' 。 |
protocol | 返回一个 URL 协议,即 URL 中冒号: 及其之前的部分,例如 http: 和 https:。 |
search | 返回一个 URL 中的查询部分,即 URL 中? 及其之后的一系列查询参数。 |
方法 | 说明 |
---|---|
assign() | 加载指定的 URL,即载入指定的文档。 |
reload() | 重新加载当前 URL。刷新当前网页。 |
replace() | 用指定 URL 替换当前的文档,与 assign() 方法不同的是,使用 replace() 替换的新页面不会保存在浏览历史中,用户不能使用后退来返回该页面。 |
toString() | 与 href 属性的效果相同,以字符串的形式返回当前完整的 URL。 |
JavaScript history 对象中包含了用户在浏览器中访问过的历史记录,其中包括通过浏览器浏览过的页面,以及当前页面中通过<iframe>
加载的页面。我们可以通过 window 对象中的 history 属性来获取 history 对象,由于 window 对象是一个全局对象,因此在使用window.history
时可以省略 window 前缀,例如window.history.go()
可以简写为history.go()
。
属性 | 说明 |
---|---|
length | 返回浏览历史的数目,包含当前已经加载的页面。 |
scrollRestoration | 利用浏览器特性,使我们在返回上一页或者下一页时,将页面滚动到之前浏览的位置,该属性有两个值,分别是 auto(表示滚动)与 manual(表示不滚动)。 |
state | 返回浏览器在当前 URL 下的状态信息,如果没有调用过 pushState() 或 replaceState() 方法,则返回默认值 null。 |
示例代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript</title></head><body> <script type="text/javascript"> document.write(history.length + "<br>"); document.write(history.scrollRestoration + "<br>"); document.write(history.state + "<br>"); </script></body></html>
方法 | 说明 |
---|---|
back() | 参照当前页面,返回历史记录中的上一条记录(即返回上一页),您也可以通过点击浏览器工具栏中的← 按钮来实现同样的效果。 |
forward() | 参照当前页面,前往历史记录中的下一条记录(即前进到下一页),您也可以通过点击浏览器工具栏中的→ 按钮来实现同样的效果。 |
go() | 参照当前页面,根据给定参数,打开指定的历史记录,例如 -1 表示返回上一页,1 表示返回下一页。 |
pushState() | 向浏览器的历史记录中插入一条新的历史记录。 |
replaceState() | 使用指定的数据、名称和 URL 来替换当前历史记录。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button onclick="myBack()">back()</button>
<button onclick="myForward()">forward()</button>
<button onclick="myGo()">go()</button>
<button onclick="myPushState()">pushState()</button>
<button onclick="myReplaceState()">replaceState()</button>
<script type="text/javascript">
function myBack(){
history.back();
}
function myForward(){
history.forward();
}
function myGo(){
var num = prompt('请输入一个整数', '1');
history.go(num);
}
function myPushState(){
var state = { 'page_id': 1, 'user_id': 5 }
var title = 'JavaScript'
var url = 'index.html'
history.pushState(state, title, url)
console.log(history.state);
}
function myReplaceState(){
var state = { 'page_id': 3, 'user_id': 5 }
var title = 'history'
var url = 'index.html'
history.replaceState(state, title, url)
console.log(history.state);
}
</script>
</body>
</html>
根据类型的不同,JavaScript 编程中的错误大致可以分为以下三种类型:
错误(Error)是在代码运行之前出现的,在运行 JavaScript 程序之前,JavaScript 解释器会先对代码进行检查,如果代码有误,例如某些语法错误,浏览器就会报出相应的错误,只有将错误修正后,代码才能运行。
异常(Exception)是在代码运行中出现的,例如调用某个未定义的方法、读取不存在的文件等。在出现异常之前,代码的运行并不受影响,当出现异常时,会在浏览器控制台输出错误信息,并终止程序的运行。
异常处理的目的是捕捉产生异常的代码,使整个程序不会因为异常而终止运行。在 JavaScript 中,您可以使用 try catch 语句来捕获异常,并做出相应处理,语法格式如下:
try {
// 可能会发生异常的代码
} catch(error) {
// 发生异常时要执行的操作
}
我们可以将任何可能发生异常的代码放到 try 语句块中,并在 catch 语句块中定义处理异常的方法。如果 try 语句块中的代码发生错误,代码会立即从 try 语句块跳转到 catch 语句块中,如果 try 语句块中代码没有发生错误,就会忽略 catch 语句块中的代码。当 try 语句块中的代码出现异常时,会创建并抛出一个 Error 对象(例如上面代码内catch(error)
中的 error),对象中包含两个属性,如下所示:
在 try catch 语句的后面,还可以添加一个 finally 语句块,无论 try 语句块中的代码是否发生错误,finally 语句中的代码都会执行。
JavaScript 中,不仅可以依赖 JavaScript 解析器来自动抛出错误,还可以手动抛出错误。抛出错误需要使用 throw 语句,语法格式如下:
throw expression;
其中 expression 为要抛出的异常,可以是任何类型的值,例如对象、字符串、数组等,推荐使用对象类型。
JavaScript 中内置了一个 Error() 函数来创建要抛出的错误对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script>
function squareRoot(number) {
// 如果数字为负数,则抛出错误
if(number < 0) {
throw new Error("抱歉,无法计算负数的平方根!");
} else {
console.log(Math.sqrt(number));
}
}
try {
squareRoot(16);
squareRoot(625);
squareRoot(-9);
squareRoot(100);
// 若抛出错误,则不会执行下面的行
console.log("所有函数都执行成功。");
} catch(e) {
// 处理错误
console.log(e.message);
}
</script>
</body>
</html>
前面我们提到,当 try 语句块中的代码出现错误时,会创建并抛出一个 Error 对象,对象中包含错误类型和错误描述两个属性。
发生不同的错误,会返回不同的错误类型,JavaScript 中支持以下几种错误类型:
错误类型 | 说明 |
---|---|
EvalError | 使用 eval() 函数时发出错误,会抛出该错误 |
InternalError | 由 JavaScript 引擎内部错误导致的异常,会抛出该错误 |
RangeError | 范围错误,当使用了超出允许范围的数值时,会抛出该错误 |
SyntaxError | 语法错误,当代码中存在任何语法错误时,会抛出该错误 |
TypeError | 类型错误,当使用的值不是预期类型时,会抛出该错误,例如对数字调用字符串方法,对字符串调用数组方法等 |
URIError | URI 错误,当使用 URI 相关函数但传入 URI 参数时,会抛出该错误 |
ReferenceError | 参数错误,当尝试使用未定义的变量、函数、对象时,会抛出该错误 |
Cookie 代表一种小型的文本文件,可以让开发人员在用户计算机上存储少量的数据(大约 4kb),来记录用户的某些信息,例如用户身份、喜好等,当用户下次访问网站时,网站可以通过检索这些信息来为用户展示个性化页面。另外,一些电商网站的购物车也用到了 Cookie 技术。
Cookie 最初是为 PHP、ASP 等服务器端脚本语言设计的,但是我们也可以使用 JavaScript 来操作,只是操作起来比较复杂,下面就来简单介绍一下如何使用 JavaScript 来操作 Cookie。
在 JavaScript 中,您可以通过
document.cookie
属性来创建、读取、修改和删除 Cookie 信息。
创建(设置)新的 Cookie 信息,需要以
name=value
形式的字符串来定义新的 Cookie 信息,如下例所示:
document.cookie = "url=http://c.biancheng.net/";
Cookie 数据中不能包含分号、逗号或空格,因此在将数据存储到 Cookie 之前,可以使用 JavaScript 内置的 encodeURIComponent() 函数对数据进行编码。在读取 Cookie 时,使用对应的 decodeURIComponent() 函数来解析 Cookie 数据,如下例所示:
document.cookie = "url=" + encodeURIComponent("http://c.biancheng.net/");
注意:运行上面的代码,您会发现 Cookie 并没有创建,这是因为 Cookie 是用来与服务器进行交互的,所以要成功创建 Cookie 需要借助服务器环境。
Cookie 并不会一直存在,默认情况下,Cookie 的生命周期就是浏览器的会话周期,即用户关闭浏览器后,Cookie 就会失效。 如果想要延长 Cookie 的生命周期,您可以使用 max-age 属性来指定 Cookie 可以存在的时间(单位为秒),默认为 -1,即关闭浏览器后失效。
如果将 max-age 设置为一个负数,则表示该 Cookie 为临时 Cookie,关闭浏览器后就会失效。如果设置为 0,则表示删除该 Cookie。若要将 Cookie 的生命周期设置为 30 天的话,则可以像下面这样:
document.cookie = "url=http://c.biancheng.net/; max-age=" + 30*24*60*60;
此外,您也可以使用 expires 属性来指定 Cookie 失效的具体日期(GMT/UTC 格式),如下所示:
document.cookie = "url=http://c.biancheng.net/; expires=Sun, 31 Dec 2017 12:00:00 UTC;";
提示:通过为 Cookie 设置生命周期,不仅可以延长 Cookie 存在的时间,还可以让 Cookie 提前失效。
读取(获取) Cookie 同样使用
document.cookie
即可,该属性会返回一个字符串,字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息,例如
url=http://c.biancheng.net/; course=JavaScript
。为了获取单个 Cookie 的值,我们可以通过 split() 函数将包含 Cookie 信息的字符串拆分为数组,然后再获取某个 Cookie 的值,示例代码如下:
修改或更新 Cookie 值的唯一方法就是创建一个同名的 Cookie,来替换要修改的 Cookie。
删除 Cookie 与修改 Cookie 类似,只需要重新将 Cookie 的值设置为空,并将 expires 属性设置为一个过去的日期即可,
// 创建一个 Cookie
document.cookie = "url=http://c.biancheng.net/; path=/; max-age=" + 30*24*60*60;
// 删除这个 Cookie
document.cookie = "url=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
也可通过将 max-age 属性设置为 0 来删除 Cookie。
Cookie是保存在客户端磁盘上的,所以不宜占据太多磁盘空间。同时,Cookie是绑定在特定域名上的。当设定了一个Cookie之后,再给创建它的域名发一个请求时,还会包含该Cookie。所以对Cookie的限制是对每个域来说的。但各个浏览器也有不同:
IE6及以下每个域名最多包含20个Cookie;
IE7及以上每个域名最多50个Cookie;
Firefox每个域名最多50个Cookie;
Opera下每个域名最多30个Cookie;
Sarafi和Chrome对每个域的Cookie数目没有严格限制。
每个Cookie最大是4096B(加减一)。即对于大多数浏览器来说,Cookie大小是4096个字节,而对于少数浏览器,有的是4097B,而有的是4095B.因此为了浏览器兼容性,最好将Cookie大小限制在4095B之内。
localStorage 是只读的。数据存储也是跨浏览器会话。localStorage 类似于sessionStorage。区别在于,数据存储在 localStorage 是无期限的,而当页面会话结束——也就是说当页面被关闭时,数据存储在 sessionStorage 会被清除 。
// 增加了一个 localStorage ‘myCat’ 数据项
localStorage.setItem('myCat', 'Tom');
// 读取 localStorage ‘myCat’ 数据项
let cat = localStorage.getItem('myCat');
// 移除 localStorage ‘myCat’ 数据项
localStorage.removeItem('myCat');
// 移除所有的 localStorage 数据项
localStorage.clear();
hasOwnProperty()
方法检查对象自身属性中是否具有指定的属性,返回一个布尔值。换句话说就是检查 localStorage 中存储的数据里是否保存某个值。
Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3