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>
- 我的第一次ChIP-seq实践
- SparkStreaming窗口操作
- 史上最全Git使用手册
- 我所理解的 PHP Trait
- 算法 | 数据结构常见的八大排序算法
- 高通量数据下载还能这样操作?
- ofbiz实体引擎(八) 创建表
- ofbiz实体引擎(七) 检查数据源
- ofbiz实体引擎(六) GenericHelper的初始化创建
- ofbiz实体引擎(五) ModelGroupReader
- HBitcoin:C#高级比特币钱包库 - 保护您的财产安全
- ofbiz实体引擎(四) ModelReader的作用
- ofbiz实体引擎(三) GenericDelegator实例化的具体过程
- 机器学习实战 | 第五章:模型保存(持久化)
- 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 数组属性和方法
- 使用Zookeeper分布式部署PHP应用程序
- pytorch判断是否cuda 判断变量类型方式
- Keras搭建自编码器操作
- python程序如何进行保存
- Android Q之气泡弹窗的实现示例
- Python with语句用法原理详解
- pytorch 计算ConvTranspose1d输出特征大小方式
- Keras中 ImageDataGenerator函数的参数用法
- CI框架网页缓存简单用法分析
- 掌握PHP垃圾回收机制详解
- PHP基于面向对象封装的分页类示例
- PHP获取对象属性的三种方法实例分析
- PHP7内核之Reference详解
- PHP基于PDO扩展操作mysql数据库示例
- php实现的PDO异常处理操作分析