js回归之BOM

Window：

窗口页面区域宽高:下面是考虑到浏览器兼容，但是只要用的诸如chrome,firefox,window.innerWidth 就足够了
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

屏幕可用宽高：screen.availWidth,availHeight
URLlocation:

window.location 对象在编写时可不使用 window 这个前缀。

location 在BOM中操作url十分重要。

location  既是window 的对象，也是 document 的对象

两个容易忽略的属性;

1.hash   url #anchor

2.search url ?q=id  

一些例子：

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://）
• location.href 返回url 带参数的话  直接到相应的url
• location.assign() 方法加载新的文档
• location.replace("url") 浏览器不会留下当前历史记录，即后退按钮失效啦

history:

• history.back() - 与在浏览器点击后退按钮相同（实用性比较高）
• history.forward() - 与在浏览器中点击按钮向前相同

navigator:具有误导性的特质，我们暂且不管他

消息框：

alert() 提示框

confirm(T/F)

prompt(value/null)

计时器：

这也是面试基本都会问到的基础题

setTimeout clearTimeout 

特征：在未来某时调用一次

调用：setTimeout(fn,time);

如果要循环，就要不断调用自己

==========================================================

进阶补充：

window.open(href,Frame'sName,config)

Frame'sName 相当于target,比如window.open("https://github.combelongcai",'"_blank",''width:400,height:400,resizable:yes");

Frames'Name 如果没有可以匹配的已知的框架名字，就会去新创建一个，根据第三个参数config去配置窗口的属性

另外，resizeTo()//调整新窗口的大小

resizeBy()//调整新老窗口大小的差值

注意的是：由于浏览器回去拦截窗口，所以这点要注意，所以它的用处就被限制住了（要怪就怪这窗口漫天弹弹弹）

setTimeout 超时调用

setInterval 间歇调用

这两个真的很容易混淆，而且老实说，面试官很喜欢考察这点。

参考STACKOVERFLOW:http://stackoverflow.com/questions/729921/settimeout-or-setinterval

我在看完javascript高级程序设计后，说一下看法：

区别：1.要取消定时调用的话，要var timeId=setTimeout(fn,time)也就是得保存定时的id,这样如果想要取消的话，

clearTimeout(timeId);setInterval()同上；

2.如果需要循环调用的话，选择超时调用（当然在 执行时间小于周期事件，setInterval是ok的！so it depends!）

看两个分别调用的例子：

setTimeout:

var num=0,

　　max=10;

function Increment(){

　　num++;

　　if(num<max){setTimeout(Increment,500);}

　　else{alert("Reach to Max!");}

}

setTimeout(Increment,500);

=====================================================

setInterval():

function Increment(){

num++;

if(num>max){clearInterval(timeId);}

}

var timeId=setInterval(Increment,500);

=================================================

比较一下不难发现区别，

one:超时调用只调用一次的特点所以无需记录timeId

Two:约定一下，fn执行主体都放在setInterval/setTimeout之前，

ok！不妨假设，Increment执行需要1000ms,setInterval会出现冲突，之前的还没结束，之后的又来了！还能活吗？

这一点setTimeout 表现就比较优异！