JavaScript 笔记(11)- BOM(window、location、history)

原创 乘风逐月 随笔 JavaScript 161阅读 2018-05-18 11:54:10 举报

一、window 对象

BOM 的核心是 window 对象,它表示浏览器的一个实例。window 对象有双重角色,既是 JavaScript 访问浏览器的一个接口,又是 ECMAScript 规定的 Global 对象。

1.全局作用域

window 对象是在 ECMAScript 中作为 Global 对象的角色,所以在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。
注:定义全局变量与直接在window对象上定义属性的差别:
a. 全局变量不能通过 delete 操作符删除,而 window 对象上定义的属性可以。
b. 尝试访问为声明的对象会报错,但是通过查询window对象的属性则可以判断变量是否声明。

2.窗口关系及框架

a. 如果页面中包含框架,那么每个框架都拥有自己的 window 对象,并且保存在 frames 集合中。在 frames 集合中,可以通过数值索引(从 0 开始)或者框架的 name 属性来访问相应的 window 对象。

b. top 对象始终指向最高(最外)层的框架,即浏览器器窗口。使用 top 可以正确的访问另一个框架。对于在一个框架中编写的任何代码来说,window 对象都指那个框架的特定实例,而非最高框架。

c. parent(父)对象始终指向当前框架的直接上层框架。没有框架的情况下,parent 等于 top,且都等于 window。

d. self 对象始终指向window。

e. top,parent,self 都是 window 的属性,可以通过 window. 来访问。

f. 每个 window 对象都包含自己的原生构造函数,跨框架的构造函数并不想等。

3.打开窗口

window.open()方法可以打开新窗口也可以导航到一个特定URL。这个方法接受四个参数:要加载的URL,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录中当前页面的布尔值。

a. 如果传递了第二个参数,而且是已有窗口或框架的名称,那就会在具有该名称的窗口或框架中加载第一个参数指定的URL。若是没有该名称的框架,则会打开新窗口并将其命名为该参数。可以为 _self,_parent,_top,_blank 。

b. 如果第二个参数不是一个已有窗口或框架,那会根据第三个参数设置新窗口。不打开新窗口会忽略第三个参数。第三个参数的窗口特性有:

设置说明
fullscreenyes/no表示浏览器窗口是否最大化
height数值表示新窗口的高度,不能小于100
width数值表示新窗口的宽度,不能小于100
top数值表示新窗口的上坐标,不能小于0
left数值表示新窗口的左坐标,不能小于0
locationyes/no表示是否在浏览器中显示地址栏,取决于浏览器
menubaryes/no是否显示菜单栏,默认 no
toolbaryes/no是否显示工具栏,默认no
statusyes/no是否显示状态栏,默认no
resizableyes/no是否可以通过拖动浏览器边框改变大小,默认no
scrollbarsyes/no是否允许窗口出现滚动条

window.open() 会返回新窗口的引用。 newWin 引用对象与其他window 对象相似。newWin.close() 可以关闭新窗口。
新窗口 window 有一个 opener 属性,保存打开它的原始窗口, newWin.opener == window。

4.间歇调用和超时调用

JavaScript 是单线程语言,但允许通过设置超时值和间歇值来调度代码在特定的时刻执行。
(1)超时调用 setTimeout()
setTimeout()接受两个参数:要执行的代码和以毫秒表示的时间。
a. 第一个参数可以是一个函数,也可以是一个包含 JavaScript 代码的字符串。
b. 第二参数表示等待多长时间再执行代码的毫秒数。但经过该时间后指定代码不一定会执行。

注:JavaScript是一个单线程序的解释器,因此一定的时间只能执行一段代码。为了控制要执行的代码,就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout() 的第二个参数会告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的,那么代码会立即执行;如果不是空的,那么要等待前面的任务代码执行完毕后在执行。

调用 setTimeout() 之后,会返回一个数值 ID,表示超时调用。这个超时调用ID是执行计划代码的唯一标识符,可以通过它来取消超时调用。使用clearTimeout(超时调用ID)方法可以在代码执行前取消超时调用。
(2)间歇调用 setInterval()
setInterval() 使用与超时调用类似。该方法会按照指定时间间隔重复执行代码,知道间歇调用被取消或页面被卸载。取消间歇调用的方法是:clearTnterval(间歇调用ID)。
注:最好使用超时调用来模拟间歇调用。

5.系统对话框

浏览器通过 alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系,也不包含HTML,它们的外观由操作系统及浏览器设置决定,而不是由 css 决定。通过这几个方法打开的对话框都是同步和模态的,即显示这些对话框时代码就会停止执行,而关掉这些对话框后代码又会恢复执行。

(1)alert():对于Object类型,会调用它们的toString(),再显示值

(2)confirm():该方法返回一个布尔值:true表示点击了确定,false表示单击了取消

(3)prompt():该方法接受两个参数:第一个参数是显示给用户的文本,第二个参数是文本域中默认显示的内容。点击确定该方法会返回文本域的值,点击取消该方法或关闭了对话框会返回null

二、location 对象

location 对象提供了与当前窗口中加载的文档有关的信息及导航功能。location 对象既是 window 对象的属性,也是 document 的属性,window.location 和 document.location 引用的是同一个对象

1. location 解析 URL

location 对象可以解析 URL 为独立片段,开发人员可以通过不同属性访问这些片段

属性名示例说明
href'http:/www.wrox.com'返回当前页面的完整URL,location.toString()方法也返回这个值
host'www.wrox.com:80'返回服务器名称和端口号
hostname'www.wrox.com'返回不带端口号的服务器名称
hash'#contents'返回URL中的hash(#号后跟0或多个字符串),如果URL不包含散列,则返回空字符串
pathname'/s/'返回URL中的目录和文件名
port'8080'返回URL中指定的端口号
protocol'http:'返回页面的协议
search'?id=123'返回URL的查询字符串,以?开头
2.页面跳转

使用location对象可以通过很多方法来进行页面的跳转。
a. assign():接受一个URL,可以立即打开新URL
b. window.location
c. 修改location属性,页面都会以新的URL重新加载
以上方法都会在浏览器的历史记录中生成一条新的记录
d. replace():接受一个URL,调用该方法后,用户不能回到前一个页面
e. reload():重新加载当前页面。接受一个布尔值,传递true则从服务器重新加载,否则则会从浏览器缓存中重新加载。位于reload()之后的代码可能不会执行,取决于网络延迟或系统等因素。所以该方法最好放在代码最后一行。

三、history 对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。history 是 window 的属性,所以每个浏览器窗口,每个标签页乃至每个框架,都有自己的 history 对象与特定的 window 对象关联。
出于安全考虑,开发人员无法得知用户浏览过的URL,但可以通过历史记录列表实现页面的前进和后退。

1. go()方法

go()方法可以在用户的历史记录中任意跳转页面。该方法接受一个参数,表示向前或向后跳转的页面数的一个整数值。负数表示向后跳转页面(类似单击浏览器的“后退”按钮),正数表示向前跳转页面(类似单击浏览器的“前进”按钮)。

2.back()

后退页面,类似单击浏览器的“后退”按钮

3.forward()

前进页面,类似单击浏览器的“前进”按钮

4.length属性

保存着历史记录的数量,等于0可以判断是否是打开的第一个页面。

5、历史状态管理

history.pushState()方法可以管理页面状态,能够在不加载新页面的情况下改变浏览器的 URL。该方法接受三个参数:状态对象、新状态的标题、可选的相对URL。
执行 pushState() 方法后,新的状态信息会被加入历史状态栈,而浏览器地址栏也会变成新的相对 URL。此时的后退按钮可以使用,按下后退按钮,会触发 window 对象的 popstate 事件。
popstate 事件对象有一个 state 属性,这个属性包含这当初传给 pushState() 的状态对象。然后把页面重置为状态对象中的数据,因为浏览器不会自动更换。
要更新当前状态可以使用 replaceState() 方法,传入的参数与 pushState() 的前两个参数相同。调用这个方法不会再历史记录栈中创建新的状态,只会重写当前状态。

四、navigator 对象

属性/方法说明
appCodeName浏览器的名称,通常都是 Mozilla,即使非Mozilla浏览器也是如此
appName完整的浏览器名称
appVersion浏览器版本
cookieEnabled表示cookie是否启用
onLine浏览器是否连接到了因特网
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复