BOM操作

最新推荐文章于 2024-04-03 06:08:24 发布

lzw995189944

最新推荐文章于 2024-04-03 06:08:24 发布

阅读量311

点赞数

文章标签： bom

本文链接：https://blog.csdn.net/lzw995189944/article/details/121804155

版权

本文详细介绍了BOM（Browser Object Model）在浏览器窗口操作中的关键作用，包括window对象的全局特性、原生对象和方法，以及DOM与BOM的区别。重点讲解了四种打开新链接的方式及其原理，适合了解浏览器窗口管理和链接控制的开发者阅读。

摘要由CSDN通过智能技术生成

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>

<title>打开新链接方式总结</title>

/*打开新链接方式总结：

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>

function open1(){

window.open("http://tmooc.cn","_self");

}

</script>

<h3>2. 在当前窗口打开，可后退</h3>

<button onclick="open2()">click me</button>

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>

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>

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", "自定义窗口名")

lzw995189944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM操作

BOM: Browser Object Model1. 什么是:专门操作浏览器窗口和软件的一套对象和方法的统称。2. 何时:今后只要想操作浏览器窗口或获取浏览器软件的信息，都用bom3. DOM 和BOM差别:(1). DOM专门负责操作网页范围内的一切内容(2). BOM专门负责操作网页范围以外，浏览器窗口或浏览器软件中的一切内容4. 问题:没有标准！有严重的兼容性问题！5. 包括:window, location, history, naviga...
复制链接

扫一扫