JS(9)——BOM(浏览器对象模型)

1. 概念

浏览器对象模型(BOM)以window 对象为依托,表示浏览器窗口以及页面可见区域。同时,window

对象还是ECMAScript 中的Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。

2. 取得窗口左边和上边的位置坐标

使用下列代码可以跨浏览器取得窗口左边和上边的位置。

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

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

3. 取得页面视口的大小

虽然最终无法确定浏览器窗口本身的大小,但却可以取得页面视口的大小,如下所示。

var pageWidth = window.innerWidth,

pageHeight = window.innerHeight;

if (typeof pageWidth != "number"){

    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;

    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }

}

4. frame

4.1 window.frames[ ]

在使用框架(frame)时,每个框架都有自己的window 对象以及所有原生构造函数及其他函数的副本。每个框架(frame)都保存在frames 集合中,在frames集合中,可以通过数值索引(从0 开始,从左至右,从上到下)或者框架名称来访问相应的window 对象。每个window 对象都有一个name 属性,其中包含框架的名称。例如:

<html>
<head>
<title>Frameset Example</title>
</head>

<frameset rows="160,*">

    <frame src="frame.htm" name="topFrame">

    <frameset cols="50%,50%">
         <frame src="anotherframe.htm" name="leftFrame">
         <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>

</frameset>
</html>

以上代码创建了一个框架集,其中一个框架居上,两个框架居下。对这个例子而言,可以通过

window.frames[0]或者window.frames["topFrame"]来引用上方的框架。不过,恐怕你最好使用

top 而非window 来引用这些框架(例如,通过top.frames[0])。

4.2 window.top对象

top 对象始终指向最高(最外)层的框架,也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为对于在一个框架中编写的任何代码来说,其中的window 对象指向

的都是那个框架的特定实例,而非最高层的框架。下图展示了在最高层窗口中,通过代码来访问前面例子中每个框架的不同方式。

4.3 window.parent对象

与top 相对的另一个window 对象是parent。顾名思义,parent(父)对象始终指向当前框架的

直接上层框架。在某些情况下,parent 有可能等于top;但在没有框架的情况下,parent 一定等于top(此时它们都等于window)。

4.4 window.self对象

与框架有关的最后一个对象是self,它始终指向window;实际上,self 和window 对象可以互

换使用。引入self 对象的目的只是为了与top 和parent 对象对应起来,因此它不格外包含其他值。


猜你喜欢

转载自blog.csdn.net/u013789656/article/details/80942987