BOM: Browser Object Model
1. 什么是: 专门操作浏览器窗口和软件的一套对象和方法的统称。
2. 何时: 今后只要想操作浏览器窗口或获取浏览器软件的信息,都用bom
3. DOM 和 BOM差别:
(1). DOM专门负责操作网页范围内的一切内容
(2). BOM专门负责操作网页范围以外,浏览器窗口或浏览器软件中的一切内容
4. 问题: 没有标准!有严重的兼容性问题!
5. 包括:
window, location, history, navigator, document, screen, event
6. window对象3大角色:
(1). 代替ES标准中的global充当全局作用域对象
所有直接声明的全局变量和全局函数,都默认保存在window对象中:
(2). 保存了所有"原生"的对象和方法:
a. 原生: 不需要下载任何第三方东西,就可直接使用的对象和方法。
b. 包括: ES+DOM+BOM
c. 比如: window.Array, window.document, window.alert...
(3). 代表当前正在打开的这个浏览器窗口:
a. window可获得当前窗口的大小: 2组
1). 完整窗口大小:
window.outerWidth
window.outerHeight
2). 仅文档显示区内部大小:
window.innerWidth
window.innerHeight
b. 打开和关闭窗口:
window.open()
window.close()
7. 打开新链接共有: 4种情况:
(1). 在当前窗口打开,可后退
a. HTML: <a href="url" target="_self">
b. js: window.open("url", "_self")
(2). 在当前窗口打开,禁止后退
a. js:location.replace("新url")
(3). 在新窗口打开,可同时打开多个
a. HTML: <a href="url" target="_blank">
b. js: window.open("url", "_blank");
(4). 在新窗口打开,只能打开一个
a. HTML: <a href="url" target="自定义窗口名">
b. js: window.open("url", "自定义窗口名");
(5). 原理:
a. 每个窗口在内存中都有一个唯一的窗口名(我们看不见)
b. 浏览器规定,相同名称的窗口,只能打开一个。如果硬要打开第二个同名窗口,则新同名窗口会覆盖旧同名窗口。
c. 如何给窗口起名:
1). <a href="url" target="任意自定义窗口名">
2). window.open("url", "任意自定义窗口名")
d. 结果: 所有窗口都有一个"window.name"属性,用来记录当前窗口的窗口名。
所以,我们自己在起变量名时,最好不要用"name"
e. 预定义窗口名:
_self: 表示用当前窗口自己的名字,作为新打开的窗口的名字。结果,新打开的同名窗口,会覆盖当前窗口自己。
_blank: 表示不指定任何窗口名,浏览器就会在底层自动为每个窗口随机分配窗口名。因为随机分配的窗口名肯定不重复!所以,可反复打开多个!
(6). 示例: 打开链接四种方式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>打开新链接方式总结</title> <script> /*打开新链接方式总结: 1. 在当前窗口打开,可后退 2. 在当前窗口打开,不可后退 3. 在新窗口打开,可打开多个 4. 在新窗口打开,只能打开一个 */ </script> </head> <body> <h3>1. 在当前窗口打开,可后退</h3> <a href="http://tmooc.cn" target="_self">click me</a><br/> <button onclick="open1()">click me</button> <script> function open1(){ window.open("http://tmooc.cn","_self"); } </script> <h3>2. 在当前窗口打开,可后退</h3> <button onclick="open2()">click me</button> <script> function open2(){ location.replace("http://tmooc.cn"); } </script> <h3>3. 在新窗口打开,可同时打开多个</h3> <a href="http://tmooc.cn" target="_blank">click me</a><br/> <button onclick="open3()">click me</button> <script> function open3(){ window.open("http://tmooc.cn","_blank"); } </script> <h3>4. 在新窗口打开,只能打开一个</h3> <a href="http://tmooc.cn" target="tmooc">click me</a><br/> <button onclick="open4()">click me</button> <script> function open4(){ window.open("http://tmooc.cn","tmooc") } </script> </body> </html> 运行结果:
|
BOM:
1. window:
(1). 获得窗口大小:
a. 获得完整窗口大小:
window.outerWidth和window.outerHeight
b. 获得文档显示区大小:
window.innerWidth和window.innerHeight
(2). 打开和关闭窗口:
window.open()和window.close()
2. 打开新链接4种方式:
(1). 在当前窗口打开,可后退
a. html: <a href="url" target="_self">
b. js: window.open("url", "_self");
(2). 在当前窗口打开,禁止后退
a. js: location.replace("新url")
(3). 在新窗口打开,可同时打开多个
a. html: <a href="url" target="_blank">
b. js: window.open("url", "_blank");
(4). 在新窗口打开,只能打开一个
a. html: <a href="url" target="自定义窗口名">
b. js: window.open("url", "自定义窗口名")