BOM
NO.1 window对象
BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是JS规定的Global对象。
全局变量会变成window对象的属性。
另外,全局变量不能通过delete删除,但是在window上定义的属性可以,在window上定义的属性还有一个好处就是当变量未声明的时候,访问的时候不会报错。
var newValue = oldValue; //报错
var newValue = window.oldValue //不报错
NO.2 窗口关系及框架
如果页面中包含框架,那么每个框架都有自己的window对象,保存在frames集合中。
要访问上面的框架,可以使用
window.frames[0]
window.frames["topFrame"]
top.frames[0]
top.frames["topFrame"]
frames[0]
frames["topFrame"]
最好使用top.frames[0]来引用
和top相对的另一个window对象是parent对象,parent对象始终执行当前框架的直接上层。
窗口位置:
使用如下代码可以取得窗口左边和上边的位置。
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
首先确定screenLeft和screenTop是否存在(在Safari、Opera和Choreme中)则取这两个属性的值,如果不存在(在Firefox中),则取得screenX和screenY的值
窗口大小:
四个浏览器都提供了四个属性: innerWidth,innerHeight,outerWidth,outerHeight
当pageWidth不是一个数值的时候,就是用window.innerWidth取不到的时候,然后判断页面是否处于标准模式,如果是标准模式,用上图那种方式取得浏览器宽度,如果不是,用另外一种。
用reszieTo()和resizeBy()方法可以调整浏览器窗口的大小。其中resizeTo()接收浏览器的新宽度和新高度。resizeBy()方法接收高度差。
导航和打开新窗口:
使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器的窗口。
这个方法可以接受四个参数:要加载的URL,窗口目标,一个特性字符串以及一个布尔值(表示新页面是否取代浏览器历史记录中当前加载页面)
close()方法可以关闭新打开的窗口。
大多数浏览器都有屏蔽弹出窗口程序,如果窗口被内置的屏蔽程序阻止了。你们window.open()会返回null。此时,只要检测这个值就可以确定弹出的窗口是否被屏蔽。
如果是内置屏蔽程序(window.open ==null
):
var wroxWin = window.open("http://young.club", "_blank");
if (wroxWin == null){
alert("弹出窗口被浏览器内置屏蔽程序阻止");
}
如果是浏览器扩展或者其他程序阻止(window.open报错
):
var blocked = false;
try{
var wroxWin = window.open("http://youngi.club","_blank")
if(wroxWin==null){
blocked == true;
}
} catch (ex){
blocked == true;
}
if (blocked){
alert("窗口被拦截");
}
间歇调用和超时调用:
javascript是单线程语言,它允许设置超时值和间歇时间来调度代码在特定时刻执行。
超时调用需要使用window对象的setTimeout()方法,它接受两个参数,要执行的代码以及毫秒。
不建议的方式(原因,传递字符可能导致性能损失):
setTimeout("alert('hello world')", 1000);
建议的方式:
setTimeout(function(){
alert("hello world!");
},1000);
调用setTimeout后,该方法会返回一个数值ID,表示超时调用,这个ID是计划执行代码的唯一标示符,可以用来取消超时调用
var timeoutId = setTimeout(function(){
alert("hello world!");
},1000);
ClearTimeout(timeoutId);
类似,间隙调用:
var setInterval = setTimeout(function(){
alert("hello world!");
},1000);
ClearInterval(setInterval);
系统对话框:
alert()和confirm(),prompt()可以调用系统对话框向用户显示消息,系统对话框的外观由浏览器设置或者操作系统决定。
NO.3 location对象
location是最有用的BOM对象之一。它提供了与当前窗口加载的文档有关的信息,他还提供了一些导航功能。它既是window对象的属性,也是document对象的属性。
location可以将URL解析为独立的片段,让开发人员通过不同的属性访问这些片段。
location.search可以访问从问号到URL末尾的所有内容。
location.assign("http://youngi.club")可以立即打开新的URL
location.assign("http://youngi.club")
window.location = "http://youngi.club"
location.href = "http://youngi.club"
这三条语句等价
location属性还可以对URL进行一系列操作,如下:
这个时候如果用户点击后退按钮,还是能回到前一个页面,如果想要禁止这种行为,可以用replace()方法。
setTimout(function(){
location.replace("http://youngi.club")
},1000)
reload()方法,重载当前页面,当没有参数的时候,会自动从缓存中重新加载,如果需要从服务器加载,需要传递参数true,reload()方法最好放在最后一行,因为它会导致它之后的代码不执行
location.reload(); //从缓存加载
location.reload(true); //从服务器加载
NO.4 navigator对象
navigator对象包含的属性描述了正在使用的浏览器
navigator.plugins[]表示浏览器所用的插件的集合
NO.5 screen对象
screen对象基本上只是用来表明客户端的能力,包含浏览器窗口外部显示器的信息,如像素高宽
NO.5 history对象
history对象保存中用户上网的历史记录,处于安全考虑,开发人员无法得知用户浏览过的URL。使用go方法可以在用户的历史记录中任意跳转:
history.go(-1); //后退一页
history.go(3); //前进三页
history.go("youngi.club"); //跳到最近的youngi.club页面
history还有一个length属性,保存历史记录的数量
if(history.length == 0){
//是用户打开窗口的第一个页面
}
NO.6 客户端检测
因为浏览器多样性,所以需要客户端检测方法,来突破或者规避种种局限性。
举个例子,在IE5.0之前的版本不支持document.getElementById()这个DOM方法,所以要使用document.all这个非标准的属性实现相同目的。
能力检测代码:
function getElement(id){
if (document.getElementById){
return document.getElementById(id);
} else if(document.all){
return document.all[id];
} else{
throw new Error {"没办法获取到元素"}
}
}
NO.7 客户端完整代码
见Javascript高级程序设计(第三版)242页~245