JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

最新推荐文章于 2024-06-07 23:26:45 发布

是小鞠同学呀

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量109

点赞数

分类专栏： javascript 文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/weixin_63078247/article/details/128090886

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

3.1 浏览器对象模型

3.1.1 浏览器对象模型

BOM 是浏览器对象模型的简称。JavaScript 将整个浏览器窗口按照实现的功能不同拆分成若干个对象

一个完整的 BOM 主要包括 window 对象、history 对象、location 对象和 document 对象等
在这里插入图片描述

3.2 window 对象

3.2.1 window 对象的常用属性及方法

window 对象处于对象模型的第一层，对于每个打开的窗口系统都会自动将其定义为window 对象

window 对象常用属性

属性	含义
document	窗口中当前显示的文档对象
history	history 对象保存窗口最近加载的 URL
location	当前窗口的 URL
status	状态栏文本

window 对象常用方法

方法	说明
prompt	显示可提示用户输入的对话框
alert	显示带有一个提示消息和一个确定按钮的警示框
confirm	显示一个带有提示信息、确定和取消按钮的确认框
close	关闭浏览器窗口
open	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout	在设定的毫秒数后调用函数或计算表达式
setInterval	按照设定的周期（以毫秒计）来重复调用函数或表达式
clearInterval	取消重复设置，与setInterval对应

3.2.2 使用window对象创建对话框

alert() 方法弹出警告对话框

prompt() 方法创建提示对话框

confirm() 方法创建确认对话框

3.2.3 使用window对象操作窗口

window对象的 open() 方法和 close() 方法用于打开和关闭窗口

名称	说明
height、width	窗口文档显示区的高度、宽度，单位为像素
left、top	窗口与屏幕左边、顶端的距离，单位为像素

3.2.4 使用window对象执行计时事件

setTimeout() 方法会在指定的时间执行指定的代码并退出。setInterval() 方法会根据设置的时间间隔反复执行指定的代码，直至程序结束或利用clearInterval() 方法取消


<body>
  <script type="text/javascript">
    setTimeout("alert('hello')",2000);
  </script>
</body>

requestAnimationFrame() 方法是浏览器用于定时循环操作的一个接口，类似于 setTimeout，主要用途是按帧对网页进行重绘

requestID = window.requestAnimationFrame(callback);

3.3 history 对象和 location 对象

3.3.1 history对象

history对象保存了当前浏览器窗口中打开页面的一个历史记录列表，使用 history对象可以将当前浏览器页面跳转到某个曾经打开过的页面

方法	描述
back()	后退一个页面，相当于浏览器后退按钮
forward()	前进一个页面，相对于浏览器前进按钮
go()	打开一个指定位置的页面

可以使用 history.go(-1) 和 history.go(1) 代替 histroy.back() 和 history.forward()

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏

3.3.2 location对象

location对象用于管理当前打开窗口的URL信息，相当于浏览器的地址栏

名称	描述
href 属性	返回或设置当前页面的 URL
hostname 属性	返回 Web 主机的域名
port 属性	返回 Web 主机的端口（80 或 443）
protocol 属性	reload() 方法
reload() 方法	hostname 属性
assign() 方法	加载新的文档

3.4 screen对象和navigator对象

3.4.1 screen对象

window.screen 对象包含了用户屏幕的相关信息，在编写时可以不使用 window前缀

属性	描述
availWidth	返回显示屏幕的可用宽度（除 Windows 任务栏之外）
availHeight	返回显示屏幕的可用高度（除 Windows 任务栏之外）
colorDepth	返回目标设备或缓冲器上的调色板的比特深度
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）
width	返回显示器屏幕的宽度
height	返回显示器屏幕的高度

3.4.2 navigator对象

navigator对象包含了浏览器的有关信息

navigator 对象的实例是唯一的，可以用 window 对象的 navigator 属性来引用它

方法	描述
javaEnabled()	规定浏览器是否启用 Java
taintEnabled()	规定浏览器是否启用数据污点，仅适用于 IE 浏览器（Data Tainting）

navigator对象的常用属性如下

属性	描述
appCodeName	返回浏览器的代号
appMinorVersion	返回浏览器的次级版本
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
browserLanguage	返回当前浏览器的语言
cookieEnabled	返回浏览器中是否启用 cookie 的布尔值
cpuClass	返回浏览器系统的 CPU 等级
onLine	返回系统是否处于联机模式的布尔值
platform	返回运行浏览器的操作系统平台
systemLanguage	返回操作系统使用的默认语言
userAgent	返回由客户机发送服务器的 user-agent 头部的值
userLanguage	返回操作系统的自然语言设置

由于 navigator 会误导浏览器检测，所以可以使用对象检测来嗅探不同的浏览器。但不同的浏览器支持不同的对象，因此对于不同的浏览器，要使用不同的对象来检测

集合	描述
plugins[ ]	返回对文档中所有嵌入式对象的引用
plugins[ ]	该集合是一个 plugin 对象的数组，其中的元素代表浏览器已经安装的插件。plugin对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表
plugins[ ]	虽然 plugins[ ] 数组是由 IE4 定义的，但是在 IE4 中它却总是空的，因为 IE4 不支持插件和 plugin 对象