1.frame相关对象
top:指向最外层框架,使用top可以在一个框架中访问另一个框架,例如top.frames[index/name]
parent:指向当前框架的直接上层框架
window:代码所在框架的特定实例,所以window对象不唯一,各个框架都有各自的window对象
self:指向window,二者可以互换
2.窗口、页面相关
1.获取窗口相对屏幕左边界和上边界的位置
var x = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;//FF只支持后者
var y = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
alert(x + ', ' + y);///
浏览器对窗口位置的理解不同,浏览器窗口最大化时上面的代码输出结果是:
Chrome:(0, 0)
IE8:(0, 0)
FF:(-4, -4)
Safari和Opera未知,浏览器厂商的分歧在于窗口位置是浏览器窗口的位置还是页面容器(viewport)的位置
2.获取页面视口(viewport)大小
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;
}
}
alert(pageWidth + ', ' + pageHeight);///
视口(viewport)指的是页面可见区域,也就是浏览器给页面提供的容器,浏览器窗口最大化时上面的代码输出结果是:(分辨率1366*768)
Chrome:(1366, 653)
IE8:(1362, 644)
FF:(1366, 667)
PC端浏览器在这一点上达成了共识,但移动浏览器存在差异,如果需要支持移动端浏览器,还需要仔细研究各个浏览器的支持情况,这里不再展开
3.打开新窗口的方式
//window.open(url, target, strOptions, replaceOrNot);//等价于<a href="http://ayqy.net/" target="_self"></a>,target值还可以是frameName,表示在指定的frame中打开页面
//window.open('http://ayqy.net/', '_self');//在当前页面打开,返回按钮失效
//var win = window.open('http://ayqy.net/', '_blank', 'width=200, height=200');//弹出200\*200的窗口
//setTimeout(win.close(), 3000);//3s后自动关闭
//window.open('http://ayqy.net/', '_self', '', true);//替换掉当前历史记录,无痕跳转
P.S.用窗口方式展示内容不利于SEO,最常见的弹出窗口除了广告就是第三方帐号登录,这些不需要SEO的地方
3.超时调用
setTimeout(strCode/funcName, timeout);表示经过timeout毫秒后code不一定会执行,因为该函数的确切含义是:timeout毫秒后把指定的任务添加到任务队列中
取消尚未执行的延时任务:
var timeoutId = setTimeout(strCode/fun, timeout);
clearTimeout(timeoutId);
P.S.setTimeout的第一个参数虽然可以是字符串,但建议用函数名,因为字符串需要先解析成js代码才能执行,存在性能损失
4.间歇调用
setInterval(strCode/fun, timeout);表示按照指定时间间隔把任务插入任务队列
注意:如果准备插入新任务时上次插入的任务还没有执行完,会自动取消本次插入。也就是说,如果任务队列里没有相同任务,则插入,否则等下一次
取消尚未执行的间歇任务:与超时调用相同,clearInterval(intervalId);
注意:不建议使用间歇调用,因为后一个间歇调用可能会在前一个结束前启动。一般用递归超时调用来模拟,例如:
(function(){
alert('x');
setTimeout(arguments.callee, 3000);//注意不要用函数名,用arguments.callee更安全,因为不怕函数名被从外部更改
})();//匿名函数立即执行
5.对话框
alert(msg):警告框,用来显示错误信息,只有一个确定按钮
confirm(msg):确认框,用于确认某些重要操作,例如删除,有确认/取消按钮,返回true/false
prompt(msg, hint):输入框,用于获取用户输入,有确认/取消按钮,返回输入值/null
windowprint()、window.find():打印/查找,用处很少
6.location对象
1.获取url
location.href:获取当前页面的完整url,例如”http://www.ayqy.net”
location.search:获取查询字符串,例如”?keyword=do”
location.hash:获取锚(#以及后面的值,叫hash是因为在UNIX中,#就叫hash),例如”#menu”
location.host:获取主机名和端口号,例如”www.ayqy.net:80″
location.hostname:获取主机名,例如”www.ayqy.net”
location.pathname:获取url中的目录或文件名,例如”/film/”
location.port:获取端口号,例如”80″
location.protocol:返回页面使用的协议,例如”https:”
2.跳转,重定向
location.assign(url);
location.href = url;//最常用
window.location = url;
location.replace(url);//跳转且无法返回
location.reload(true/false);//重新载入当前页面,若true则不从缓存中取
7.navigator对象(用来检测浏览器相关参数)
提供插件检测和注册处理程序等功能,注册处理程序相当于通知浏览器当前页面提供某种在线功能(例如在线电子邮件,RSS阅读器等等),注册后用户执行某些操作(例如访问RSS源页面)后会自动请求已注册页面,相当于桌面应用的设置默认打开方式
8.screen对象
用于获取客户端相关信息,例如屏幕宽高、可用宽高等等,用处不多,浏览器支持性也不好
9.history对象
history.go(delta);或者history.go(str);向前/后跳转,或者跳转到最近的url包含str的页面(可能向前也可能向后)
history.back();history.forward();模拟浏览器的后退/前进按钮
history.length;获取历史记录条数,为0则说明当前页是用户打开浏览器后访问的第一页
注意:可以在历史记录中跳转,但无法获得历史URL(安全性限制)
P.S.HTML5提供了hsitory.pushState/history.replaceState函数,有人把pushState + Ajax合起来叫PJax技术,用来实现页内刷新的无跳转web App,但pushState存在兼容性问题,需要引入其它支持组件
10.客户端检测技术
功能检测(特性检测):在编写代码之前先检测用户浏览器的能力,以便用不同的方式来实现目的,例如:
if(typeof String.startsWith === 'function'){...}
怪癖检测:某些浏览器执行特定代码时会出现不合理的结果,当某个怪癖会干扰脚本运行时才使用(此处的怪癖其实是针对浏览器实现的js的bug而言的,比如不该枚举的属性可枚举等等,怪癖比较少见)
用户代理检测:通过检测UA字符串来识别用户浏览器的具体信息,但UA具有欺骗性
P.S.需要使用客户端检测技术时,优先选择级别如上所述,先做功能检测,不行就怪癖检测,UA检测是下下策,因为UA检测是针对特定型号的浏览器的,浏览器补丁可能会让现有方案失效
666