JavaScript高级程序设计6--BOM

最新推荐文章于 2022-04-18 10:26:33 发布

木槿花开lalala

最新推荐文章于 2022-04-18 10:26:33 发布

阅读量286

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zl_best/article/details/53562380

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。
一、window对象
BOM的核心对象是window，它表示浏览器的一个实例。
1.全局作用域
由于window对象同时扮演着ES中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
2.窗口关系及框架
在使用框架时，每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本，每个框架都保存在frames集合中，可以通过位置或名称来访问。
窗口指针：

top对象：始终指向最高（外）层的框架；
parent对象：始终指向当前框架的直接上层框架；
self对象：始终指向window；

3.窗口位置
跨浏览器取得窗口左边和上边的位置：

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

注意：使用moveTo()和moveBy()可以将窗口精确的移动到一个新位置，但有可能会被浏览器禁用。
4.窗口大小
取得页面视口的大小：

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

注意：使用resizeTo()和resizeBy()可以调整浏览器窗口的大小，但有可能会被浏览器禁用。
5.导航和打开窗口
window.open()方法:可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
接收四个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代当前加载页面的布尔值。第二个参数也可以是以下任何一个特殊的窗口名：_self/_parent/_top/_blank.

window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

opener属性:保存打开它的原始窗口对象，将其值设置为null表示新创建的标签页不与打开它的标签页通信。
6.间歇调用和超时调用
超时调用：setTimeout()方法，取消超时调用clearTimeout()方法；
间歇调用：setInterval()方法，取消间歇调用：clearInterval()方法；
7.系统对话框

//alert()方法：提示对话框
alert("hello world");
//confirm()方法：确认对话框
if (confirm("Are you sure?")){
alert("Yes!");
} else {
alert("No");
}
//prompt()方法：提示输入框
var result = prompt("What is you name? ", "");
if (result !== null){
alert("Welcome, " + result);
}

二、location对象
使用location对象可以通过编程方式来访问浏览器的导航系统。
1.查询字符串参数
location.search:返回从问号到URL末尾的所有内容。
2.位置操作

location.assgin("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
location.replace("http://www.wrox.com");	//该方法新URL会替换浏览器历史记录中当前显示的页面
location.reload();	//重新加载（有可能从缓存中加载）
location.reload();	//重新加载（从服务器重新加载）

三、navigator对象
navigator对象现在已经成为识别客户端浏览器的事实标准。
1.检测插件
非IE浏览器使用plugins数组检测插件，该数组的每一项都包含下列属性：

name：插件的名字；
description：插件的描述；
filename：插件的文件名；
length：插件所处理的MIME类型数量；

在IE浏览器中检测插件是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例，它是以COM对象的方式实现插件的，而COM对象使用唯一标识符来标识。
2.注册处理程序
registerContentHandler()方法：接收三个参数（要处理的MIME类型、可以处理该MIME类型的页面的URL以及应用程序的名称）。
registerProtocolHandler()方法：接收三个参数（要处理的协议、可以处理该协议的页面的URL以及应用程序的名称）。
四、screen对象
screen对象用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。
五、history对象
go()方法：可以在用户的历史记录中任意跳转，可以向前也可以向后，这个方法接收一个参数（向前或向后跳转的页面数的整数值，或者跳转到历史记录中所包含的第一个位置的字符串）。

//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的wrox.com页面
history.go("weox.com");
//后退一页
history.back();
//前进一页
history.forward();

//history对象还有一个length属性，保存着历史记录的数量。
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}