重操JS旧业第十一弹:BOM对象

BOM对象即浏览器内置对象,现今流行的浏览器内核有Safri,Firefox,Chrome,Opera,IE其中IE的兼容性是最蛋疼的在10及其过后还好点,但是现在IE基本上淘汰,而国内像360这种垃圾玩意儿包了个IE壳导出吹

真是不像样子,也不要脸。

BOM对象在不同内核的浏览器,有很多兼容性问题,比如一些属性上等等,以及后面说的Dom更是很多差别。

 

1 全局作用域

window在SPA,单页面应用程序里面处于整个BOM树最顶端,也就是全局作用域的大哥,所有的对象都直接间接的寄宿在window对象下

var obj='dddd';与window.obj='ddd';的不同在于var申明(注意js中申明也就是定义)的变量不能被delete删除掉,即删除的结果返回false,因为这样申明的变量配置为不可删除的特性为true;而window.obj则相反

delete obj  ->false;

delete window.obj -->true;

2 window对象树

为什么这么说,因为有了frameset的引入,一个web页面可能有很多子页面通过frame的方式组合成一张页面,那么这个时候window自然已经不是最顶层的对象了,响应的这些子window对象都由一个叫top对象管理着,自然的top对象才是真正的王者,在他下面管理着一个frames数组,我们的页面框架就放置在这个数组里面,如果想要访问某个frame可以使用top.frames[0]或者top.frames[name]来访问,由于window成为window树中一名成员,window通过parent也可以访问上级frame对象,所以访问具有多条路径

top.frames[0];top.frames[name],也可以不适用top前缀,frames[0],也可以使用window.parent层层查找,而每个frame对象具有name属性

 

3 窗口位置

什么是窗口,也就是我们通常见到的一个web页面,也就对应一个window,这个window可能是SPA,也可以是通过frames嵌入的;

窗口位置:即窗口左上角与屏幕左上角的偏移距离;通常在大多数浏览器里面使用window.screenLeft,window.screenTop来访问,而在forefox里面使用window.screenX,window.screenY来访问;

 

4 窗口大小

由于web页面具有边框这个玩意儿,便有了outerWidth,outerHeight和innerWidth,innerHeight两种方式来认为就是窗口大小,outer当然代表了整个浏览器最外层的大小,而inner则代表了真是显示内容的区域

即视口,就是我们看到的浏览器内容窗口大小,这个与document.doucumentElement.clientWidth,document.doucumentElement.clientHeigth相对应也就是所谓的视口大小,视口大小可能随时变化,而在移动

端document.body.clientWidth,document.body.clientHeigth才代表真正渲染后的视口大小,而document.doucumentElement.clientWidth,document.doucumentElement.clientHeigth代表布局大小;

 

5 导航

window.open:打开新的页面,这个页面可能被浏览器阻止,导致返回值为null

6 setTimeout,setInterval

2个老朋友了就不多说了

 

7 系统对话框

aler:

confirm,prompt:基本废物一个

8 location对象

即浏览器地址栏对象,这个对象具有url多个分解后的属性,如host

9 navigator对象

用途呢:主要用来检测浏览器插件和浏览器的属性介绍,或者浏览器订阅rss这类的,很少使用

10 history和screen对象

history:go(-1);go(1)很简单不多说了

screen对象几乎没人使用咯

 

原文地址:https://www.cnblogs.com/rjjs/p/5900339.html