BOM对象

52jyhcc

396
阅读

0
评论

2021年08月05日00:46:13 0 396

window对象

BOM对象的核心，表示一个浏览器的实例

相当于JS中的global对象，同时又实现了浏览器的一些功能。

所有直接使用的方法都是window的属性，如parseInt alert等

全局作用域●

在全局作用域下声明变量相当于为window对象增加了属性

即var a=1 window.a=1

区别：使用声明语句声明的变量不可以使用delete删除，但是直接在window增加属性可以被删除。

多个window对象

一般情况下一个页面只有一个window对象。

但是如果页面中存在框架(frame)的时候，每个框架都将拥有自己的window对象。

所有的框架都保存在frames对象中，它是一个伪数组。访问对应的框架可以使用frame[name]或者frame[index]

所有的window对象都有name属性，表示当前框架的名字，对应frame标签中的name属性。

top，parent和self

window对象上有三个特殊的属性：top parent self，用于存在多个框架的时候相互访问

top:始终指向最外层的window对象

parent:指向当前window对象的上一层（如果不存在框架，top和parent相等）

self：当前的window对象，没有实际的意义，只是为了和top，parent相互对应。

重要问题●

当页面存在多个window对象的时候，每个window对象都会包含原生类型的构造函数，这些构造函数相互独立，互不相等。这种结构使得在不同的框架下相互传递数据的时候会出现很多奇怪的问题。

经典问题●

判断是否为数组：arr instanceof Array;

结果●

如果arr是在当前框架下定义的，得到的结果为true

如果arr是在其他框架下定义的，并且以参数的形式传递过来的，得到的结果为false。

原因●

arr是其他框架Array的实例，并非当前框架下Array的实例

窗口位置判断

window对象提供了screenTop(Left)或者screenX(Y)两个属性用于获取当前窗口距离屏幕的位置，返回值是个数字，如果需要使用，可以先进行判断，具体代码如下

var left=(typeof window.screenLeft===‘number’)?window.screenLeft:window.screenX

问题●

你取的值可能是错的。不同的浏览器返回结果不同，无法精确取值，所以能不用尽量不用。

窗口大小判断

只能确定页面窗口大小，无法确定浏览器窗口大小

窗口的操作

打开

window.open(URL地址，[目标窗口]，[特性字符串]，[是否取代历史记录])

目标窗口

如果存在同名的frame则在该frame中打开

果不存在，则将新窗口命名为该名称

也可以为_self,_parent,_top,_blank其中之一。

特性字符串●

用于对新开的窗口进行设置，不是对象，是用逗号分隔的字符串，而且不允许存在空格，其中top,left,width,height对应数字，对于其他的设置，它们的值都是yes或no。对这些功能，等号和值都可以省略不写，不同的浏览器支持程度不同（不一定好用）。

exp：window.open(‘http://www.baidu.com’,’_blank’,’width=100,resizable’)

关闭

调用window.open方法后的返回值是window对象，继续调用close方法可以将新打开的窗口关闭。在新窗口的中调用window.opener可以获取原始窗口的window对象。

间歇与超时

setTimeout：一定时间之后执行函数

setInterval：每隔一段时间执行一次函数

注意点●

1 第一个参数可以使用函数，也可以使用字符串，但是推荐使用函数，如果使用字符串，相当于调用了eval函数，对性能有影响。

2 这两个函数的返回值是一个数字类型的ID，如果想要停止函数的运行需要使用对应的clearTimeout和clearInterval

3 JS支持setTimeout和setInterval并不代表支持多线程，它的实际原理是创建一个事件队列，然后将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。因此setTimeout(fn,0)的意思是将函数放到本次执行的最后。

4 HTML5标准规定，setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒。而实际上如果间隔时间设置小于16.7（1000/60）都会对显示造成影响。

5 setIntervel具有累积效应，如果某个操作特别耗时，超过了setInterval的时间间隔，排在

后面的操作会被累积起来，然后在很短的时间内连续触发，这可能或造成性能问题，解决方案是使用setTimeout代理setInterval。具体代码如下：

setTimeout(function(){

//do something

setTimeout(arguments.callee,interval);

},interval)

6 由于浏览器刷新问题，使用setTimeout或者setInterval可能造成卡顿，此时可以使用requestAnimationFrame来代替，只接受一个参数，在浏览器刷新的时候运行。

系统对话框

浏览器提供了alert confirm prompt三个方法，用于弹出对话框。

alert接受一个字符串参数，表示对话框的内容，弹出的对话框中仅包含一个确认按钮，没有返回值，仅用于提示。

confirm接受一个字符串参数，表示对话框的内容，一般为提问，并提供确认和取消两个按钮，根据用户的选择返回true和false，用于确认。