BOM-浏览器操作对象模型之window对象

开发技术前端

字数统计: 1.8k阅读时长: 6 min

 2018/08/18 

JavaScript的实现包括以下3个部分： 1. 核心（ECMAScript）：描述了JS的语法和基本对象。 2. 文档对象模型 ☆（DOM）：处理网页内容的方法和接口 3. 浏览器对象模型（BOM）：与浏览器交互的方法和接口

BOM(Browser Object Model)，即浏览器对象模型，主要用于管理浏览器窗口，它提供了独立的、可以与浏览器窗口进行互动的功能，，这些功能与网页内容无关。BOM由多个对象构成，其中代表浏览器窗口的windows对象是BOM的顶置对象，其他都是这个对象的子对象。

使用windows对象

windows对象是BOM的核心，代表浏览器窗口的一个实例。在浏览器中，windows对象既是Javascript访问浏览器窗口的接口，也是Javascript的全局对象(Global)。因此在全局作用域中声明的所有变量和函数也是windows对象的属性和方法。

一.访问浏览器窗口

通过windows对象可以访问浏览器窗口。其他与浏览器相关的对象都为windows对象的子对象。通过windows属性来引用。客户端的各个对象之间存在着一种结构关系，这种关系构成了浏览器对象模型，windows对象代表根节点。 浏览器对象(附上w3c学习链接)：

window对象:客户端Javascript中的顶层对象，当出现<body>或者<frameset>标签时，window对象就会被自动创建。
navigator:包含客户端有关浏览器的信息。
screen:包含客户端显示屏的信息。
history:包含浏览器窗口访问过的URL。
location:包含当前网页文档的URL信息。

今天主要学习Window对象的相关知识。

二.全局作用域

客户端Javascript代码都在全局上下文环境中运行，window对象提供了全局作用域。由于window对象是全局对象，所以所有的全局变量都被视为该对象的属性。如图：如：

var a = "window.a";                 //全局变量
function f(){                       //全局函数
    alert (a);
}
alert(window.a);                //引用window对象的属性a，返回字符串"window.a"
window.f();                    //调用window对象的方法f()，返回字符串"window.a"

定义全局变量与在window对象上直接定义属性还是有区别的：全局变量不能通过delete运算符删除，而直接在window对象上定义的属性可以删除，如：

var a = "a";
window.b = "window.b";
c = "c";

alert(delete window.a);           //返回false,即删除失败
alert(delete window.b);           //返回true,即删除成功
alert(delete window.c);           //返回true,即删除成功

alert(window.a);   //返回"a"
alert(window.b);   //返回undefined
alert(window.c);  //返回undefined

使用var语句声明全局变量，window会自动的为这个属性定义一个名为configurable的特性，特性值设置为了false，这样该属性就不会被delete删除。而不使用var定义的变量(隐式全局变量)就会被删除。这里我们再来复习一下Javascript中变量的作用域：

这里注意一下，所谓的隐式全局变量也能读取，但实际上使用delete关键字是可以删除的，如：

a = "a";
function f(){
    b = "b";
}
f()

alert(window.a);       //返回a
alert(window.b);      //返回b

alert(delete window.a);    //返回true
alert(delete window.b;     //返回true

alert(window.a);    //返回undefined
alert(window.b);    //返回undefined

另外，通常直接访问为声明的变量，js会抛出异常。

try{
    alert(a);
}
catch(err){
    alert(err);
}

但是通过window对象进行访问的话，可以判断这个变量是否存在，不存在会返回undefined。

三.使用系统测试方法

window对象定义了3个人机交互的接口方法，方便用于对脚本进行测试。　　1. alert():这个前面的代码中都能看到。是一个简单的对话提示框，由浏览器向用户弹出提示性的信息。该方法包含一个可选的提示信息参数。没有参数为空白。　　2. confirm():也是简单的提示对话框，只不过有两个按钮，"确定"和"取消"，前者方法返回ture，后者方法返回false。　　3. prompt():弹出提示对话框，可以接受用户输入的信息，并将用户输入的信息返回。promt的方法也包含一个可选的提示信息参数，没有参数就弹出一个无提示的输入框。

这三个方法仅接受纯文本信息，忽略HTML字符串，用户只能使用空格、换行符和各种符号来格式化提示框中的显示文本。对话框的样式由浏览器设置来决定。

四.打开和关闭窗口

使用window对象的open()方法，可以打开一个新窗口，格式如下：window.open(URL, name, specs, replace) 1. URL为可选字符，声明在新窗口显示文档的URL，省略为空。 2. name为可选字符，声明新窗口的名称。可以用来标记<a>和<form>的属性target的值，若果该参数指定了一个已经存在的窗口，那么open()不再创建新的窗口，而是返回对指定窗口的引用，这种情况下，feature参数忽略。name字段还支持以下值： - _blank：URL加载到一个新的窗口。这是默认 - parent：URL加载到父框架 - _self：URL替换当前页面 - top：URL替换任何可加载的框架集 - name：窗口名称 3. specs为可选字符串，声明了新窗口要显示的标准浏览器的特征，详情。省略则为标准特征。 4. replace为可选的布尔值，规定了装载到窗口的URL是在窗口的浏览历史中创建一个条目还是替换浏览历史中的当前条目。

　　该方法返回值为新创建的window对象，使用这个window对象可以引用新创建的窗口。

window对象的所有属性和方法

新创建的window对象拥有一个opener属性，它保存着打开它的原始窗口对象。opener只在弹出窗口的最外层window对象(top)中定义，而且指向调用window.open()方法的窗口或框架。如：

myWindow = window.open();
myWindow.document.write("<h1>这是新打开的窗口</h1>");
myWindow.focus();
myWindow.opener.document.write("<h1>这是原来窗口</h1>");   //opener属性保存着原始窗口对象，所以会打印在原始页面上

alert( myWindow.opener == window);

五.使用框架集

在HTML文档中，若果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。该集合中，可以通过数值索引(从0开始)从左至右、从上至下访问每一个window对象。或者使用框架名称访问每个window对象。每个window都有一个name属性，其中包含框架的名称。 ### 六.控制窗口大小可以使用window对象的innerWidth,innerHeight,outerWidth和outerHeight这四个属性来确定窗口大小。详情 ### 七.使用定时器 window对象包含四个定时器专用方法：setInterval(),setTimeout(),clearInterval(),clearTimeout()，可以实现代码的定时运行。详情

原文作者：f10@t

原文链接：https://lzwgiter.github.io/posts/79f16c6a/

发表日期：August 18th 2018, 10:36:41 am

更新日期：December 2nd 2024, 8:59:10 pm

Next Post

BOM 浏览器操作对象模型之navigator、location对象
Previous Post

Javascript基础之数据类型2

CATALOG

1. 使用windows对象