BOM 是个什么玩意!
1.1 概述
1.1.1 什么是 BOM
BOM(Browser Object Model 即:浏览器对象模型),描述与浏览器进行交互的方法和接口。
1.1.2 BOM 的组成
Window
:窗口对象,代表整个浏览器窗口,是顶级的对象
Navigator
:浏览器对象,代表浏览器当前的信息
Screen
:显示器屏幕对象,代表用户的屏幕信息
History
:历史记录对象,代表浏览器的历史信息
Location
:地址栏对象,代表浏览器当前的地址信息
1.2 Windows 对象
所有浏览器都支持 window 对象,它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性;全局函数是 window 对象的方法;甚至 HTML DOM 的 document 也是 window 对象的属性之一。
1.2.1 常用方法
Window对象不需要创建可以直接使用,Window的方法可以直接使用。
方法 |
描述 |
---|---|
alert( ) |
弹出警告框 |
prompt( ) |
弹出可输入对话框 |
confirm( ) |
弹出确认框 |
colse( ) |
关闭当前窗口 |
open(URL) |
打开新窗口 |
setTimeout(“JS 代码”,time) |
一次性倒计时 |
clearTimeout(id) |
取消 id 所代表的一次性倒计时 |
setInterval(“JS 代码”,time) |
循环倒计时 |
clearInterval(id) |
取消 id 所代表的循环性倒计时 |
1.2.2 属性
属性 |
描述 |
---|---|
Navigator |
浏览器对象 |
Screen |
显示器屏幕对象 |
History |
历史记录对象 |
Location |
地址栏对象 |
document |
获取 DOM 对象 |
1.2.3 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("弹出框");
prompt("输入");
confirm("可以确认");
</script>
</body>
</html>
1.3 History 对象
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制,只能拿到当前的浏览记录,不能拿到所有的历史记录
1.3.1 常用方法
方法 |
描述 |
---|---|
back() |
加载历史记录中的前一个网页 |
forward() |
加载历史记录中的后一个网页 |
go(param) |
加载历史记录中的一个网页, 正数前进,负数后退 |
1.3.2 属性
属性 |
描述 |
---|---|
length |
history 中的记录个数 |
1.3.3 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("history 中的记录个数: " + window.history.length)
</script>
</body>
</html>
1.4 Location 对象
代表浏览器当前的地址信息,通过Location我们可以获取或者设置当前的地址信息。
1.4.1 常用方法
方法 |
描述 |
---|---|
reload() |
刷新网页 |
assign(URL) |
跳转到指定的 URL,当前页面会转为新页面内容,可以点击后退返回上一个页面 |
replace(URL) |
通过加载 URL 替换当前窗口页面,前后两个页面共用一个窗口,不能后退返回上一页 |
1.4.2 属性
属性 |
描述 |
---|---|
hostname |
返回 web 主机的域名 |
pathname |
返回当前页面的路径和文件名 |
port |
返回 web 主机的端口(80 或 443) |
protocol |
返回所使用的 web 协议(http 或 https) |
href |
获取/设置地址 |
1.4.3 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert(location.href)
</script>
</body>
</html>
1.5 Navigator 对象
代表浏览器当前的信息,通过Navigator我们可以获取用户当前使用的是什么浏览器。
1.5.1 属性
属性 |
描述 |
---|---|
appCodeName |
浏览器代号 |
appName |
浏览器名称 |
appVersion |
浏览器版本 |
cookieEnabled |
启用Cookies |
platform |
硬件平台 |
userAgent |
用户代理 |
systemLanguage |
用户代理语言 |
1.5.2 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("用户代理: " + navigator.userAgent)
</script>
</body>
</html>
注意 来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为: ♞ navigator 数据可被浏览器使用者更改 ♞ 一些浏览器对测试站点会识别错误 ♞ 浏览器无法报告晚于浏览器发布的新操作系统
1.6 Screen 对象
用户的屏幕信息
1.6.1 属性
属性 |
描述 |
---|---|
availWidth |
可用的屏幕宽度 |
availHeight |
可用的屏幕高度 |
1.6.2 示例
<!DOCTYPE html>
<html>
<body>
<script>
alert("屏幕宽度: " + screen.availWidth + "n屏幕高度: " + screen.availHeight)
</script>
</body>
</html>
- 如何在ASP.NET 2.0中定制Expression Builders
- codeproject 几篇asp.net文章
- .NET Web 自动化测试工具
- Javascript数组常用方法[包含MS AJAX.NET的prototype扩展方法]示例
- 10步骤优化SQL Server 数据库性能
- 漫谈语音合成之Char2Wav模型
- [基础]Javascript中的继承示例代码
- javascript天生就具备类似c#中的"委托"功能
- 使用MonoDevelop开发跨平台的应用程序
- Pycharm使用技巧总结
- [基础]电话/手机常见验证的Javascript示例
- 按照Web Service方式调用WCF服务的问题
- 利用Lucene打造站内搜索引擎的思路
- Lucene.Net 删除索引DeleteDocuments的注意事项
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法