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对象表示的页面距离。

继续........

时间： 2024-08-06 09:06:47

8.0 BOM对象的相关文章

前端05.js入门之BOM对象与DOM对象。

一.关于BOM对象. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 用于操控用户浏览器. 1.window对象: 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可. 下面是window对象的常用方法: alert() 显示带有一段消息和一

number对象，bom对象

number对象新创建一个number的对象,toFixed是精确到位数 var num =new Number('123.1231'); console.log(num.toFixed(1)); 小技巧:可以获取函数传入了多少个参数. var abc =function () { if (arguments.length===2) { alert('have 2 value'); } else if (arguments.length===3) { alert('have 3 value')

BOM对象，math对象document对象的属性和操作

Math对象 //该对象中的属性方法和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). max(x,y) 返回 x 和 y 中的最高值. min(x,y) 返回 x 和 y 中的最低值. pow(x,y) 返回 x 的 y 次幂. random() 返回 0 ~ 1 之间的随机数. round(x) 把数四舍五入为最接近的整数. sin(x) 返回数的正弦. sqrt(x) 返回数的平方

浏览器内核与BOM对象介绍

BOM(Browser Object Model)对象介绍我们都知道js有三部分组成,ECMAScript.DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其它浏览器也是风格迥异. 那么BOM和DOM有什么不同呢? DOM是由W3C的制订,所有浏览器共同遵守的标准,描述了处理网页内容和方法的接口:BOM是各个浏览器厂商根据DOM实现与各自浏览器进行交互的方法和接口,表现为不同浏览器定义有差别,实现方式不同. BOM主要处理浏览器容器的框架,不过通常浏览器特定的js扩展

BOM对象——Navigator

BOM对象--Navigator <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> /* BOM - 浏览器对象模型 - BOM可以使我们通过js来着.操作浏览器 - 在BOM中为我们提供了一组对象,用来完成对浏览器的操作 - BOM

js中的事件 bom对象 dom对象.

3.事件什么是事件?为什么使用事件? 我们学习事件首先了解一些概念事件源事件监听器事件源:事件的源头(也就是这个事件是由某某触发的,那么我们就管其叫事件源) 监听器:监听事件发生的组件.那么监听器要想监听事件是否发生,必须注册监听(绑定监听) js中常用的事件 1.onclick 鼠标点击某个对象我们在开发中一般会对按钮,文本框或radio checkbox等进行onclick操作. 2.onblur 失去焦点 3.onfocus 获去焦点 4.onchange 改变域的内容针对于

cocos2d-x 3.0 常用对象的创建方式

cocos2d-x 3.0 中所有对象几乎都可以用create函数来创建,其他的创建方式也是有create函数衍生. 下面来介绍下create函数创建一般对象的方法,省得开发中经常忘记啥的. 1.精灵Sprite的4种创建方式 (1)根据图片资源路径来创建 ? 1 2 3 4 //根据图片路径来创建 auto sprite1 = Sprite::create(filepath); //根据图片路径来创建,并设置要显示的图片大小 auto sprite2 = Sprite::create(file

JavaScript BOM对象介绍

bom:即broswer object model(浏览器对象模型),由五个对象组成: Window:对象表示浏览器中打开的窗口最顶层对象. Navigator :浏览器对象. Screen: 屏幕对象 History:浏览器历史对象 Location:地址对象. <!DOCTYPE html> <html> <head> <title>JavaScript BOM对象</title>

JavaScript学习——BOM对象

1.BOM 对象:浏览器对象模型(操作与浏览器相关的内容) 2.Window 对象 Window 对象表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInterval 使用 setTimeout():它有一个返回值,主要是提供给 clearTimeout 使用 clearInterval():该方法只能清除由 setInterval 设置的定时操作 clearTimeout():该方法只能清除由 setTimeout 设置的定时操作弹出框的几个方法: