一,window对象
1,全局作用域
window对象扮演着js中任何对象,变量,函数的Global对象
全局变量(var age = 10;)不能通过delete操作符删除,
而直接用window对象上定义的变量(window.age = 10;)可以通过delete删除
未声明的变量被使用时错误的,但未声明的window对象的变量可以被使用 var newValue = window.oldValue;
2,窗口关系及框架
1)页面中包含的框架,每个框架都有属于自己的window对象,保存在frames集合中,可以通过frames索引获取每个框架,
每个window对象都有一个name属性,其中包含框架的名字
<frameset rows="160,*"> <frame src="" name="topFrame"> <frameset cols="50%,50%"> <frame src="" name="leftFrame"> <frame src="" name="rightFrame"> </frameset> </frameset>
可以通过 widow.frames[0],window.frames['topFrame'],top.frames[0],top.frames['topFrame'],frames[0],frames['topFrame']访问第一个框架
window.frames[1],window.frames['leftFrame'],top.frames[1],top.frames['leftFrame'],frames[1],farmes['leftFrame']访问第二个左边的框架
top对象始终指向最高最外层的框架
parent对象始终指向当前框架的直接上层框架,在没有框架的时候,top与parent相同都等有window对象
3)除非最高层窗口是通过window.open()打开的,否则window对象的name属性不会包含任何值
4)self对象 与window是一样的 只是为了与top,parent对应起来
3,窗口位置
screenLeft 和 screenTop属性 用于表示窗口相对于屏幕左边和上边的位置 IE Safari Opera Chrome支持
screenX 和 screenY 属性 与上面用法相同,Firefox支持 Safari Chrome 也支持 opera支持的效果不同
实现兼容性
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft:window.screenX;
var topPos = (typeof window.screentTop == "number") ? window.screenTop:window.screenY;
moveTo(x,y) 移动到xy位置
moveBy(x,y) 正为右和下,负为左和上
4,窗口大小
innerWidth innerHeight 返回视图的大小
outerWidth outerHeight 返回浏览器窗口本身的尺寸(Safari,IE,Firefox)返回页面视图容器大小(opera Chrome)
一般浏览器中(除IE6以下)
document.documentElement.clientWidth和document.documentElement.clientHeight 返回视图的大小(除IE6)
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; } }
document.compatMode 判断页面是否处于标准模式
resizeTo() 参数为新度量
resizeby() 参数为新度量和原度量之差
5,导航和打开窗口
1)弹出窗口
window.open(URL,窗口目标,特性字符串,新页面是否取代浏览器历史记录中当前加载页面的布尔值)
URL为链接,窗口目标(topFrame,_self,_parent,_top,_black)
第三个参数为指定的新窗口设置属性(height,width,left,top,fullscreen是否最大化,location是否显示地址栏,menubar是否显示菜单栏,resizable是否可 以通过拖动边框改变大小,scrollbars是否允许滚动,status是否现在状态栏,toolbar是否显示工具栏)
window.close()关闭打开的窗口,仅适用于window.open()打开的窗口
opener属性,保存着打开它的原始窗口对象 值设置为null表示在单独的进程中运行新标签页,与原始打开它的页面不发生通信
2)安全限制
3)弹出窗口屏蔽程序
如果是浏览器内置屏蔽程序则window.open()为null
var wroxWin = window.open("http://www.wrox.com","_black")
if(wroxWin == null){alert("The popup was blocked!");}
如果是扩展或其他程序阻止弹出窗口window.open()会抛出异常
var blocked = false; try{ var wroxWin = window.open("",""); if(wroxWin == null){ blocked = true; } }catch(ex){ blocked = true; } if(blocked){alert("The popup was blocked!");}
6,间歇调用和超时调用
1)js是单线程语言
2)超时调用setTimeout(执行的javascript代码,延迟的时间毫秒),调用后返回一个ID表示超时调用,一般讲它赋值给一个变量
后面清除clearTimeout(ID)
3)间歇调用setInterval(执行的javascript代码,间隔时间毫秒),不建议javascript代码以字符串形式,建议传人函数
调用后同样返回一个ID 可以通过这个返回值赋给一个变量 后面清除clearInterval(ID)
多用于超时调用替换间歇调用,间歇调用的执行顺序不好控制
7,系统对话框
1)alert(),confirm(),prompt()同步和模态的,就是说在弹出对话框的时候代码会停止执行,关掉对话框后会恢复执行
2)alert() 警告框,参数为要弹出的字符串
3)confirm() 确认框,返回布尔值
if(confirm("are you sure?")){alert("dgas");}
else{alert("asdgasdgdsag");}
4)prompt() 提示框,接收两个参数,显示给用户的文本提示语和文本输入框的默认值
5)coogle Chrome 浏览器还引入一种新特性,如果当前脚本在执行过程中打开多个对话框,那么从第二个对话框开始出现一个复选框,以便阻止后续的对话 框提示,除非刷新页面
6)find() print() 查找和打印 对话框计数器不会将它们计算在内
二,location对象
即是window的属性,也是document的属性,window.location=document.location
hash 返回URl的hash(#后跟0或字符)如果URl不包含散列返回空字符串 例"#contents"
host 返回服务器名和端口号 "www.wrox.com:8080"
hostname 返回服务器名 "www.wrox.com"
href 返回完整的URL路径 "http://www.wrox.com" 等于location的toString()
pathname 返回URL中的目录或文件名 "/WilerCDA/"
port 返回端口号 "8080"
protocol 返回页面使用的协议 "http:"
search 返回URl查询字符串以问号开头 "?q= javascript"
1,查询字符串参数
function getQueryStringArgs(){ //取得查询字符串,并去掉开头的问号 var qs = (location.search.length > 0 ? location.search.substring(1) : ""); //保存数据的对象 var args = {}; //取得每一项 var items = qs.length?qs.split("&"):[]; var item = null; var name = null; var value = null; for(var i = 0 ;i < items.length;i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if(name.length){ args[name] = value; } } return args; }
2,位置操作
location.assign("http://www.worx.com");
window.location("http://www.worx.com");
locatin.href("http://www.worx.com");
例 初始URL为 http://www.worx.com/WileyCDA/
location.hash = "#section1" http://www.worx.com/WileyCDA/#section1
location.search="?q=javascript" http://www.worx.com/WileyCDA/?q=javascript
location.hostname = "www.yahoo.com" http://www.yahoo.com/WileyCDA/
location.pathname = "mydir" http://www.yahoo.com/mydir/
location.port = 8080; http://www.yahoo.com:8080/WileyCDA/
除了修改hash每次都会刷新页面,以新的页面展示
location.replace() 方法参数接收到导航到的页面,到达之后后退不能回到原来页面
location.reload() 从缓存中重新加载页面
location.reload(true) 从服务器重新加载页面
三,navigator对象
识别客户端浏览器的对象
1,检测插件
1)plugins数组,检测浏览器是否安装了特定的插件,数组每一项都包含下列属性
name:插件名称,description:插件描述,filename:插件文件名,length:插件处理的MIME类型数量
检测插件的函数(IE除外)
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; }
检测flash alert(hasPlugin("Flash"));
IE中检测插件的函数
function hasIEPlugin(name){ try{ new ActiveXObject(name); return true; }catch(ex){ return false; } }
检测Flash alert(hasIEPlugin("ShockwaveFlash.shockwaveFlash"));
一般典型的做法是针对每个插件分别创建检测函数
function hasFlash(){ var result = hasPlugin("Flash"); if(!result){ result = hasIEPlugin("ShockwaveFlash.shockwaveFlash"); } return result; }
2)每个插件对象本身也是一个MimeType对象的数组,
MIME类型的描述description,回指插件对象的enabledPlugin,表示与MIME类型对应的文件扩展名的字符串suffixes(以逗号分隔),完整MIME类型字 符串的type
3)plugins集合有一个叫refresh()的方法,用于刷新plugins以反映最新安装的插件
2,注册处理程序
1)让一个站点指明它可以处理特定类型的信息
2)registerContentHander() 接收是三个参数,要处理的MIME类型,可以处理该MIME类型的页面的URL以及应用程序的名称
3)registerProtocolHander() 接收三个参数,要处理的协议,处理该协议的页面的URL和应用程序的名称,
四,screen对象
availHeight:屏幕的像素高度-系统部件高度之后的值
availWidth:屏幕的像素宽度-系统部件宽度之后的值
availLeft:未被系统部件占用的最左侧的像素值
availTop:未被系统部件占用的最上方的像素值
height:屏幕的像素高度
屏幕的像素宽度
left:当前屏幕距左边的像素距离
top:当前屏蔽距上边的像素距离
五,history对象
保存着用户上网的历史记录,从窗口被打开的那一刻起,
go() 负数表示页面向后跳转,正数表示页面向前跳转,也可接受一个字符串参数跳到包含该字符串的第一个位置
back() 后退函数
forward() 前进函数
length属性,保存着历史记录的数量