8.0 BOM对象

Posted czhyuwj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了8.0 BOM对象相关的知识,希望对你有一定的参考价值。

主要的掌握的知识结构图
    
1 Window
2 控制窗口、框架、弹出窗口
3 利用location对象中的页面信息
4 使用 navigator 对象了解浏览器
1.1 BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
全局作用域
  由于Window扮演着ECMAScript中Global 对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
  
1 var age = 29;
2 function sayAge(){
3   alert(this.age);  
4 }
5 
6 alert(window.age);//29
7 sayAge();//29
8 window.sayAge(); //29

这里记住一点:

  定义的全局变量 与 直接在 window上定义的变量还是有些区别的:

    <1>  在window上直接定义的变量可以使用 delete删除

    <2>  var 声明全局变量不能使用; 这就是前面章节说的 属性描述对象中的[[Configurable]],通过var 声明的其值默认为false 

1 window.age = 20;
2 
3 var color = "red";
4 
5 console.log(delete color) //false <IE9会报错
6 console.log(color); // red
7 
8 console.log(delete age); //true <IE9会报错   
9 console.log(window.age); //undefined

引用全局变量时,window调用未定义的属性时不会报错,而直接调用则会报错 

 window.age = 20;
 
 delete age;
 console.log(window.age); //undefind
 console.log(age); //"ReferenceError: age is not definede

 

2.1 窗口与框架的关系

    1 每个框架 都拥有自己地 window对象,并保存在frames集合中。

    2 在frames集合中,通过索引从0开始(从左到右 从上到下)或者框架名称来访问对应的window对象。

    main.html


<
script type="text/javascript"> function load(){ console.log(window.frames[0]); console.log(window.frames["topFrame"]); console.log(top.frames[0]); console.log(top.frames["topFrame"]); console.log(frames[0]); console.log(frames["topFrame"]); } </script> <frameset rows="160,*" onload="load()"> <frame src="top.html" name="topFrame"> <frameset cols="50%,50%"> <frame src="left.html" name="leftFrame"> <frame src="right.html" name="rightFrame"> </frameset>

</frameset>
top.html
<!
DOCTYPE> <HTML> <HEAD> </HEAD> <BODY> <ul> <li>window.frames[0]</li> <li>window.frames["topFrame"]</li> <li>top.frames[0]</li> <li>top.frames["topFrame"]</li> <li>frames[0]</li> <li>frames["topFrame"]</li> </ul> </BODY> </HTML>

left.html

<!DOCTYPE>
<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        
            <ul>
                <li>window.frames[1]</li>
                <li>window.frames["leftFrame"]</li>
                <li>top.frames[1]</li>
                <li>top.frames["leftFrame"]</li>
                <li>frames[1]</li>
                <li>frames["leftFrame"]</li>
            </ul>
        
    </BODY>
</HTML>

right.html

<!DOCTYPE>
<HTML>
    <HEAD>
    </HEAD>
    <BODY>
        <ul>
            <li>window.frames[2]</li>
            <li>window.frames["rightFrame"]</li>
            <li>top.frames[2]</li>
            <li>top.frames["rightFrame"]</li>
            <li>frames[2]</li>
            <li>frames["rightFrame"]</li>
        </ul>
    </BODY>
</HTML>

 

从上面看通过最外层访问每个框架时的方式,

  top 代表的是最外层框架,也就是浏览器窗口。 使用它可以确保能够按照正确的顺序来访问每一个框架的内容。

  window对象指向的都是那个框架的实例。并不是指的最外层;

  与top相对的另一个window对象 parent ,顾明思意 就是指向当前窗口的父窗口,在某些情况下 top可能与 parent相等(最外层时)。但是在没有框架情况下,top一定与 parent相等;

  与窗体相关的self 对象,始终指向 window对象,self 可以与window互换使用,只是为了与top, parent 相对应,没有特别含义

所有的这些对象,都是window对象的属性,可以通过 window对象来访问  window.parent 、window.top

 

2.1.1 窗口的位置

  screenLeft screenTop screenX screenY
IE Y Y    
Safari Y Y Y Y
Opera Y Y    
Chrome Y Y Y Y
Firefox     Y Y

获取窗体位置信息

  var topPos = (typeof window.screenTop=="number")?window.screenTop:window.screenY;

  var leftPos = (typeof window.screenLeft=="number")?window.screenLeft:window.screenX;

在这个几个属性中,不同浏览器之间存在一些差异:

  IE、Opera、Chrome、Firefox、Safari  中,screenLeft和screenTop中保存的是从屏幕左边和上边到由window对象表示的页面距离。

 

 继续........

  

以上是关于8.0 BOM对象的主要内容,如果未能解决你的问题,请参考以下文章

2-Bom

Bom

JavaScript操作Bom对象

JS之BOM与DOM

[JS-BOM]BOM_Location地址栏对象

location 对象