JavaScript之BOM（1）

最新推荐文章于 2024-10-11 21:15:00 发布

黑猫中校

最新推荐文章于 2024-10-11 21:15:00 发布

阅读量334

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/tang1392/article/details/79057064

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了浏览器对象模型(BOM)的核心概念和技术细节，包括window对象的作用域、位置与大小的跨浏览器处理方式、导航与打开窗口的方法、定时调用及系统对话框的使用，以及location对象的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECMAscript是JavaScript的核心，如果在web中使用JavaScript，那么BOM（浏览器对象模型）无疑才是真正的核心。

window对象

1 全局作用域

window对象在ECMAscript扮演着global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

var name = "黑猫";
function say(){
	console.log(this.name);
}
console.log(window.name);  //黑猫
say();  //黑猫
window.say(); //黑猫

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

var age = 23;
window.color = "red";
//在ie<9时抛出错误，其他浏览器返回false
delete window.age;
//在ie<9时抛出错误，其他浏览器返回true
delete window.color;
console.log(window.age);  //23
console.log(window.color); //undefined

使用var语句添加的window属性有一个名为configurable的特性，这个特性被设置为false，因此定义的属性不可以通过delete删除。

Tip：访问未声明的变量会抛出错误。

2 窗口位置

IE、Safari、Opera、Chrome都支持screenLeft和screenRight属性，分别用于表示窗口相对于屏幕左边和上边的位置。

Safari、Firefox、Chrome支持screenX和screenY。

Opera也支持screenX和screenY，但是和screenLeft和screenRight属性不对应，不建议在Opera中使用。

var left = (typeof window.screenLeft == "number") ?　window.screenLeft:window.screenX;
var right = (typeof window.screenRight == "number") ?　window.screenRight:window.screenY;
console.log(left + " and " + right); // 0 and 0

里面还有一些小问题，IE和Opera中，screenLeft和screenRight保存的是屏幕左边和上边由window对象表示的页面可见区域的距离。

moveTo（接受的是新的X,Y坐标），moveBy（接收的是在水平上移动的像素数）

但是这两个方法可能会被浏览器禁用，另外这两个方法不适用于框架，只能对window最外层使用。

3 窗口大小

跨浏览器确定窗口大小很麻烦。

IE9+、Firefox、Safari、Opera和chrome都提供了：innerHeight、innerWidth、outerHeight、outerWidth四个属性。

IE9+、Firefox、Safari中，outerHeight、outerWidth返回浏览器本身的尺寸。Opera中这两个值表示页面视图容器的大小。

innerHeight、innerWidth表示该容器中页面视图区的大小（减去边框宽度）

chrome中innerHeight、innerWidth和outerHeight、outerWidth返回的一样的。

var width = window.innerWidth;
var height = window.innerHeight;
if (typeof width != "number") {
	if (document.compatMode == "CSS1Compat") {
		width = document.documentElement.clientWidth;
		height = document.documentElement.clientHeight;
	} else{
		width = document.body.clientWidth;
		height = document.body.clientHeight;
	}
} 
console.log(width + " and " + height);

对于移动设备，window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕可见页面区域的大小。

移动IE浏览器不支持这些属性，但通过document.documentElement.clientHeight提供了相同的信息。随着页面的缩放，这些值也会相应变化。

调整窗口：

resizeTo（）：接受浏览器的新宽度和新高度；

resizeBy（）：接受新年窗口和原窗口的宽度和高度之差。

Tip：这两种方法不适用于框架，而只能对最外层的window对象使用。

4 导航和打开窗口

这一块主要说window.open方法，可以接受多个参数，一般来说：

第一个参数为url：window.open（“url”）；

第二个参数可以是已存在的窗口或者框架名或者_self、_parent、_top、_blank；

第三个参数通过逗号分隔的名值对列表指定，包括height、width、fullscreen、left、location、menubar、resizable、scrollbars、status、toolbar等等。

close方法可以关闭窗口。

5 间歇调用和超时调用

超时调用：只执行一次。

setTimeout(function(){
	console.log(1);
},1000);

但是这样写会造成性能损失。一般推荐：

var time = setTimeout(function(){
	console.log(1);
},1000);

取消调用：

clearTimeout(time);

间歇调用：按照指定的时间重复执行代码。

var time = setInterval(function(){
	console.log(1);
},1000);

取消

clearInterval(time);

6 系统对话框

浏览器通过prompt、alert、confirm三种方法调用系统对话框。

1、alert

只接受一个参数：弹出内容。

2、prompt

点击出“确认”外的按钮返回null。

var pro = prompt("ss","");
if (pro == null) {
	console.log("null");
} else{
	console.log(pro);//输入的值
}

3、confirm

if (confirm(1)) {
	console.log("t");
} else{
	console.log("f");
}

还有其他两个可以打开提示窗口的方法：

//显示打印
window.print();
//显示查找
window.find();

location对象

location有点特别，主要是因为它既是window对象的属性也是document对象的属性，也就是说window.location和document.location引用的是同一个对象。

其作用是：1、保存当前文档的信息；2、将URL解析成独立的片段。

location对象的主要属性：

hash、host、hostname、href、pathname、port、protocol、search

待续。。。。