Web前端-BOM之Window对象（一）

最新推荐文章于 2023-08-04 11:03:12 发布

程序员的脱发之路

最新推荐文章于 2023-08-04 11:03:12 发布

阅读量405

点赞数

分类专栏：前端社会成长之路 JavaScript学习笔记文章标签： javascript bom browser对象

本文链接：https://blog.csdn.net/weixin_43845090/article/details/113242845

版权

前端社会成长之路同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

JavaScript学习笔记

39 篇文章 3 订阅

订阅专栏

Window对象（一）-对象简介及对象属性

一、Window 对象简介
二、Window 对象集合
三、Window 对象属性

因篇幅问题window对象方法以及window对象描述详见Window对象（二）

一、Window 对象简介

Window 对象表示浏览器中打开的窗口。详细文档请见：w3school之Window对象
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

二、Window 对象集合

frames返回窗口中所有命名的框架。我们可以用frames获取当前页面的所有window对象
例如：

<body>
<div>222</div>
<iframe src="../public/test1.html" frameborder="0"></iframe>
<iframe src="../public/test1.html" frameborder="0"></iframe>
<iframe src="../public/test1.html" frameborder="0"></iframe>
<script>
  console.log(frames);
</script>
</body>

在这里插入图片描述
外层window是当前页面生成的window，其中0、1、2分报指向三个iframe标签生成的window对象。

三、Window 对象属性

window对象大概有20多个属性，在这里就简要介绍一些常用属性

1.closed

（1）属性介绍：

closed 属性可返回一个布尔值，该值声明了窗口是否已经关闭。该属性为只读。
当浏览器窗口关闭时，表示该窗口的 Windows 对象并不会消失，它将继续存在，不过它的 closed 属性将设置为 true。

（2）具体演示：

<body>
<input type="button" value="Has 'myWindow' been closed?"
       onclick="checkWin()">
<script>
  function checkWin() {
    if (myWindow.closed) {
      console.log('窗口被关闭')
    } else {
      console.log('窗口未被关闭')
    }
  }
  myWindow=window.open('','','width=400,height=100')// 新开一个窗口用于测试关闭
  myWindow.document.write("This is 'myWindow'")// 为新开窗口写入一些内容
</script>

未关闭时：
在这里插入图片描述
关闭时：

2.defaultStatus

（1）属性介绍：

defaultStatus 属性可设置或返回窗口状态栏中的默认文本。该属性可读可写。
该文本会在页面加载时被显示。了解即可，并不实用。

（2）具体演示：

ie浏览器下：

<body>
<script type="text/javascript">
  window.defaultStatus="This is the default text in the status bar!!";
</script>
<p>Look at the text in the statusbar.</p>
</body>

在这里插入图片描述

3.document对象

（1）属性介绍：

对 Document 对象的只读引用。即DOM的document对象，这里不做详细解释，后续会在DOM中详解此部分内容。

（2）具体演示：

4.history对象

（1）属性介绍：

对 History 对象的只读引用。这里不做详细解释，后续会在BOM的history对象中详解此部分内容。

（2）具体演示：

5.innerheight、innerwidth

（1）属性介绍：

返回窗口的文档显示区的高度。只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。可以将其理解为浏览器窗口宽高
注意：IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

（2）具体演示：

<body>
<script>
  console.log(window.innerHeight);
  console.log(window.innerWidth);
</script>
</body>

在这里插入图片描述

6.location对象

（1）属性介绍：

用于窗口或框架的 Location 对象。这里不做详细解释，后续会在BOM的location对象中详解此部分内容。

（2）具体演示：

7.name

（1）属性介绍：

name 属性可设置或返回存放窗口的名称的一个字符串。

该名称是在 open() 方法创建窗口时指定的或者使用一个标记的 name 属性指定的。

窗口的名称可以用作一个或者标记的 target 属性的值。以这种方式使用 target 属性声明了超链接文档或表单提交结果应该显示于指定的窗口或框架中。

（2）具体演示：

<body>
<script>
  console.log('name:' + window.name);
  window.name = 'window'
  console.log('name:' + window.name);
</script>
</body>

在这里插入图片描述

8.Navigator对象

（1）属性介绍：

对 Navigator对象的只读引用。这里不做详细解释，后续会在BOM的Navigator对象中详解此部分内容。

（2）具体演示：

9.opener

（1）属性介绍：

opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。
opener 属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。即在子窗口中获取到父窗口所定义的属性和函数。

（2）具体演示：

<body>
<script>
  myWindow=window.open('','MyName','width=200,height=100')
  myWindow.document.write("这是'myWindow'")
  myWindow.focus()
  myWindow.opener.document.write("这是父 window")//用子window对象修改父window属性
  console.log(myWindow.opener);
  console.log(window);
  console.log(window === myWindow.opener); // myWindow.opener指向window
</script>
</body>

在这里插入图片描述

10.parent

（1）属性介绍：

返回当前窗口的父窗口。如果自身没有父窗口则指向自身。
与opener的区别：
opener是打开它的窗口，parent是父窗口。

（2）具体演示：

<body>
<div>222</div>
<iframe src="../../public/test1.html" frameborder="0"></iframe>
<script>
  console.log('父窗口');
  console.log(window.parent);
</script>
</body>

test1.html：

<body>
<div>111</div>
<script>
  console.log('子窗口');
  console.log(window);
  console.log(window.parent);
</script>
</body>

在这里插入图片描述

11.Screen对象

（1）属性介绍：

对 Screen 对象的只读引用。这里不做详细解释，后续会在BOM的Navigator对象中详解此部分内容。

（2）具体演示：

12.self

（1）属性介绍：

self 属性可返回对窗口自身的只读引用。等价于 Window 属性。

（2）具体演示：

<body>
<script>
  console.log(window.self);
  console.log(window);
  console.log(window === window.self);
</script>
</body>

在这里插入图片描述

13.top

（1）属性介绍：

返回最顶层的先辈窗口。没有顶层窗口时指向自身。

（2）具体演示：

<body>
<div>222</div>
<iframe src="../../public/test1.html" frameborder="0"></iframe>
<script>
  console.log(window);
  console.log(window.top);
</script>
</body>

test1.html：

<body>
<div>111</div>
<script>
  console.log(window);
  console.log(window.top);
</script>
</body>

在这里插入图片描述

14.screenLeft、screenTop、screenX、screenY

（1）属性介绍：

只读整数。声明了窗口的左上角在电脑屏幕上的的 x 坐标和 y 坐标。以电脑屏幕左上角为原点，向右为x轴正方向，向下为y轴正方向。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

（2）具体演示：

<body>
<script>
  console.log(window.screenLeft);
  console.log(window.screenTop);
</script>
</body>

全屏时：
在这里插入图片描述
移动后：

程序员的脱发之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Web前端-BOM之Window对象（一）

Window对象（一）一、Window 对象简介二、Window 对象集合三、Window 对象属性1.closed（1）属性介绍：（2）具体演示：2.defaultStatus（1）属性介绍：（2）具体演示：3.document对象（1）属性介绍：（2）具体演示：4.history对象（1）属性介绍：（2）具体演示：5.innerheight、innerwidth（1）属性介绍：（2）具体演示：6.location对象（1）属性介绍：（2）具体演示：7.name（1）属性介绍：（2）具体演示：8.Navi
复制链接

扫一扫