从零开始学前端 - 24. JS BOM之Window对象详解及常用方法一、 window 相关知识点二、window 常用属性三、window 常用方法

62 阅读 0 评论 41 点赞

我是靠谱客的博主迷路帆布鞋，最近开发中收集的这篇文章主要介绍从零开始学前端 - 24. JS BOM之Window对象详解及常用方法一、 window 相关知识点二、window 常用属性三、window 常用方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

从零开始学前端 - 24. JS BOM之Window对象详解及常用方法

一、 window 相关知识点
- 1、全局作用域
- 2、窗口关系及框架
- - 父页面操纵子页面
  - 子页面操纵父页面
- 3、窗口位置
- 4、窗口大小
- 5、打开窗口
- 6、定时器
- 7、弹出框
二、window 常用属性
三、window 常用方法

Window 是 BOM 的核心对象，它表示浏览器的一个实例，也就是说， Window 对象只存在于浏览器环境中，在其他的环境内，是以 Global 为核心对象的。在浏览器中，Window 对象既是通过 JS 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着在网页中定义的任何一个对象、变量和函数，都以 Window 作为其 Global 对象。

具体内容可以查看上一篇博客： JS Glabal 对象常用属性和方法。

一、 window 相关知识点

1、全局作用域

前面也提到了，在浏览器环境中，Window 对象代替了 Global 对象，因此所有在全局作用域中声明的变量、函数等内容都会变成 Window 对象的属性和方法。

var num = 1 ;
function fn(){
	return this.num;
}
window.num;			// 1
window.fn();		//	1

由于我们是在全局作用域内声明的变量 num 和函数 fn，所以它们会默认归纳到 Global 对象，即 Window 对象内，所以我们可以直接通过 Window 来访问全局变量和函数。
this 永远指向的是当前调用它的对象，所以当我们在全局环境中调用函数时，this 指向的是 Window 对象。

而全局变量虽然可以通过 window 来直接访问，但它与直接在 window 对象上定义的属性还略有不同：

var a = 1 ;
window.b = 2;

//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 false 
delete window.a; 
//在 IE < 9 时抛出错误，在其他所有浏览器中都返回 true 
delete window.b;
window.a;		// 1
window.b;		// undefined

当我们试图用 delete 运算符在 IE9 以前版本的浏览器删除 window 对象的属性时，无论如何都会抛出错误。而在高版本的浏览器中，声明的全局变量在添加到 window 中时，会有一个名为 Configurable 的特性，这个特性的值会被设置为 false，从而阻止其属性被删除。

当我们试图访问一个未被声明的变量时，JS 会抛出一个错误，而借助 window 对象，我们可以避免这一点：

var num1 = num;			// Uncaught ReferenceError: num is not defined
var num2 = window.num;	// undefined

为什么通过 window 来访问一个未被声明的变量不会抛出错误？这是因为这是一次对象属性查询的操作。我们可以通过这种方式来判断某个可能未声明的变量是否存在：

// Uncaught ReferenceError: num is not defined
if (num) {
	alert("已声明");
} else {
	alert("未声明");
}
// 未声明
if (window.num) {
    alert("已声明");
} else {
    alert("未声明");
}

总结一下相关的知识点：

在浏览器环境中，Window 对象代替了 Global 对象成为了全局作用已；
全局变量不能通过 delete 删除，而直接在 window 对象上的定义的属性可以；
IE9 以下版本的浏览器不允许任何通过 delete 对 window 对象的操作；
通过查询 window 对象，可以判断某个可能未声明的变量是否存在；

2、窗口关系及框架

所谓窗口关系及框架指的就是通过 iframe 标签来引入的页面与当前页面的关系，这里主要介绍一下页面与页面直接相互操作的方法，也就是父页面与子页面相互操作的方法。
首先要先声明，目前 W3C 已经不推荐使用 frameset + frame，而推荐使用 iframe 来代替它们。

// index.html
<body>
<h1>我是最顶级父页面 index.html</h1>
	<iframe src="./1.html" frameborder="1" name="child1" style="width: 400px;height: 400px;"></iframe>
	<iframe src="./2.html" frameborder="1" name="child2" style="width: 400px;height: 400px;"></iframe>
</body>
<script>
	var name = "index.html";
	function fn() {
		alert("index.html 页面方法")
	}
</script>

// 1.html 
<body>
	<h1>我是子页面 1.html</h1>
	<iframe src="./3.html" frameborder="1" name="child1_1"></iframe>
</body>
<script>
	var name1 = "1.html";
	function fn1() {
		alert("1.html 页面方法")
	}
</script>

// 2.html
<body>
    <h2>我是子页面 2.html</h2>
</body>

// 3.html
<body>
    <h1>我是 1.html 的子页面 3.html</h2>
</body>
<script>
	var name3 = "3.html";
	function fn3() {
		alert("3.html 页面方法")
	}
</script>

代码效果如下：
预览图

我们可以通过 window.frames 来得到一个包含当前页面所有iframe 对象的伪数组：

// 通过 window.frames[index] 或 window.frames[name] 来获取相应的 iframe 对象
window.frames[0].name;		// child1
window.frames.child2.name;	// child2

无论 iframe 如何嵌套，我们都可以将其分为两种相对情况：父页面对子页面的操作，子页面对父页面的操作。而想要操作 iframe 中的内容，必须要满足以下几点要求：

父页面与子页面符合同源策略；
子页面没有禁止被其他页面以 iframe 形式调用；
子页面已经成功加载完毕；

父页面操纵子页面

在父页面 index.html 中获取子页面 1.html 的方法：

// 使用 window.onload 保证子页面已经加载完毕
window.onload = function(){
	// 获取子页面 iframe 对象
	var oChild = window.frames["child1"];
	// 获取子页面元素
	oChild.document.getElementsByTagName("h1")[0];
	// 获取子页面变量
	oChild.name1;
	// 调用子页面方法
	oChild.fn1();
}

子页面操纵父页面

子页面可以直接使用 window.parent 属性获取父页面对象，也可以省略 window ，在子页面 1.html 中获取父页面 index.html 的方法：

// parent 即代表当前页面的父页面
parent;
// 获取父元素对象
parent.document.getElementsByTagName("h1")[0];
// 获取子页面变量
parent.pageName;
// 调用子页面方法
parent.paretnName();

如果想要在父页面 index.html 操作孙子页面 3.html，我们可以先获取到子页面 1.html ，在获取 1.html 的子页面 3.html：

window.frames["child1"].frames["child3"].name3;		// "3.html"

如果想要在孙子页面 3.html 操作最顶级页面 index.html，可以先获取到父页面 1.html，在获取 1.html 的父页面index.html：

parent.parent.name;		// "index.html"

如果确定是要访问最顶级的页面时，可以直接使用 window.top 来获取：

window.top.name;		// "index.html"

总结一下相关的知识点：

如果 iframe 具有 name 属性，可以通过window.frames[name] 来获取；
如果 iframe 没有 name 属性，可以通过 window.frames[index] 来获取；
想要对 iframe 进行操作需要满足同源策略等基本要求；
子页面可以直接通过 window.parent 来获取父页面；
可以直接使用 window.top 来获取最顶级页面；

3、窗口位置

我们可以通过 screenLeft 和 screenTop 属性来分别获取窗口相对于屏幕左边和上边的位置，screenX 与 screenY 可以达到相同的效果。
但是在 IE 环境下只支持使用 screenLeft 和 screenTop 属性，Firefox 只支持使用 screenX 和 screenY 属性。而Chrome 、Safari 和 Opera 同时支持这两个属性，但 Opera 浏览器环境下 screenX 和 screenY 属性与 screenLeft 和 screenTop 属性获得的值并不对应。

以下代码可以跨浏览器获得窗口距离屏幕的位置。

var placeX = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; 
var placeY = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

但是由于各个浏览器中存在不同的问题，我们是无法在跨浏览器的条件下使用一个方法取得窗口左边和上边的精确坐标值。必须针对浏览器的不同使用不同的方法才能获得精确的坐标。

但是我们可以使用 moveTo() 和 moveBy() 将窗口精确地移动到一个新位置，但让人忍不住想要疯狂吐槽的是虽然浏览器提供了移动窗口的方法，但出于为了保护计算机的安全性的原因，该方法并不能直接生效于当前的窗口。而且如果你和博主一样使用的是多显的话，位置的计算还会出现问题，需要将浏览器放在主屏幕才能正确进行。

moveTo
语法：moveTo(placeX,placeY)
作用：将窗口移动到指定的位置；

moveBy
语法：moveBy(moveX,moveY)
作用：将窗口沿X轴方向移动 moveX 的像素，沿 Y 轴移动 moveY 的像素；

具体可以查看下方的实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="moveToFn()">moveTo</button>
		<button onclick="moveByFn()">moveBy</button>
	</body>
</html>
<script>
	var moveX = 0;
	var moveY = 0;
	var myWindow = window.open("", "", "width=100,height=100");

	function moveToFn() {
		myWindow.moveTo(moveX+=100, moveY+=50);
		myWindow.focus();
	}
	
	function moveByFn(){
		myWindow.moveBy(50,50);
		myWindow.focus();
	}
</script>

4、窗口大小

通过 innerWidth 和 innerHeight 属性，可以获得浏览器可视区域的大小，outerWidth 和 outerHeight返回浏览器窗口本身的尺寸。
在 IE9 版本以前的浏览器，并没有提供获得浏览器窗口本身的大小的方法，只能使用document.documentElement.clientWidth 和 document.documentElement.clientHeight方法，通过 DOM 来获取当前页面的可视区域大小。

我们以 Chrome 为例，将窗口缩小后再控制台输入相关代码来查看具体的区别：

显示效果

我们需要针对不同的浏览器书写不同的方法来确定浏览器窗口本身的大小，但浏览器可视区域的大小我们可以通过以下代码来跨浏览器获得：

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; 
	} 
}

window 同样提供了 resizeTo和resizeBy 两个方法，用于调整浏览器窗口的大小，但与 moveTo 和 moveBy 一样，处于对浏览器的限制，该方法同样不能直接生效于当前的窗口。

resizeTo
语法：resizeTo(newWidth,newHeight)
作用：将浏览器窗口调整到新宽度和新高度；

resizeBy
语法：resizeBy(valueWidth,valueHeight)
作用：将浏览器窗口按照指定值进行调整；接收的两个参数是新窗口与原窗口的宽度和高度之差

具体可以查看下方的实例：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<button onclick="resizeTo()">resizeTo</button>
	<button onclick="resizeBy()">resizeBy</button>
</body>

</html>
<script>
	var myWindow = window.open("", "", "width=100,height=100");

	var newWidth = 100;
	var newHeight = 100;

	function resizeTo() {
		myWindow.resizeTo(newWidth += 100, newHeight += 100);
		myWindow.focus();
	}

	function resizeBy() {
		myWindow.resizeBy(50, 50);
		myWindow.focus();
	}
</script>

5、打开窗口

使用 window.open() 可以导航到一个特定的URL，也可以打开一个新的浏览器窗口，该方法可以接收四个参数，但一般情况下我们只传入第一个参数。

URL ：表示要加载窗口的地址；
target ：已有窗口或框架的名字，表示在其中打开新页面；
第三个参数为特性字符串，可选值如下方表格所示；
replace：布尔值，决定是否取代浏览记录；.

属性	值	作用
fullscreen	yes `\|\|` no	浏览器窗口是否最大化。仅限IE
height	数值	新窗口的高度。不能小于100
left	数值	新窗口的左坐标。不能是负值
location	yes `\|\|` no	是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。
menubar	yes `\|\|` no	是否在浏览器窗口中显示菜单栏。默认值为no
resizable	yes `\|\|` no	是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no
scrollbars	yes `\|\|` no	如果内容在视口中显示不下，是否允许滚动。默认值为no
status	yes `\|\|` no	是否在浏览器窗口中显示状态栏。默认值为no
toolbar	yes `\|\|` no	是否在浏览器窗口中显示工具栏。默认值为no
top	数值	新窗口的上坐标。不能是负值
width	数值	新窗口的宽度。不能小于100

通过 window.open() 打开新页面时，浏览器一般会拦截新弹出的窗口，需要用户手动点击允许浏览器弹出窗口。
拦截弹出窗口
如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open() 很可能会返回 null。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽：

var myWindow = window.open("", "_blank", "width=100,height=100");
if (myWindow == null){ 
	alert("窗口被阻止弹出");
}

有一些浏览器扩展程序或其他程序同样会阻止弹出窗口，这个时候 window.open() 一般会抛出一个错误，所以需要搭配 try_catch 来进行检测：

try { 
	var myWindow = window.open("", "_blank", "width=100,height=100");
	if (myWindow == null){ 
		alert("窗口被阻止弹出");
	}
} catch (ex){ 
	alert("窗口被阻止弹出");
}

6、定时器

JS中的定时器分为两种，一种为持续调用，每隔一段时间就会执行一次；另外一种只会在规定时间后调用一次。另外由于 JS 是单线程的脚本语言，所以会将定时器操作放到页面完全加载完毕之后才会执行。

setInterval
语法：setInterval(function,millisecond)
作用：按照指定 millisecond 为周期，持续调用 function，直到页面被关闭或者该定时器被清除。
实例：

// 匿名函数
setInterval(function(){
	alert("每隔1000毫秒，定时器被调用一次");
},1000);
// 函数名 "每隔1000毫秒，调用一次 fn 函数"
setInterval(fn(),1000);
// 如果需要传递参数，需要使用引号将函数包裹起来。
// 隐约记得 IE 浏览器并不支持传入额外的参数
setInterval('fn(num)',1000);

setTimeout
语法：setTimeout(function,millisecond)
作用：延迟指定 millisecond 的时间，调用一次 function。

setTimeout 和 setInterval 的区别仅在于 setTimeout 只会被调用一次。

清除定时器的方法同样有两个 clearTimeout 和 clearInterval ，两个方法用于清除不同类型的定时器，接收的参数，起到的效果是一致的。

clearInterval
语法：clearInterval(order)
作用：根据定时器的序号清除定时器。
实例：

var timer1 = setInterval(function(){
	alert("每隔1000毫秒，定时器被调用一次");
},1000);
var timer2 = setTimeout(function(){
	alert("1000毫秒后，该定时器仅被调用一次");
},1000);

// 清除定时器
clearInterval(timer1);
clearTimeout(timer2);

定时器在调用的时候，都会返回一个数字，这个数字代表着定时器的序号，清除定时器时，order 代表的就是这个序号。

7、弹出框

浏览器提供三种弹出框用于展示消息，分别是：alert() 、confirm() 和 prompt()。它们的外观由操作系统及（或）浏览器决定，不受 CSS 控制，且这些方法属于同步方法，也就是当调用它们时，所有的代码会停止执行，直到用户关闭弹出框，代码才会继续执行。

alert() 可以看做是一个警告提示框，用于向用户展示一条信息，该方法接受一个参数，即显示内容，无返回值。
alert对话框
confirm() 可以看做是一个选择框，该方法同样接受一个参数，即显示内容，根据用户选择不同的按钮返回不同的布尔值。
confirm对话框
prompt() 可以看做是一个输入框 ，该方法接受一个参数，即显示内容，返回值为用户输入的内容。
prompt对话框
另外还有一个特殊的方法 showModalDialog(URL[arguments] [features]) 用于打开一个显示HTML内容的模态对话框，该方法接收三个参数：

URL 必填参数，指定 html 文档的 URL；
arguments 可选参数，用于传递参数给模拟对话框；
features 可选参数，包含高度，宽度，是否居中等外观信息；

由于对话框的样式并不受 CSS 控制，所以大部分时候我们都不会采用上面的四种对话框，而是使用我们自己模拟出的自定义对话框，下面是几种典型的示例：

实例1：使用 alert 向用户展示警告信息：

alert("本网站禁止18岁以下未成年人入内");

实例2：使用 confirm 捕捉用户选择：

if (confirm("您是否已经成年？")) {
	alert("用户点击确地");
} else {
	alert("用户点击取消");
}

实例3：使用 prompt 实现简单计算：

var num1 = prompt("请输入数字");
var sign = prompt("请输入符号");
var num2 = prompt("请输入数字");
alert(num1 + sign + num2 + " = " + eval(num1+sign+num2));

二、window 常用属性

属性	效果
closed	返回窗口是否已被关闭
document	对 `DOM` 元素 `document` 对象的引用
name	设置或返回窗口的名称
innerwidth	返回当前窗口可视区域的宽度
innerheight	返回当前窗口可视区域的高度
outerwidth	返回浏览器窗口的宽度
outerheight	返回浏览器窗口的高度
screenLeft screenX	返回当前窗口相对于屏幕左边位置 X坐标
screenTop screenY	返回当前窗口相对于屏幕上边位置 Y坐标

三、window 常用方法

方法	效果
alert()	警告提示框
confirm()	选择框
prompt()	输入框
blur()	使窗口失去焦点
focus()	使窗口获得焦点
open()	打开新窗口
close()	关闭窗口
moveTo()	将窗口移动到指定的位置
moveBy()	将窗口移动指定像素
resizeTo()	将窗口设置指定宽高
resizeBy()	将窗口宽高按照指定值进行调整
scrollTo()	将滚动条滚动到指定位置
scrollBy()	将滚动条滚动指定距离

点击查看更多window对象属性和方法

感谢大家的观看，点赞和收藏，我们下篇博客再见，麻烦动动您的小手帮忙点个赞和收藏，这对博主而言十分重要，谢谢！

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。
转载请附带作者信息及出处。您的评论和关注是我更新的动力!

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。
在这里插入图片描述
都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。

最后

以上就是迷路帆布鞋为你收集整理的从零开始学前端 - 24. JS BOM之Window对象详解及常用方法一、 window 相关知识点二、window 常用属性三、window 常用方法的全部内容，希望文章能够帮你解决从零开始学前端 - 24. JS BOM之Window对象详解及常用方法一、 window 相关知识点二、window 常用属性三、window 常用方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：从零开始学前端
浏览次数：62 次浏览
发布日期：2023-09-26 12:50:13
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzocf1_14_zkz.html

从零开始学前端 - 24. JS BOM之Window对象详解及常用方法一、 window 相关知识点二、window 常用属性三、window 常用方法

概述

从零开始学前端 - 24. JS BOM之Window对象详解及常用方法

一、 window 相关知识点

1、全局作用域

2、窗口关系及框架

父页面操纵子页面

子页面操纵父页面

3、窗口位置

4、窗口大小

5、打开窗口

6、定时器

7、弹出框

二、window 常用属性

三、window 常用方法

最后

评论列表共有 0 条评论

发表评论取消回复

从零开始学前端 - 24. JS BOM之Window对象详解及常用方法一、 window 相关知识点二、window 常用属性三、window 常用方法

概述

从零开始学前端 - 24. JS BOM之Window对象详解及常用方法

一、 window 相关知识点

1、全局作用域

2、窗口关系及框架

父页面操纵子页面

子页面操纵父页面

3、窗口位置

4、窗口大小

5、打开窗口

6、 定时器

7、弹出框

二、window 常用属性

三、window 常用方法

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

6、定时器

发表评论取消回复