操作BOM(Browser Object Model)

一、使用window对象
在浏览器中window对象既是JS访问浏览器窗口的接口,又是JS的全局对象。
1、访问浏览器窗口
浏览器对象简单说明:
window:客户端JavaScript中的顶层对象。每当<body>或<frameset>标签出现时,window对象就会被自动创建。
navigator:包含客户端有关浏览器的信息
screen:包含客户端有关显示屏的信息
history:包含浏览器窗口访问过的URL信息
location:包含当前网页文档的URL信息
document:包含整个HTML文档,可被用来访问文档内容,及其所有页面元素
2、全局作用域
JavaScript代码都在全局上下文环境中运行,所有全局变量都可以视为window对象的属性
3、使用系统测试方法
window对象提供了3个人机交互的接口方法,方便开发人员对JS脚本进行测试
alert():简单的提示对话框
confirm():简单的提示对话框,包含确定和取消两个按钮
prompt():弹出提示对话框,可以接收用户输入的信息
4、打开和关闭窗口
window.open(URL,name,features,replace)
还有个close()方法关闭由这个脚本创建的窗口
5、使用框架集(略)
6、控制窗口位置
window对象的screenLeft和screenTop属性可以读取或设置窗口的位置。Firefox支持使用window对象的screenX和screenY属性进行相同的操作
7、控制窗口大小
使用window对象的innerWidth、innerHeight、outerWidth和outerHeight4个属性可以确定窗口大小
8、使用计时器(不能包含复杂代码,否则容易不准时,单线程异步执行)
window对象包含4个定时器专用方法

  
  
方法 说明
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout() 在指定毫秒数后调用函数或计算表达式
clearInterval() 取消setInterval定时器对象
clearTimeout() 取消clearTimeout定时器对象

二、使用navigator对象
navigator对象包含了浏览器的基本信息,如名称、版本和系统等。通过navigator引用该对象,并利用它的属性来读取客户端基本信息
1、检测浏览器类型和版本号
使用userAgent属性
2、检测客户操作系统
navigator.userAgent
3、检测插件
非IE:navigator的plugins属性
IE:使用ActiveXObject

三、使用location对象
location对象存储当前页面与位置(URL)相关信息,表示当前显示文档的Web地址
location的属性如下

  
  
属性 说明
href 声明了当前显示文档的完整URL,把该属性设置为新的URL会使浏览器读取并显示新URL的内容
protocol 声明URL的协议部分,包括后缀的冒号
host 声明了当前URL的主机名和端口部分
hostname 声明了当前URL的主机名
port 声明了当前URL的端口部分
pathname 声明了当前URL的路径部分
search 声明了当前URL的查询部分,包括前导问号。
hash 声明了当前URL中锚部分包括前导符(#)

location对象还有两个方法:reload()和replace()
reload():可以重新装载当前文档
replace():可以装载一个新文档而无须为它创建一个新的历史记录。

四、使用history对象
history对象存储浏览器窗口的浏览历史。
history对象允许使用length属性读取列表中URL的个数,并可以调用back(),forward()和go()方法访问数组中的URL。

五、使用screen对象(略)
六、使用document对象(略)

猜你喜欢

转载自blog.csdn.net/the_light_/article/details/79316503