ch10 -- JavaScript 浏览器对象

JavaScript 浏览器对象

---

Window 对象是 BOM 的核心，Window 对象指当前的浏览器窗口。

Window 对象方法:

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
prompt()	显示可提示用户输入的对话框
confirm()	显示一段消息以及确认按钮和取消按钮的对话框
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
close()	关闭浏览器窗口
print()	打印当前浏览器窗口的内容
focus()	把键盘焦点给予一个窗口
blur()	把键盘焦点从顶层窗口移开
moveBy()	可相对窗口的当前坐标把对象移动指定的像素
moveTo()	把窗口的左上角移动到一个指定的坐标
relizeBy()	按照指定的像素调整窗口的大小
relizeTo()	把窗口的大小调整到指定的宽度和高度
scrollBy()	按照指定的像素值来滚动内容
scrollTo()	把内容滚动到指定的坐标
setInterval()	每隔指定的时间执行代码
setTimeout()	在指定的延迟时间后执行代码
clearInterval()	取消 setInterval() 的设置
clearTimeout()	取消 setTimeout() 的设置

window 对象属性：

属性	描述
closed	返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
document	对 Document 对象的只读引用
history	对 History 对象的只读引用
innerheight	返回窗口的文档显示区的高度
innerwidth	返回窗口的文档显示区的宽度
length	设置或返回窗口中的框架数量
location	用于窗口或框架的 Location 对象
name	设置或返回窗口的名称
Navigator	对 Navigator 对象的只读引用
opener	返回对创建此窗口的窗口的引用
outerheight	返回窗口的外部高度
outerwidth	返回窗口的外部宽度
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置
parent	返回父窗口
Screen	对 Screen 对象的只读引用
self	返回对当前窗口的引用，等价于 Window 属性
status	设置窗口状态栏的文本
top	返回最顶层的先辈窗口
window	window 属性等价于 self 属性，它包含了对窗口自身的引用
screenLeft ，screenTop ，screenX ，screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标

计时器

---

在 JavaScript 中，可以设置在指定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

计时器类型：

• 一次性计时器：仅在指定的延迟时间之后触发一次。
• 间隔性触发计时器：每隔一定的时间间隔就触发一次。
  计时器方法：

方法	说明
setTimeout()	指定的延迟时间之后执行代码
clearTimeout()	取消 setTimeout() 设置
setInterval()	每隔指定的时间执行代码
clearInterval()	取消 setInterval() 设置

setInterval()

setInterval() 计时器在执行时，从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码, 交互时间);

说明：

1. 代码 表示要调用的函数或要执行的代码串。
2. 交互时间 表示周期性执行或调用表达式之间的时间间隔，以毫秒计。

返回值：一个可以传递给 clearInterval() 从而取消对 “代码” 的周期性执行的值。

调用函数格式 (假设有一个 clock() 函数) :

setInterval("clock()", 1000)
// 或
setInterval(clock, 1000)

说明：设置一个计时器，每隔 100 毫秒调用 clock() 函数，并将时间显示出来。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的交互时间。

语法：

clearInterval(id_of_setInterval)

说明: ‘id_of_setInterval’ 是由 setInterval() 返回的 ID 值。

setTimeout()

setTimeout() 计时器，在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

语法:

setTimeout(代码, 延迟时间);

说明：

1. 代码 表示要调用的函数或要执行的代码串。
2. 延时时间 表示在执行代码前需等待的时间，以毫秒为单位。

要创建一个运行于无穷循环中的计数器，需要编写一个函数来调用其自身。

clearTimeout()

setTimeout() 和 clearTimeout() 一起使用，停止计时器。

语法:

clearTimeout(id_of_setTimeout)

说明：id_of_setTimeout 是由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

History 对象

---

History 对象记录了用户曾经浏览过的页面 (URL) ，并可以实现浏览器前进与后退相似导航的功能。

注意：从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的 History 对象与特定的 Window 对象关联。

语法：

window.history.[属性|方法]

注意：window 可以省略。

History 对象属性：

属性	描述
length	返回浏览器历史列表中的 URl 数量

History 对象方法：

方法	描述
back()	加载 history 列表中的上一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体的页面

返回上一个浏览的页面

back() 方法，加载 history 列表中的前一个 URL。

语法：

window.history.back();

注意：等同于点击浏览器的倒退按钮。

back() 相当于 go(-1) 。

window.history.go(-1);

返回下一个浏览的页面

forward() 方法，加载 history 列表中的下一个 URL。

如果页面倒退之后，再想回到倒退之前浏览的页面，就可以使用 forward() 方法。代码如下:

window.history.forward();

注意：等价点击前进按钮。

forward() 相当于 go(1) 。

window.history.go(1); 

返回浏览历史中的其他页面

go() 方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。

语法：

window.history.go(number);

参数：

number	说明
1	上一个，go(1) 等价于 forward()
0	当前页面
-1	上一个，go(-1) 等价于 back()
其它	要访问的 URL 在 history 列表中相对于当前页面的位置

浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：

window.history.go(-2);

注意：和在浏览器中单击两次后退按钮操作一样。

同理，返回当前页面之后浏览过的第三个历史页面，代码如下：

window.history.go(3);

Location 对象

---

location 用于获取或设置窗体的 URL ，并且可以用于解析 URL 。

语法:

location.[属性|方法]

location 对象属性：

属性	描述
href	设置或返回完整的 URL
protocol	设置或返回当前 URl 的协议
host	设置或返回主机名和当前 URl 的端口号
hostname	设置或返回当前 URL 的主机名
port	设置或返回当前 URL 的端口号
pathname	设置或返回当前 URL 的路径部分
search	设置或返回从问号（?）开始的 URl（查询部分）
hash	设置或返回从井号（#）开始的 URl（锚）

location 对象方法:

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

Navigator 对象

---

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

对象属性：

属性	描述
appName	返回浏览器的名称
appCodeName	浏览器代码名的字符串表示
appVersion	返回浏览器的平台和版本信息
platform	返回运行浏览器的操作系统平台
userAgent	返回有客户及发送服务器的 user-agent 头部的值

userAgent

返回用户代理头的字符串表示 (就是包括浏览器版本信息等的字符串) 。

语法：

navigator.userAgent

几种浏览的 user_agent ，像 360 的兼容模式用的是 IE 的内核，极速模式用的是 chrom 的内核。

使用 userAgent 可以用来判断使用的是什么浏览器。

Screen 对象

---

Screen 对象用于获取用户的屏幕信息。

语法：

window.screen.属性

对象属性:

属性	描述
height	屏幕的高度，单位：像素
width	屏幕的宽度，单位：像素
availHeight	窗口可以使用的屏幕高度，单位：像素
availWidth	窗口可以使用的屏幕宽度，单位：像素
colorDepth	用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）
pixelDepth	用户浏览器表示的颜色位数，通常为 32 位（每像素的位数）

屏幕分辨率高度和宽度

window.screen 对象包含有关用户屏幕的信息。

1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
   注意:
3. 单位以像素计。
4. window.screen 对象在编写时可以不使用 window 这个前缀。

幕可用高和宽度

1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。

注意：不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。