@Dreamingboy
2017-04-17T06:28:12.000000Z
字数 8265
阅读 1399
JavaScript
window对象是JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。在网页中的任何一个对象、变量和函数，都是以window作为其Global对象
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
定义全局变量与在window对象上直接定义属性的差别：全局变量不能通过delete操作符删除，而直接在window对象上面定义的属性可以
访问未声明的变量会返回错误，但是通过查询window对象。可以知道某个可能未经声明的变量是否存在。
var window.a = b;//直接用var a = b;时会报错
在页面中加入框架，会创建一个frame对象，保存框架的window对象，每个框架都有属于自己的window对象，每个window对象都有一个name属性，对应框架的名字。
<html>
<head>
<title>Frame</title>
<frameset rows="160,*">
<frame src= "frame.htm" name= "topFrame">
<frame cols="50%,50%">
<frame src="frameleft.htm" name="leftFrame">
<frame src="frameright.htm" name="rightFrame">
</frameset>
</frameset>
</html>
1、top对象
top对象指向最高（最外）层的框架，即浏览器窗口。利用top对象可以在一个框架中正确地访问另外一个框架。
例如上面的代码中可以通过如下方代码访问其中的frame
top.frame[0];top.frame[1];
2、parent对象
始终指向当前框架的直接上层框架
除非最高窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值
3、self对象
始终指向window对象，可以和window对象互换，不包含其他值。
以上的对象都是window对象的属性，可以通过属性方法访问到，window.parent
1、screenleft/screentop：表示窗口相对于屏幕左边和上边的位置，适用于IE、Safari、Opera和Chrome
保存从屏幕左边和上边到由window对象表示的页面可见的区域距离。
2、screenX/screenY：表示窗口相对于屏幕左边有上边的位置，适用于Firefox、Safari和Chrome
保存的是整个浏览器窗口相对于屏幕的坐标值
Chrome、Safari和Firefox始终返回的是页面中每个框架的top.screenX和top.screenY值，即使在页面中设置边距发生偏移，相对于window对象使用screenx和screeny每次也会返回相同的值
3、moveTo()：接收两个参数，接收新位置的x和y坐标，
moveBY()：接收两个参数，接收水平和垂直方向上移动的距离，
这两个方法已经被大部分的浏览器禁用
1、innerWidth/innerHeight
返回该容器中页面视图区的大小（减去边框宽度）
在移动设备上面保存着可见视口，屏幕上可见区域的大小
2、outerWidth/outerHeight
返回浏览器窗口本身尺寸，Opera中返回的是一个单个标签页对应的浏览器窗口的大小
对于1、2 Chrome返回的是同样的值，即viewport（视口宽度）
3、document.documentElement.clientWidth/document.documentElement.clientHeight：保存页面视口的信息，IE、Firefox、Safari、Opera和Chrome
IE6只能在严格模式下才能获得相关信息
混杂模式下通过document.body.clientWidth/document.body.clientHeight获得同样的结果。
在非IE浏览器下面，document.documentElement度量的是布局视口，渲染后页面的实际大小
4、resizeTo()和resizeBy()
调整浏览器的窗口大小，接收两个参数，前者接收的浏览器窗口的新宽度和新高度；后者接收新窗口和原窗口的宽度和高度只差。
这两个方法可能会被禁用，在Opera和IE7中直接禁用，这两个方法不适用于框架，只对最外层的window对象使用
1、window.open()
导航到某个特定的URL或者是打开一个新的浏览器窗口
参数：
表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
一般只传入第一个参数，其他的参数只在不在新窗口打开的时候才会传入
window.open("http://.....","topFrame");
调用这行代码时，会在topFrame窗口打开链接
2、弹出窗口
如果第二参数是不存在的窗口，那么会根据第三个参数打开新窗口或者是新的标签页，如果没有传入第三个参数，就会打开默认的窗口。
第三个参数的一些特性
| 设置 | 值 | 说明 |
|---|---|---|
| fullscreen | yes/no | 浏览器窗口是否最大化，仅限于IE |
| height | nunber | 新窗口的高度，不能小于100 |
| left | number | 表示新窗口的左坐标 |
| location | yes/no | 表示是否在浏览器中显示地址栏，不同浏览器的默认值不同，可能会被禁用 |
| menubar | yes/no | 表示是否在浏览器窗口显示菜单栏，默认是no |
| resizable | yes/no | 表示是否可以通过拖动浏览器窗口的边框来改变其大小，默认是no |
| scrollbars | yes/no | 表示如果内容显示不了，是否允许滚动页面来显示内容，默认no |
| status | yes/no | 表示是否在浏览器窗口中显示显示状态栏，默认是no |
| toolbar | yes/no | 表示是否在浏览器窗口显示工具栏，默认是no |
| top | number | 表示新窗口的上坐标。不能是负值 |
| width | number | 表示新窗口的宽度，不能小于100 |
第三个参数可以多个数值，通过逗号来分隔
window.open("http://....","Frame","width=600px,height=400px,resizable=yes");
close方法
语法：windowname.close();
关闭窗口，仅适用于用window.open()方法打开的弹出窗口，浏览器的主窗口在没有用户允许不能关闭的，弹出窗口可以用top.close()在不经用户允许的情况下关闭自己
opener属性
保存着打开它的原始窗口对象，只在弹出窗口中的最外层window对象（top）中有定义，指向调用window.open()的窗口或者是框架
安全限制
IE7不允许关闭地址、默认情况下不允许移动弹出窗口或者调整窗口的打下，
弹出窗口屏蔽程序
一些浏览器有内置的限制弹出窗口的程序，也可以通过安装插件来限制窗口的的弹出。
1、当是浏览器的内置程序将弹出窗口限制的话，window.open()返回的是null，可以通过检测这个返回值来确定弹出窗口是否被屏蔽。
2、如果是插件限制窗口的弹出，则会返回错误。
JavaScript是单线程的，可以通过设置超时值和间歇时间值来调度代码在特定的时间执行。
超时调用：在指定的时间过后才执行代码
setTimeout()：接收两个参数，要执行的代码和在代码执行前需要等待的时间（以毫秒设置）
1）第一个参数可以是包含JavaScript代码的字符串也可以是函数，不要使用字符串，字符串可能导致性能的缺失
2）第二个参数是一个表示等待多长时间的毫秒数，但是经过该时间后代码不一定执行因为JavaScript是单线程执行，所以当经过第二个参数所设定的时间后如果队列是空的则会立即执行代码，否则则需要等到当前进程执行完毕后才会执行
3)调用setTimeout（）方法会返回一个数值ID，是计划执行的唯一标识符，可以用其来取消超时调用，用clearTimeout（）
var timeOut = setTimeout(function(){
alert("hello world");},1000);
clearTimeout(timeOut);//取消超时设置
间歇调用：每个指定的时间执行一次代码，重复执行代码，除非取消间歇调用或者是页面被卸载。
setInterval()：接受连个参数，第一个是要执行的代码，第二个是间歇时间，同样第一个参数不建议传入参数
setInterval("alert('Hello world')",1000);//不建议这种用法
setInterval(function(){alert("Hello World");},1000);//建议这种用法
1)调用setInterval()返回间歇调用的ID，可以使用clearInterval()来取消间歇调用。
var num=0;
var max=10;
var Intercal;
function setTimetry(){
num++;
if(num
clearInterval(Interval);
alert("Done");
};
Interval = setInterval(setTimetry,500);
系统对话框显示的时候，代码会停止执行，直到对话显示框关闭后代码才会继续执行。
1、alert()方法
2、confirm()方法
提供用户两个选项：OK和cancel
if(confirn("Are you sure")){
alert("i am glad to see you are sure");}
else{
alert("i am sorry to see you are no sure");}
3、prompt()
生成提示框，有OK、cancel选项和文本输入框，用于提示用户填入一些信息
接受两个参数：要给显示给用户的文本提示和文本输入域的默认值，第二个参数可以是一个空的字符串。
var result = prompt("what is your name?","");
if (result !== null){
alert("welcome"+result);
}
4、chrome、Firefox和IE9的特性
如果当前脚本在执行过程中会打开多个对话框，在第二个对话框开始就会提供一个选项给用户让其能够阻止后续对话框的弹出。
5、print()和find()
print()：window.print() 打印 异步显示，不受用户禁用后续对话框显示的影响
find()：window.find() 查找 异步显示，不受用户禁用后续对话框显示的影响
提供与当前窗口中加载的文档有关的信息和导航功能，可以将URL解析成独立的片段既是window的对象又是document对象，window.location/document.location
| 属性名 | 例子 | 说明 |
|---|---|---|
| hash | “#content” | 返回URL中的hash，如果URL不包含散列，返回空字符串 |
| host | “www.wrox.com:80" | 返回服务器的名称和端口 |
| hostname | ”www.wrox.com" | 返回不带端口号的服务器的名称 |
| href | “http:/www.wrox.com" | 返回当前加载页面的完整URL，对应的location的toString()方法也会返回完整的URL |
| patname | "/wileyCDA/" | 返回URL中的目录和文件名？ |
| port | "8080" | 返回URL中指定的端口号，不包含端口号，返回空字符 |
| protocol | "http" | 返回页面使用的协议，通常是http:或者是https: |
| search | "?q=javaScript" | 返回URL中的查询字符串。字符串以问好开头，级从问好开始到结束得内容 |
function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
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,
length = items.length;
//逐个将每一个项添加到args对象中
for (i=0;i<length; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length){
args[name] = value;
}
}
return args;
}
使用location对象及其方法来改变浏览器的位置
1、location.assign(URL)
通过传递一个URL打开一个新的URL并在浏览器的历史记录中生成一条记录
设置location.href和window.location可以实现和location.assign()一样得到效果。
location.href="http://www.....";
window.location="http://www.....";
最常见的方法是通过设置location.href的值来改变浏览器的位置
2、常见的改变当前加载页面的方法
"http://www.wrox.com/wileyCDA/"
location.hash = "#section";//后缀增加“#section”
location.search = "?q=JavaScript";//后缀增加“？q=JavaScript”
location.hostname = "www.yahoo.com";//"http://www.yahoo.com/wileyCDA/"
location.patname = "mydir";//"http://www.wrox.com/mydir/"
location.port = 8080;//"http://www.wrox.com:8080/wileyCDA/"
通过上面修改URL后页面都会跳转到新的页面，同时在浏览器中形成一条历史记录，可以通过后退回到之前的页面
3、replace()
直接跳转到新的页面不会生成新的记录，也就是说无法回到之前的页面。
setTimeout(function(){
location.replace("http://www.wrox.com/");
}，1000）;
3、location.reload()
重新加载当前显示的页面，当调用这个方法但是不传入这个参数时，页面就会从浏览器缓存中重新加载，如果想强制从服务器重新加载，需要传入参数true。由于网络延迟和系统资源的原因，reload后面的代码有可能不会执行，因此最好将其放在最后一句。
| 属性或者方法 | 说明 | IE | Firefox | Safari/Chrome | OperA |
|---|---|---|---|---|---|
| appCodeName | 浏览器名称，通常是Mozilla | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
| appMinorVersion | 次版本信息 | 4.0+ | - | - | 9.5+ |
| appName | 完整的浏览器的名称 | 3.0+ | 1.0+ | 1.0+ | 7/0+ |
| appVersion | 浏览器版本，一般不与实际的浏览器对应 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
| buildID | 浏览器编译版本 | - | 2.0+ | — | - |
| cookieEnabled | 表示coolie是否启动 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
| cpuClass | 客户端计算机中使用的CPU的类型 | 4.0+ | - | - | - |
| javaEnabled() | 表示当前浏览器是否启动了Java | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
| language | 浏览器的主语言 | - | 1.0+ | 1.0+ | 7.0+ |
| mimeType | 在浏览器中注册的MIME类型数组 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
| online | 表示浏览器是否联网 | 4.0+ | 1.0+ | - | 7.0+ |
| oscpu | 客户端计算机的操作系统或者是使用的CPU | - | 1.0+ | - | - |
| platform | 浏览器所在的系统平台 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
| plugins | 浏览器中安装的插件信息的数组 | 4.0+ | 1.0+ | 1.0+ | 7.0+ |
| preference() | 设置用户的首选项 | — | 1.5+ | - | - |
| product | 产品名字 | - | 1.0+ | 1.0+ | - |
| register-ContenHandler() | 针对特定的MIME类型将一个站点注册为处理程序 | - | 2.0+ | - | - |
| register-ProtocolHandler() | 这对特定的协议将一个站点注册为处理程序 | - | 2.0+ | - | - |
| systemLanguage | 操作系统的语言 | 4.0+ | - | - | - |
| userAgent | 浏览器的用户代理字符串 | 3.0+ | 1.0+ | 1.0+ | 7.0+ |
| userLanguage | 操作系统的默认语言 | 4.0+ | - | - | 7.0+ |
| userProfile | 借以访问用户个人信息的对象 | 4.0+ | - | - | - |
1、对于非IE浏览器，可以使用plugins数组达到目的，数组包含以下几个属性
length：插件处理的MIME类型数量
function Plugins(){
name = name.toLowerCase();
for (var i=0; i
if (navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
return true;
}
}
return false;
}
//检测Flash
alert(Plugin("Flash");
//检测QuickTime
alert（Plugin("QuickTime")）;
2、IE浏览器检测插件
IE是以COM对象来实现插件的，而COM对象使用唯一的标识符来标识
screen对象常见属性
| 属性 | 说明 | IE | Firefox | Safari/Chrome | Opera |
|---|---|---|---|---|---|
| availHeight | 屏幕的像素高度减去系统部件高度之后的值（只读） | Y | Y | Y | Y |
| availLeft | 未被系统部件占用的最左侧的像素值（只读） | N | Y | Y | N |
| availTop | 未被系统部件占用的最上方的系统部件的像素值（只读） | N | Y | Y | N |
| availWidth | 屏幕的像素宽度减系统部件宽度之后的值（只读） | Y | Y | Y | Y |
| bufferDepth | 读、写用于呈现屏外位图的位数 | Y | N | N | N |
| colorDepth | 用于表现颜色的位数 | Y | Y | Y | Y |
| deviceXDPI | 屏幕实际的水平DPI（只读） | Y | N | N | N |
| deviceYDPI | 屏幕实际的垂直DPI（只读） | Y | N | N | N |
| fontSmooth-ingEnabled | 表示是否启用了字体平滑（只读） | Y | N | N | N |
| height | 屏幕的像素高度 | Y | Y | Y | Y |
| left | 当前屏幕距左边的像素距离 | N | Y | N | N |
| logicalXDPI | 屏幕的逻辑水平DPI（只读） | Y | N | N | N |
| logicalYDPI | 屏幕的逻辑垂直DPI（只读） | Y | N | N | N |
| pixelDepth | 屏幕的位深 | N | Y | Y | Y |
| top | 当前屏幕距离上边的像素距离 | N | Y | N | N |
| updateInterval | 读、写以毫秒表示的屏幕刷新时间间隔 | Y | N | N | N |
| width | 屏幕的像素宽度 | Y | Y | Y | Y |
history对象保存的用户的上网记录，每个浏览器窗口、每个标签页和每个框架都有自己的history对象与特定的window对象关联。
1、history.go():接受一个参数，可以是整数值或者是字符串参数，表示向前或者是向后跳转多少个页面或者是跳转到特定的页面
history.go(1);//向前跳转一个页面
history.go(-1);//向后跳转一个页面
history.go(2);//向前跳转两个页面
history.go("wrox.com");//跳转到"wrox.com"页面
2、history.back()/history.forward()
具有和history.go()同样的功能。
3、history.length()
记录历史记录的数量，包括所有记录，即向前跳转和向后跳转的所有记录。
加载到窗口、标签页或者是框架中的第一个页面，history.length()为0