JS学习笔记4_BOM

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.客户端检测技术

  1. 功能检测(特性检测):在编写代码之前先检测用户浏览器的能力,以便用不同的方式来实现目的,例如:

    if(typeof String.startsWith === 'function'){...}
    
  2. 怪癖检测:某些浏览器执行特定代码时会出现不合理的结果,当某个怪癖会干扰脚本运行时才使用(此处的怪癖其实是针对浏览器实现的js的bug而言的,比如不该枚举的属性可枚举等等,怪癖比较少见)

  3. 用户代理检测:通过检测UA字符串来识别用户浏览器的具体信息,但UA具有欺骗性

P.S.需要使用客户端检测技术时,优先选择级别如上所述,先做功能检测,不行就怪癖检测,UA检测是下下策,因为UA检测是针对特定型号的浏览器的,浏览器补丁可能会让现有方案失效

posted @ 2015-04-09 17:47 梦烬 阅读(...) 评论(...) 编辑 收藏