8.1 window对象
BOM的核心对象是window,它表示浏览器的一个实例。在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权限访问parseInt()等方法。
8.1.1 全局作用域
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。但是定义全局变量和在window对象上直接定义属性有一个差别:全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以(因为全局变量有一个名为[[Configurable]]的特性,这个特性被设置为false,因此不能通过delete操作符删除)。
var a=1;
window.b=2;
console.log(window.a); // 1
delete window.a;
delete window.b;
console.log(window.a); // 1
console.log(window.b); // undefined
尝试访问未声明的变量会抛出错误,但是通过window对象的属性进行查询就可以知道某个未声明的全局变量是否存在。
var b = a; // 报错
var b = window.a; // b为undefined
8.1.2 窗口关系及框架
在多框架的页面中,因为每个框架都有自身的window属性,但top对象始终指向最高层框架,也就是浏览器窗口。parent对象表示当前框架的父框架。self对象始终指向window,与window对象可以互换使用。这些对象都是window对象的属性,可以通过window.parent,window.top访问。
8.1.3 窗口位置
IE、Safari、Opera和chrome用screenLeft和screenTop分别表示窗口相对于屏幕左边和上边的距离,Firefox用screenX和screenY提供同样的窗口位置信息。使用下列代码可跨浏览器取得窗口位置。
var leftScreen = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topScreen = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
8.1.4 窗口大小
现代浏览器(IE9+)提供4个属性表示窗口大小:innerWidth,innerHeight,outerWidth,outerHeight。其中innerWidth,innerHeight表示页面视图区域的大小(减去网页边框的可见区域),outerWidth,outerHeight表示浏览器窗口本身的尺寸。
早期浏览器(IE8以前)通过DOM提供相关信息,标准模式下document.documentElement.clientWidth,document.documentElement.clientHeight保存视口信息,混杂模式下document.body.clientWidth,document.body.clientHeight表示视口信息。
// 表示去除边框的浏览器范围大小
console.log("window.innerWidth",window.innerWidth);
console.log("window.innerHeight",window.innerHeight);
// 表示整个浏览器窗口大小
console.log("window.outerWidth",window.outerWidth);
console.log("window.outerHeight",window.outerHeight);
// 表示去除边框和滚动条的浏览器范围大小
console.log("document.documentElement.clientWidth",document.documentElement.clientWidth);
console.log("document.documentElement.clientHeight",document.documentElement.clientHeight);
// 表示body元素的大小
console.log("document.body.clientWidth",document.body.clientWidth);
console.log("document.body.clientHeight",document.body.clientHeight);
8.1.5 导航和打开窗口
使用window.open()方法可以导航到一个特定的URL,接受4个参数:要加载的URL,窗口目标,一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传入第一个参数即可。打开的窗口可以通过top.close()进行关闭。关闭打开的窗口后,其引用仍然存在,可以通过其引用的closed属性来判断是否关闭掉了打开的窗口。
当弹出窗口被屏蔽时,如果是被浏览器内置屏蔽程序阻止的,则window.open()很可能会返回null,如果是被浏览器扩展或其他程序阻止的,则会报错。
8.1.6 间歇调用和超时调用
超时调用,window.setTimeout(),接受两个参数,第一个是要执行的代码,第二个是经过该时间后将改代码添加到Javascript的任务队列中。由于Javascript是单线程语言,所以经过给定的时间后代码不一定会执行,而是添加到当前任务队列中,队列是空就会立即执行,否则需要等待队列中前面的代码执行完毕才会执行。
setTimeout()调用后会返回一个唯一标识ID,setTimeout()里的代码执行前,可以通过clearTimeout(ID)方法将超时调用清除。
间歇调用,window.setInterval(),参数与setTimeout()方法相同,每次经过给定时间间隔将代码添加到任务队列中执行。可使用setTimeout()代替:
var a=0;
var b=10;
function time() {
a++;
if(a<b){
setTimeout(time,1000);
}else{
alert("OK");
}
}
setTimeout(time,1000);
8.1.7 系统对话框
浏览器通过alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息,它们的外观由操作系统及浏览器本身设置决定,而不是CSS决定。通过这几个方法打开的对话框都是同步的,也就是说,显示这些对话框的时候代码会停止执行,关闭对话框的时候代码又会恢复执行。
alert()方法接收一个字符串并将其显示给用户。通常用来生成警告类的对话框显示一些用户无法控制的信息。
confirm()方法同样接收一个字符串显示给用户,它有两个选择按钮,一个是确认,一个是取消,点击确认该方法会返回true,点击取消或者单击右上角的X会返回false。
prompt()方法创建的对话框会带有一个输入框和确认取消两个按钮,接收两个参数,一个是显示给用户的提示信息,另一个是其自带输入框中的默认值,点击确认则返回输入框中的内容,点击取消或者关闭对话框返回null。
8.2 location对象
location对象提供了当前窗口中加载的文档有关信息。还提供了一些导航功能,它既是window对象的属性,也是document对象的属性,即window.location和document.location引用的是同一个对象。所有属性文档。
8.2.1 查询字符串参数
location.search可以返回URL中从问号到结尾的所有内容,通过下列方法可以解析查询字符串,将其转化为一个包含所有参数的对象。
function changeSearchString() {
// 获取查询字符串,创建储存信息对象
var str = location.search;
var obj = {};
// 查询字符串存在时去除问号
if(str.length>0){
str = str.substring(1);
}else {
return obj;
}
// 分割查询字符串为一个数组,创建临时变量
var items = str.split("&");
var item,name,value,i;
// 解析分割后的字符串,因为查询字符串是被编码过的,用decodeURIComponent()方法解码,并将每一项添加到obj对象当中
for(i =0; i<items.length; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if(name.length){
obj[name] = value;
}
}
return obj;
}
8.2.2 位置操作
location.assign()方法接收一个URL,立即打开新的URL并在历史记录中生成记录,如果是将location.href或者window.location设置为一个新的URL值,也会以该值调用location.assign()方法。可以使用后退按钮退回之前的页面。
location.replace()与location.assign()方法相似,也是打开新的URL,但location.replace()方法不会生成历史记录,相当于用新的URL代替了原来的页面。无法使用后退按钮回到之前的页面。
location.reload()方法的作用是重新加载当前显示的页面,不传任何参数时,浏览器会以最有效的方式重新加载,即自上次请求以来没有改变过,则从缓存中加载。传递true作为参数时,会冲服务器重新加载当前页面。
8.3 navigator对象
navigator对象是识别客户端浏览器的事实标准。navigator对象的属性通常用来检测显示页面的网页浏览器类型。所有属性文档。
8.4 screen对象
screen对象在编程中用处不大,基本只用来表明客户端的能力。包括浏览器窗口外部的显示器信息。
8.5 history对象
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,因为history是window对象的属性,所以每个浏览器窗口、每个标签乃至每个框架,都有自己的history对象与特定的window对象相关联。
history.go()方法可以在历史记录中任意跳转,这个方法接收一个参数,传入整数值时,跳转相应的页面:
// 前进一页,相当于前进按钮,简写方法为history.forward();
history.go(1);
// 后退一页,相当于后退按钮,简写方法为history.back();
history.go(-1);
// 前进两页
history.go(2);
传入字符串时,跳转到历史记录中包含该字符串的第一个页面,可能前进,也可能后退
// 跳转到最近的baidu.com页面
history.go("baidu.com");
history对象还有一个length属性,保存着历史记录的数量,即当length属性为0的时候,表示这是浏览器当前标签打开的第一个页面。