BOM: Browser Object Model
// 浏览器 对象 模型
1. 什么是BOM: 专门操作浏览器窗口的一套对象和函数的集合
2. 何时: 今后只要希望操作浏览器的窗口时或获取浏览器的信息时，都用BOM
3. 最大的问题: BOM没有标准！兼容性极差！
4. BOM包括一系列对象:
window
history location navigator document screen event
历史记录 地址栏 基本信息 网页 屏幕 事件
5. window对象: 3个角色
(1). 代替ES标准中的global对象，充当全局作用域对象
凡是自己定义的全局变量和函数都是默认保存在window对象中
(2). 保存了ES、DOM和BOM的所有的对象和函数
(3). 代表了当前浏览器窗口:
a. 获得窗口大小:
1). 完整窗口大小: window.outerWidth window.outerHeight
外部
2). 仅文档显示区部分的大小: window.innerWidth window.innerHeight
内部
b. 可滚动窗口中的网页:
1). window.scrollTo(0, 纵向滚动到的位置)
滚动
2). window.scrollBy(0, 纵向滚动过的距离)
c. 还可打开和关闭窗口:
1). window.open("http://tmooc.cn","_blank");
2). window.close()
打开链接4种方式:
(1). 在当前窗口打开新链接，可后退
a. html: <a href="http://tmooc.cn" target="_self">
b. js: window.open("http://tmooc.cn", "_self")
(2). 在当前窗口打开新链接，禁止后退
a. js: location.replace("新url")
b. 禁止后退的原理: 请地址栏(location)，用新url地址，替换history中当前位置的旧地址
(3). 在新窗口打开新链接，可同时打开多个
a. html: <a href="http://tmooc.cn" target="_blank">
b. js: window.open("http://tmooc.cn", "_blank")
(4). 在新窗口打开新链接，同一个链接只能打开一个窗口
a. html: <a href="http://tmooc.cn" target="自定义窗口名">
b. js: window.open("http://tmooc.cn", "自定义窗口名")
c. 原因:
1). 其实我们打开的每个窗口，在浏览器内存中都有一个唯一的窗口名
2). 浏览器规定，相同窗口名的窗口只能打开一个
3). 新打开的同名窗口，会覆盖先打开的同名窗口
4). 窗口名默认保存在window.name属性中，所以我们自己起变量名时，一定要躲开"name"
5). 如果window.name属性为""的窗口，浏览器会自动分配随机窗口名
6). 其实a元素的target属性和window.open()第二个参数，是在给新窗口起名字！
7). 所以: 如果a元素的target或window.open()的第二个参数定义的是一个自定义窗口名，则这个窗口只能打开一个！
8). 预定义窗口名:
i. _self: 用当前窗口自己的名字作为新打开的窗口名，结果新窗口会覆盖当前窗口
ii. _blank: 不给新窗口指定窗口名，结果浏览器会为新窗口自动随机分配不重复的窗口名，所以可反复打开多个，都不会重名
(5). 示例: 四种打开新连接的方式总结
|
<html> <head> <meta charset="utf-8"/> <title>打开新链接方式总结</title> <script> /*打开新链接方式总结： 1. 在当前窗口打开，可后退 2. 在当前窗口打开，不可后退 3. 在新窗口打开，可打开多个 4. 在新窗口打开，只能打开一个 */ //1. 在当前窗口打开新链接，可后退 function open1(){ window.open("http://tmooc.cn","_self") } //2. 在当前窗口打开新链接，禁止后退 function open2(){ location.replace("http://tmooc.cn") } //3. 在新窗口打开新链接，同一个链接可打开多个 function open3(){ window.open("http://tmooc.cn","_blank") } //4. 在新窗口打开新链接，同一个链接只能打开一个 function open4(){ window.open("http://tmooc.cn","tmooc") } </script> </head> <body> <h3>1. 在当前窗口打开新链接，可后退</h3> <a href="http://tmooc.cn" target="_self">go to tmooc</a><br/> <a href="javascript: open1()">go to tmooc(js)</a> <h3>2. 在当前窗口打开新链接，禁止后退</h3> <a href="javascript: open2()">go to tmooc(js)</a> <h3>3. 在新窗口打开新链接，同一个链接可打开多个</h3> <a href="http://tmooc.cn" target="_blank">go to tmooc</a><br/> <a href="javascript: open3()">go to tmooc(js)</a> <h3>4. 在新窗口打开新链接，同一个链接只能打开一个</h3> <a href="http://tmooc.cn" target="tmooc">go to tmooc</a><br/> <a href="javascript: open4()">go to tmooc(js)</a> </body> |
7. history对象:
(1). 什么是: 浏览器内存中专门保存当前窗口打开后，成功访问过的url的历史记录栈(数组)
(2). 原理：
a. 每打开一个浏览器窗口，首先会将当前窗口的地址push()入history中保存
b. 在这个窗口中，每访问一个新url地址，就会将新url地址再次push()入history中保存
(3). 能否后退: 如果history中当前正在显示的url下方还有刚才访问过的旧的url，则浏览器可后退
(4). 只开放了一个函数: history.go(n)
a. history.go(-1) 后退一步
b. history.go(1) 前进一步
c. history.go(0) 刷新
(5). 示例: 步骤:
a. 先把每个页面中空的 <a href="javascript: "> 补齐
比如: 前进一步 <a href="javascript: history.go(1)">
前进二步 <a href="javascript: history.go(2)">
后退一步 <a href="javascript: history.go(-1)">
后退二步 <a href="javascript: history.go(-2)">
b. 运行9-1.html
c. 依次点页面中的2、3两个链接，目的让当前窗口的history中又三个地址的历史记录: 分别时1、2、3
d. 点击每个页面中的前进x步或后退x步链接，体会用代码实现前进后退
8. location:
地址
(1). 什么是: 专门保存当前浏览器正在打开的url信息的对象，同时还提供了页面跳转的相应方法
(2). 何时: 只要希望获得当前浏览器正在打开的url的信息或希望执行页面跳转操作时
(3). 如何:
a. 可分段获得当前正在打开的url的各个部分: (仅限于浏览器中，别的平台没有)
1). location.href 完整的url
2). locaiton.protocol 协议
3). location.host 主机名+端口号
4). location.hostname 主机名
5). location.port 端口号
6). location.pathname 相对路径名
7). location.search ?查询字符串
8). location.hash #锚点地址
b. 方法:
1). 也能实现在当前窗口打开,可后退:
location.href="新url"
2). 在当前窗口打开，禁止后退:
location.replace("新url")
3). 刷新: location.reload();
9. navigator:
(1). 什么是: 保存当前浏览器配置信息的对象
(2). 何时: 想获得浏览器的配置信息时
(3). 如何:
a. 获得浏览器已安装的插件信息:
1). navigator.plugins 集合中保存了当前浏览器已经安装的所有插件信息
浏览器 插件
2). 判断是否安装某个插件: 强行用插件完成名称访问plugins中的元素
如果navigator.plugins["完整插件名"]!==undefined 说明装了这个插件
否则说明没装这个插件
3). 示例: 判断是否安装了某个插件
|
//判断当前浏览器是否安装Chrome PDF Viewer插件 if(navigator.plugins["Chrome PDF Viewer"]!==undefined){ document.write(`<h3>已安装PDF插件，可以浏览PDF电子书</h3>`) }else{ document.write(`<h3>未安装PDF插件，<a href="javascript:;">点此下载安装</a></h3>`) } //判断当前浏览器是否安装Flash插件 if(navigator.plugins["Shockwave Flash"]!==undefined){ document.write(`<h3>已安装Flash插件，可以播放Flash动画</h3>`) }else{ document.write(`<h3>未安装Flash插件，<a href="javascript:;">点此下载安装</a></h3>`) } |
b.userAgent:
用户代理
浏览器
1). 包含浏览器的名称，版本号和内核信息
2). 何时: 判断一个浏览器是哪种浏览器的哪个版本时，都用userAgent