JavaScript之window对象（BOM）

最新推荐文章于 2022-04-06 17:23:34 发布

「已注销」

最新推荐文章于 2022-04-06 17:23:34 发布

阅读量548

点赞数 1

分类专栏： Javascript学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/70039638

版权

Javascript学习笔记专栏收录该内容

64 篇文章 3 订阅

订阅专栏

window对象

BOM的核心是window，它表示浏览器的一个实例，既是通过JavaScript访问浏览器窗口的一个接口，又是global对象。

全局作用域

由于window对象扮演着global对象的一个角色，因此在全局作用域中定义的变量、函数都会变成window对象的属性。

var age ＝ 10;

function sayAge () {
    alert(this.age);
}

alert(window.age); //10

sayAge(); //10

window.sayAge(); //10

由于sayAge()函数是在全局作用域下定义的，因此this引用的是window对象，所以this.age被映射为window.age了即10。

定义全局变量与直接在window上添加属性还是有点区别的：全局变量不能通过delete操作删除，而直接在window上添加的属性能通过delete操作符删除。

var age ＝ 10; //定义全局变量

window.color ＝ "blue"; //在window对象上添加属性color

delete window.age;

delete window.color;

console.log(age); //10

console.log(window.color); //undefined 被删除了

用关键字var声明的变量有个特性[[configurable]]默认值为false，因此该变量不能通过delete操作符删除。

要注意：尝试访问未声明的变量出报错。但可以通过window来查询某个可能未声明的变量是否存在。

var a ＝ b; //报错，因为b未声明

var a ＝ window.b; //通过window来查询b是否存在。

窗口关系与框架

frames[]

如果页面中有多个框架，则每个框架都有自己的window对象，并保存在frame[]对象中。可以通过索引（从上到下、从左到右）访问。返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

可以通过 frames.length得到页面中框架的个数。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
	<title>javascript</title>
  </head>
  <body>
  
    <iframe src="http://www.baidu.com"></iframe>
    <iframe src="http://www.baidu.com"></iframe>
    <iframe src="http://www.baidu.com"></iframe>
  
  
  <script>
      /* 在此处书写javascript代码 */
	  
      console.log(window.frames.length); //3 定义了3个iframe框架
      
		
  </script>
  </body>
</html>

效果：

图中，框架数量为3个。

窗口位置

screenLeft 和screenTop

这个两个属性分别表示窗口相对于 屏幕左边和上边的位置。当浏览器是全屏时，这两个属性的值均为0，所以测试只有缩小浏览器窗口。

console.log(window.screenLeft);
console.log(window.screenTop);

效果：

screenX 和screenY

与上例达到的效果一样。

窗口大小

outerWidth 和outerHeight

这两个属性返回 浏览器本身的尺寸,也就是整个浏览器的尺寸。

innerWidth 和innerHeight

这两个属性返回 页面视图区的尺寸。文档显示区的尺寸。

window常见方法

alert()

消息警告框，带有信息和一个确定按钮的警告框。

window.alert("这是一段消息！");

效果：

confirm()

带有指定消息、确定按钮和取消按钮的对话框，当点出确定按钮时，该方法返回true，当点出取消按钮时，该方法返回false。

window.confirm("点出确定还是取消？");

效果：

prompt()

显示一个提示用户可输入的对话框。当用户点击取消按钮时，该方法返回null，当点击确定按钮时，该方法返回用户输入的内容。

该方法有两个参数，第一个参数是输入框的标题，第二个参数是输入框默认的内容。

window.prompt("这是输入框的标题", "这是一段默认内容");

效果：

open()

打开一个窗口，有四个参数， 第一个参数是开打开的URL， 第二个参数是新窗口的名称， 第三个参数是声明要显示的标准浏览器的特性，可以是多个， 第四个参数是确定打开的新窗口是在历史URL中新建一条新项目，还是替换当前页面的URL，"true"表示替换，"false"表示新建条目。

注：第一个参数可以为空字符，表示打开浏览器的 about:blank 页。

还可以指定打开新窗口的方式：_black(新窗口打开) _self(当前窗口打开) _top()、parent(父级窗口打开)

还可以指定打开的新窗口的尺寸大小。