window 对象
全局作用域
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。虽然有上述说法,但是定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。因为用var语句添加的window属性有一个[[Configurable]]的特性,值被设置为false。尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在。
窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。每个window对象都有一个name属性,包含框架的名字。 除非最高层窗口是通过window.open()打开的,否则其在window对象的name属性不会包含任何值。top对象始终指向最高(外)层的框架,也就是浏览器窗口。parent对象始终指向当前框架的直接上层框架。在没有框架的时候,parent==top。self对象始终指向window。
<html>
<head>
</head>
<frameset rows="100,*">
<frame src="frame.htm" name="topFrame">//window.name=topFrame
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
//可由window.frames[1]、window.frames["leftFrame"]、top.frames[1]、top.frames["leftFrame"]、frames[1]、frames["leftFrame"]来引用
<frame src="anotherframeset.htm" name="rightFrame">//这个框架包含了下述的框架集
</frameset>
</frameset>
</html>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame">//parent.name=rightFrame
<frame src="blue.htm" name="blueFrame">
</frameset>
窗口位置
确定位置:
screenLeft、screenTop属性:IE、Safari、Opera、Chrome
screenX、screenY属性:Firefox
var leftPos=(
typeof window.screenLeft==
"number")?window.screenLeft:window.screenX;
var topPos=(
typeof window.screenTop==
"number")?window.screenTop:window.screenY;精确移动位置
moveTo()接收的是新位置的x、y坐标值。moveBy()接收的是向右、下移动的像素数。这两个方法都不适用于框架,只能对最外层的window对象使用。
窗口大小
确定大小
outerWidth和outerHeight在IE9、Safairi和Firefox中返回浏览器本身的尺寸。在Opera中,这两个属性表示页面视图容器的大小,而innerWidth和innerHeight则表示该容器页面视图区的大小(减去边框宽度),在Chrome中,返回相同的值。IE、在Opera、Chrome、Safairi和Firefox中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息,在IE6中,这些在标准模式下才有效,如果是混杂模式,就必须通过document.body.clientWidth和document.body.clientHeight属性。
var pageWidth=window.innerWidth;
var 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()接收新窗口与原窗口的宽度和高度之差。这两个方法都不适用于框架,只能对最外层的window对象使用。
导航和打开窗口
window.open()使用
window.open(要加载的URL,窗口目标,一个特性字符串,表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)。该方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。返回指向新窗口的引用。通常只需传递第一个参数。如果传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数URL。如果第二个参数并不存在,则会根据第三个参数创建一个新窗口或者新标签页,如果没有第三个参数,则默认打开一个新浏览器窗口。第三个参数是以逗号分隔的名值对。有关
新创建的window对象有一个opener属性,保存着打开它的原始窗口对象。这个属性只在弹出窗口中的top层有定义。如果需要浏览器在独立的进程中运行每个标签页,需要将新创建的opener属性设置为null,即表示在单独的进程中运行新标签页。
弹出窗口屏蔽程序
如果是浏览器内置的屏蔽程序阻止的弹出窗口,那么window.open()很可能会返回null;如果是其他程序组织的,window.open()会抛出一个错误。
var blocked=
false;
try{
var wrox=window.open(
"http://www.wrox.com",
"_blank");
if(wrox==
null){
blocked=
true;
}
}
catch(ex){
blocked=
true;
}
if(blocked){
alert(
"the popup was blocked");
}
间歇调用和超时调用
超时调用
表示在指定的时间过后执行代码。setTimeout(要执行的代码,等待时间)第一个参数因为可能导致性能损失,所以建议函数。第二个参数表示过多长时间把当前任务添加到任务队列中,如果队列为空则立即执行,如果不为空,则需等待。setTimeout()的返回值,是超时调用ID,是计划执行代码的唯一标识符,可以将它传给clearTimeout()来取消尚未执行的超时调用计划。
var timeID=setTimeout(
function(){
alert(
"hello");
},
1000);
clearTimeout(timeID);间歇调用
表示每隔一段时间执行一次代码。setInterval()使用与上述差不多。可以使用clearInterval(timeID)来取消。使用超时调用来模拟间歇调用是一种最佳模式。
系统对话框
alert():警告对话框,包含传入的字符串和确定按钮。confirm():确认对话框,还显示了取消按钮。点击确定返回true,否则返回false。prompt():提示框,用于提示用户输入一些文本,会显示一个文本输入框。接收两个参数:要显示给用户的文本提示和文本输入域的默认值(可为空)。会返回用户输入的值,如果没有输入,则返回null。如果当前脚本在执行过程中会打开2个或2个以上的对话框,从第2个开始之后会显示一个复选框,以便用户组织后续的对话框显示,除非用户刷新页面。
location对象
提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。既是window对象的属性,也是document对象的属性。它还将URL解析为独立的片段,可以通过不同的属性访问这些片段。location对象的所有属性:
hash:返回#后跟0或多个字符,”#contents”
host:返回服务器名称和端口号,”www.wrox.com:80”
hostname:返回不带端口号的服务器名称,”www.wrox.com”
href:返回完整的URL,tostring()方法也返回这个,”http:/www.wrox.com”
port:返回端口号,如果没有返回空字符串,”8080”
pathname:返回URL中的目录和文件名,”/WileyCDA”
protocol:返回页面使用的协议,”http:”
search:返回URL的查询字符串,以问号开头,”?q=javascript” 名值对
查询字符串
下面这个函数可以解析查询字符串,返回一个包含所有名值对的对象。
function getsearch(){
var qs=(location.search.length>
0?location.search.substring(
1):
"");
args={};
items=qs.length?qs.split(
"&"):[];
item=
null;
name=
null;
value=
null;
for(
var i=
0;i<items.length;i++){
item=items[i].split(
"=");
name=decodeURLComponent(item[
0]);
value=decodeURLComponent(item[
1]);
if(name.length){
args[name]=value;
}
}
return args;
}
var args=getsearch();
alert(args[
"q"]);
alert(args[
"num"]);
位置操作
通过一些方式来改变浏览器的位置
location.assign(“URL”);//打开新URL并生成一条历史纪录。window.location=”URL”等同于location.href=”URL”等同于上述。location.hash=”#section1”;//更改hash部分location.searchlocation.hostnamelocation.pathnamelocation.port以上方式都相同,且都会在历史纪录中生成一条新纪录。如果不想生成新记录,可以使用replace(“URL”)方法,这样之后用户是不能通过“后退”来回到前一个页面。reload()重新加载页面,位于这之后的代码可能不会执行,所以最好这行代码放到最后。
location.reload();
location.reload(
true);
navigator对象
是识别客户端浏览器的事实标准 。navigator对象的属性通常用于检测显示网页的浏览器类型。
检测插件
非IE的浏览器使用plugins数组。数组中的每一项都包含四个属性:name(插件的名字),description(插件的描述),filename(插件的文件名),length(插件所处理的MIME类型数量)。
function hasPlugin(name){
name=name.toLowerCase();
for(
var i=
0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-
1){
return true;
}
}
return false;
}
alert(hasPlugin(
"Flash"));
对于IE浏览器,只能使用ActiveObject类型,并尝试创建一个特定插件的实例,要想检测特定的插件,就必须知道其COM标识符。比如,Flash的标识符是ShockwaveFlash.ShockwaveFlash。
function hasIEPlugin(name){
try{
new ActiveObject(name);
return true;
}
catch(ex){
return false;
}
}
alert(hasIEPlugin(
"ShockwaveFlash.ShockwaveFlash"));
典型的做法是针对每个插件分别创建检测函数,而不是使用前面的通用检测方法。
function hasFlash(){
var result=hasPlugin(
"Flash");
if(!result){
result=hasIEPlugin(
"ShockwaveFlash.ShockwaveFlash");
}
return result;
}
alert(hasFlash());
plugins集合有一个名叫refresh()的方法,用于刷新plugins以反映最新安装的插件,参数为布尔值,true表示重新加载页面,更新集合;flase表示不加载页面,只更新集合。
注册处理程序
可以让一个站点指明它可以处理特定类型的信息
registerContentHandle();接收三个参数:要处理的MIME类型,可以处理该MIME类型的页面URL,应用程序的名称。registerProtocolHandler();接收三个参数:要处理的协议,处理该协议的页面URL,应用程序的名称。
screen对象
表明客户端的能力,包括浏览器窗口外部的显示器的信息,如像素宽度和高度等
history对象
该对象保存着用户上网的历史纪录,从窗口被打开的那一刻算起
因为history是window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的history。go()方法
history.go(
1);
history.go(
2);
history.go(-
1);
history.go(
"wrox.com");
back()和forward()后退和前进一页history.length()保存着历史纪录的数量