摘抄自：https://www.cnblogs.com/ayqy/p/4410334.html
1.frame相关对象
-
top：指向最外层框架，使用top可以在一个框架中访问另一个框架，例如top.frames[index/name]
-
parent：指向当前框架的直接上层框架
-
window：代码所在框架的特定实例，所以window对象不唯一，各个框架都有各自的window对象
-
self：指向window，二者可以互换
2.窗口、页面相关
1.获取窗口相对屏幕左边界和上边界的位置
|
1
2
3
|
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）大小
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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.打开新窗口的方式
|
1
2
3
4
5
|
//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毫秒后把指定的任务添加到任务队列中
取消尚未执行的延时任务：
|
1
2
|
var timeoutId = setTimeout(strCode/fun, timeout);clearTimeout(timeoutId); |
P.S.setTimeout的第一个参数虽然可以是字符串，但建议用函数名，因为字符串需要先解析成js代码才能执行，存在性能损失
4.间歇调用
setInterval(strCode/fun, timeout);表示按照指定时间间隔把任务插入任务队列
注意：如果准备插入新任务时上次插入的任务还没有执行完，会自动取消本次插入。也就是说，如果任务队列里没有相同任务，则插入，否则等下一次
取消尚未执行的间歇任务：与超时调用相同，clearInterval(intervalId);
注意：不建议使用间歇调用，因为后一个间歇调用可能会在前一个结束前启动。一般用递归超时调用来模拟，例如：
|
1
2
3
4
|
(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检测是针对特定型号的浏览器的，浏览器补丁可能会让现有方案失效