『
Week NO.5』
8.1 window对象
bom的核心是window,window既是js访问浏览器的一个接口,同时又是global对象。
8.1.1 全局作用域
在全局作用域中声明的变量和函数都将成为window的属性和方法。
定义全局变量和window对象上直接定义属性的区别:前者不能被delete操作符删除,后者可以
var name = “meiyzeng”;
window.age = "26"
delete window.name
alert (window.name) // "meiyzeng"
delete window.age
alert (window.age ) // "undefined"
另外,可以通过window对象查询未声明变量是否存在:
var sex = guess //error
var sex = window.guess //sex为undefined
8.1.2 窗口和框架
top:
在frames 中 top对象始终指向最外层框架,也就是浏览器窗口。为了保证在一个框架中访问另一个框架,通常用
top.frames[0]代替window.frames[0]
parent:
parent对象始终指向当前框架的上层框架,在没有框架情况下等于top。
( ps:除非最高层的窗口是通过window.open()打开,否则window对象中的name属相不含有任何值。)
self:
self始终指向window,可以和window互换。
8.1.3兼容浏览器获得窗口位置:
var leftpos = (typeof window.screenLeft =="number")? window.screenLeft : window.screenX
在最外层window对象中有moveTo()定位方法和moveBy()移动方法,但不兼容低版本浏览器。
8.1.4窗口大小:
document.documentElement.clientHeight || document.body.clientHeight;
同样有不兼容低版本浏览器两种方法调整窗口大小:
window.resizeTo(100,100) //调整窗口为100*100
window.resizeBy(100,50) //调整窗口到200*150
8.1.5导航和窗口打开
window.open()接收四个参数:URL、窗口目标、特定字符串、是否替代当前页面的布尔值。
其中窗口目标有:_top,_parent,_self,_blank四个特殊值。也可直接为窗口名称
8.1.6 间歇调用和超时调用
超时调用:setTimeout()方法,接收两个参数,一个执行代码,另一个为时间。其对应有clearTimeout()方法取消
间歇调用:setInterval()方法同样接手两个参数。其对应的取消方法为有clearInterval() 。
使用超时调用来模拟间歇调用时一种最佳模式,因为后一个间歇调用有可能在前一个间歇调用结束前便启动,所有不建议使用。
8.1.7 系统对话框
alert、confirm、prompt三种方法都可以调用系统对话框。
除此外,还有window.find()和window.print通过js打开的对话框。
8.2 location对象
window.location和document.location引用的是同一个对象。location对象的用处不仅是保存当前文档的信息,而且它将URL解析成独立片段。
8.2.1 查询字符串参数
从上面的search(注意这里的search为location的属性,有别于search()方法)我们知道可以通过其返回从?开始到末尾的url字符串,但是无法访问每个查询字符串参数,故可创建函数解析查询字符串方法:
function getQuerySringArgs(){
//取得查询字符串 并去掉?
var qs = {location.search.length > 0 ?location.search.substring(1) : ""},
//保存数据对象
args = {},
//取得每一项
items = qs.length?qs.split("&"):[],
item = null,
name = null,
value = null,
//在for循环中使用
i = 0 ,
len = items.length
//逐个添加到args对象中
for (i=0; i<len; i++){
item = item[i].split("=");
name = decodeURIComponent( item[0]); //解码
value = decodeURIComponent( item[1]);
if (name.length){
args[name] = value;
}
}
return args;
}
依照上述方法
比如:在百度中输入meiyzeng,则对应的网址会变成
http://www.baidu.com/s?word=meiyzeng&tn=sitehao123&ie=utf-8
1.利用search方法会得到从?开始的字符串:?word=meiyzeng&tn=sitehao123&ie=utf-8
3. 紧接着items即将字符串按 "&" 隔开拆分 则变成了[ word= meiyzeng ]、[tn=sizehao123] 和[ie= utf-8] 三个名值对;
4.再将三部分用"="拆分,则名分别为word、tn、ie 而对应的值分别为、meiyzeng、sizehao123、和utf-8。从而访问每个查询字符串参数。
8.2.2位置操作
在改变浏览器位置的方法中,最常用的是设置location.href属性。
下面三种方式其实效果一致:
window.location = "http://blog.csdn.net/meiyzeng8" ;
location.assign("http://blog.csdn.net/meiyzeng8") ;
location.href = "http://blog.csdn.net/meiyzeng8" ;
location具有较多属性,方法在此不一一列举, 除了修改hash属性外,其他均会以新URL来重新加载页面。而通过location的属性修改URL都将在浏览器中产生一条可“后退”的历史记录,要禁用该方法,可以使用replace()方法:
location.replace("http://blog.csdn.net/meiyzeng8") 。
另外,location.reload()方法的作用是重新加载当前页面,如果没有传进来参数,则会以最有效方式重新加载,但如果页面跟上次加载没有改变则可能读取缓存,要强制从服务器中重新加载可以使用location.reload(true),建议放至最后一行。
8.3 navigator对象
navigator对象的属性通常用于检测网页的浏览器类型。
8.3.1检测插件
非ie:使用plugins数组(包含name、description、filename、length)
ie:唯一方式使用专有的ActiveXObject类型,并尝试创建一个特定插件实例。ie是以com对象的方式实现插件的,而com对象使用唯一标识符来标识,要检测必须知道其com表示符。
8.4 history对象
history对象保存着用户上网的历史记录,使用go()方法可以在历史记录中任意跳转。
go(-1) //后退一页 等同于 history.back()
go(1) //前进一页 等同于 history.forward()
go(2) //前进两页
也可以在go(“string“)中传入字符串,将跳转到历史记录中包含该字符串最近的位置,假如没有该字符串便不执行操作。
此外,history中的length的属性保存着历史记录的数量。