1.认识BOM
window对象对应着浏览器窗口本身,这个对象的属性和方法通常被统称为BOM(浏览器对象模型)。BOM向程序员提供了window.open和window.blur等方法。
常用方法:
Alert()、Confirm()、Prompt()
Close()、open()
moveBy()、moveTo()移动窗口
resizeBy()、resizeTo()重设窗口大小
scrollBy()、scrollTo()滚动
setInterval()、clearInterval()设置、删除定时器
——wondow对象
I.全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
栗子:
Var age=29;
Function sayAge(){
Alert(this.age);
}
Alert(window.age);//29
sayAge();//29
window.sayAge();//29
我们在全局作用域中定义了一个变量age和一个函数sayAge(),它们被自动归在了window对象名下。于是,可以通过window.age访问变量age,可以通过window.sayAge()访问函数sayAge().由于sayAge()存在于全局作用域中,因此this.age被映射到window.age,最终显示的仍然是正确的结果。
II.窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引或者框架名称来访问相应的window对象。每个window对象都有一个name属性,其中包含框架的名称。
下面是一个包含框架的页面:
核心代码:
<frameset rows=”160,*”>
<frame src=”frame.htm” name=”topFrame”>
<frame cols=”50%,50%”>
<frame src=”anotherframe.htm” name=”leftFrame”>
<frame src=”yetanotherframe.html” name=”rightFrame”>
</frameset>
III.窗口位置
用来确定和修改window对象位置的属性和方法有很多。IE、Srfari、Opera和Chrome都提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox则在screenX和screenY属性中提供相同的窗口位置信息,Safari和Chrome也同时支持这两个属性。Opera虽然也支持screenX和screenY属性,但与screenLeft和screenTop属性并不对应,因此建议大家不要在Oprea中使用它们。
代码:
Var leftPos=(typeof window.screenLeft==”number”)?
window.screenLeft:window.screenX;
Var topPos=(typeof window.screenTop==”number”)?
window.screenTop:window.screenY;
这个例子运用三目运算符首先确定screenLeft和screenTop属性是否存在,如果是(在IE、Safari、Opera和Chrome中),则取得这两个属性的值。如果不存在(在firefox),则取得screenX和screenY的值。
IV.打开窗口
打开新窗口(window.open)
open()方法可以查找一个已经存在或者新建的浏览器窗口
window.open([URL],[窗口名称],[参数字符串]);
参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开的窗口的名称."_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开
栗子:
打开百度首页,大小为300px*200px,无菜单,无工具栏,无状态栏,有滚动条窗口。
window.open
('http://www.baidu.com','_blank','width=300,height=200,menubar=n
o,toolbar=no,status=no,scrollbar=yes');
关闭窗口(window.close)
window.close();//关闭本窗口
<窗口对象>.close();//关闭指定的窗口
V.间歇调用和超时调用
超时调用是指在指定的时间过后执行代码,而间歇调用是每隔指定的时间就执行一次代码。
(1)超时调用需要使用window对象的setTimeout()方法。接受两个参数:要执行的代码和以毫秒表示的时间。第一个参数可以是一个包含js代码的字符串,也可以是一个函数。(动画部分用到)
调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。这样就用到了clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
栗子:
//设置超时调用
Var timeoutId=setTimeout(function(){
Alert(“Hello world!”);
},1000);
//取消
clearTimeout(timeoutId);
(2)间歇调用与超时调用类似,只不过他会按照指定的时间间隔重复执行代码,直到间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout相同。它也会返回一个间歇调用ID,可用于取消间歇调用。方法是clearInterval().
栗子:
Var num=0;
Var max=10;
Var intervalId=null;
Function incrementNumber(){
Num++;
//如果执行次数到了max设定的值,则取消后续尚未执行的调用
If(num==max){
clearInterval(intervalId);
Alert(“Done”);
}
}
intervalId=setInterval(incrementNumber,500);
VI.系统对话框
(1).警告(alert消息对话框)
alert(字符串或变量);
(2)确认(confirm消息对话框)
弹出对话框允许用户做选择的动作(确定or取消)
confirm("你喜欢javascript吗?");
返回值:boolean值
确定,返回true
取消,返回false
(3)提问(prompt消息对话框)
弹出消息对话框(包含一个确定按钮,取消按钮与一个文本输入框)
prompt(str1,str2);
参数说明:
str1:要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
I.点击确定按钮,文本框中的内容将作为函数返回值
II.点击取消按钮,将返回null
——location对象
Location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关 的信息,还提供了一些导航功能。
I.位置操作
使用location对象可以通过很多方式改变浏览器的位置。首先,也是最常用的方式,就是使用assign()方法并为其传递一个URL,如下所示:
Location.assign(“http://www.wrox.com’);
这样,就可以立即打开新URL,并在浏览器的历史记录中生成一条记录。下面两行代码与显式调用assign()方法的效果完全一样。
Window.location=”http://www.wrox.com”;
Location.href=”http://www.wrox.com”;
另外,修改location对象的其他属性也可以改变当前加载的页面。
//假设初始URL为http://www.wrox.com/WileyCDA/
//将URL修改为”http://www.wrox.com/WileyCDA/#section1”
Location.hash=”#section1”;
//将URL修改为”http://www.wrox.com/WileyCDA/?q=javascript”
Location.search=”?q=javascript”;
//将URL修改为”http://www.yahoo.com/WileyCDA/”
Location.hostname=”www.yahoo.com”;
//将URL修改为”http://www.yahoo.com/mydir/”
Location.pathname=”mydir”;
//将URL修改为”http://www.yahoo.com:8080/WileyCDA/”
Location.port=8080;
当通过上述任何一种方式修改URL之后,浏览器的历史记录就会生成一条新纪录,因此用户通过单击”后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用replace()方法。这个方法只接受一个参数,即要导航到的URL。
与位置有关的最后一个方法是reload(),作用是重新加载当前显示的页面。如果调用reload()时不传递任何参数,页面就会以最有效的方式重新加载。也就是说,如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载,则需要传递参数为true。
——Screen对象
Js中有几个对象在编程中用处不大,而screen对象就是其中之一。Screen对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器中的screen对象都包含着不同的属性。
——history对象
History对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。
使用go()方法可以在用户的历史记录中任意跳转,可以向前也可以向后。这个方法接受一个参数,表示向前或向后的整数,负数表示向后跳,正数表示向前跳。还可以使用两个简写方法back()和faword()来代替go().除了上述几个方法外,history还有一个length属性,保存着历史记录的数量。