JsBom

BOM:浏览器对象模型 BOM大部分都是对window对象的操作

window.open

window.open(页面的地址URL，打开的方式)

• 如果URL默认为空,则默认打开一个新的空白页
• 如果打开方式为空，则默认为新窗口方式
• open()方法的返回值: 返回新打开的窗口window对象

window.close

关闭窗口(有兼容性问题)
1 firefox 默认无法关闭
2 chorme 默认直接关闭
3 ie 询问用户
4 可以在关闭本窗口中通过JS方法打开新的窗口

对应下面的代码

    var inputall = document.getElementsByTagName("input");
    var newPage = null;
    inputall[0].onclick = function(){
         newPage = window.open("","_blank");
        newPage.document.body.style.background = "red";    //不会起作用。除非不是网址而是空白页的。
    }
    inputall[2].onclick = function(){
        newPage.close();  //新开的
    }

window.navigator.userAgent

window.navigator.userAgent ==浏览器信息
可以通过这个属性判断浏览器信息

   var string = window.navigator.userAgent;
    var word = string.toLowerCase();
     window.alert(word);
    if(word.indexOf("msie")==-1)
    {
        window.alert("找不到")
    }

window.location

window.location 浏览器地址栏信息
window.location 看似一串字符串，其实一个对象

• window.location.href :地址栏的地址url
• window.location.search 这个是url?后面的内容
• window.location.hash: 表示url#后面的内容

文档宽高及窗口事件

可视区尺寸,没有border

元素.clientWidth
元素.clientHeight
要是获取到整个浏览器的宽度和高度只有
document.documentElement.clientHeight
或者document.body.clientHeight;

滚动距离

元素.scrollTop/scrollLeft
指的是滚动条距离顶部或者左边的距离
document.body.scrollTop
document.documentElement.scrollTop
元素.scrollHeight指的是整个里面的高度

兼容性问题

• chorme浏览器认为滚动距离是在body上面
• 其他浏览器认为滚动距离是在documentElement
  建议用下面的方法

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

onscroll

var i = 0 ;
window.onscroll = function(){
 document.title = i++;
}

onresize

onresize:当窗口大小发生改变的时候触发

var  i = 0 ;
window.onresize = function(){
  document.title = i++;
}