JavaScript：BOM-window对象

最新推荐文章于 2025-02-06 10:20:30 发布

原创最新推荐文章于 2025-02-06 10:20:30 发布 · 488 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #web

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨了浏览器对象模型(BOM)的核心概念，详细解释了window对象的作用及其与全局作用域的关系。同时，文章还介绍了如何通过window对象访问浏览器窗口，以及在包含框架的页面中，各框架的window对象如何通过frames集合进行关联。

BOM-浏览器对象模型

BOM的核心是window，它表示浏览器的一个实例。

window可以通过JavaScript访问浏览器窗口的一个接口
window是ECMAScript规定的Global对象
在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象

全局作用域

全局作用域中声明的变量、函数都会变成window对象的属性和方法：

var age = 29;
function sayAge() {
    alert(this.age);
}
alert(window.age);  // 29
sayAge();           // 29
window.sayAge();    // 29

定义全局变量与在window对上上直接定义属性的区别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。

var age = 29;
window.color = "red";

// 在IE < 9时抛出错误，其他浏览器返回false
delete window.age;

// 在IE < 9时抛出错误，其他浏览器返回true
delete window.color;

alert(window.age);   // 29
alert(window.color); // undefined

window访问没有定义的变量会返回undefined

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。

请看下面的例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>

frame.htm

<!DOCTYPE html>
<html>
<head>
<title>topFrame</title>
</head>
<body>
    <h1>topFrame</h1>
    <table border="1">
        <tr>
            <td>window.frames[0] =</td><td><script>document.write(window.frames[0])</script></td>
        </tr>
        <tr>
            <td>window.frames["topFrame"] =</td><td><script>document.write(window.frames["topFrame"])</script></td>
        </tr>
        <tr>
            <td>top.frames[0] =</td><td><script>document.write(top.frames[0])</script></td>
        </tr>
        <tr>
            <td>top.frames["topFrame"] =</td><td><script>document.write(top.frames["topFrame"])</script></td>
        </tr>
        <tr>
            <td>frames[0] =</td><td><script>document.write(frames[0])</script></td>
        </tr>
        <tr>
            <td>frames["topFrame"] =</td><td><script>document.write(frames["topFrame"])</script></td>
        </tr>
    </table>
</body>
</html>

anotherframe.htm

<!DOCTYPE html>
<html>
<head>
<title>leftFrame</title>
</head>
<body>
    <h1>leftFrame</h1>
    <table border="1">
        <tr>
            <td>window.frames[1] =</td><td><script>document.write(window.frames[1])</script></td>
        </tr>
        <tr>
            <td>window.frames["leftFrame"] =</td><td><script>document.write(window.frames["leftFrame"])</script></td>
        </tr>
        <tr>
            <td>top.frames[1] =</td><td><script>document.write(top.frames[1])</script></td>
        </tr>
        <tr>
            <td>top.frames["leftFrame"] =</td><td><script>document.write(top.frames["leftFrame"])</script></td>
        </tr>
        <tr>
            <td>frames[1] =</td><td><script>document.write(frames[1])</script></td>
        </tr>
        <tr>
            <td>frames["leftFrame"] =</td><td><script>document.write(frames["leftFrame"])</script></td>
        </tr>
    </table>
</body>
</html>

yetanotherframe.htm

<!DOCTYPE html>
<html>
<head>
<title>rightFrame</title>
</head>
<body>
    <h1>rightFrame</h1>
    <table border="1">
        <tr>
            <td>window.frames[2] =</td><td><script>document.write(window.frames[2])</script></td>
        </tr>
        <tr>
            <td>window.frames["rightFrame"] =</td><td><script>document.write(window.frames["rightFrame"])</script></td>
        </tr>
        <tr>
            <td>top.frames[2] =</td><td><script>document.write(top.frames[2])</script></td>
        </tr>
        <tr>
            <td>top.frames["rightFrame"] =</td><td><script>document.write(top.frames["rightFrame"])</script></td>
        </tr>
        <tr>
            <td>frames[2] =</td><td><script>document.write(frames[2])</script></td>
        </tr>
        <tr>
            <td>frames["rightFrame"] =</td><td><script>document.write(frames["rightFrame"])</script></td>
        </tr>
    </table>
</body>
</html>