js 勇闯天涯（BOM）

一、窗口

1.1、窗口位置

window 对象的属性和方法有很多，screenLeft 和 screenTop 分别用于表示窗口相对于屏幕左边和上边的位置,

    var leftPos = (typeof.window.screenLeft == "number") ? window.screenLeft:window.screenX; 
    var topPos = (typeof.window.screenTop == "number")? window.screenTop:window.screenY;

1.2、窗口大小

获取页面视口的大小,在IE、Firefox、Opera 和 chrome 中，document.documentElement.clientWidth 和 document.documentElement.clientHeight中保存了页面视口的信息，在 IE6中，这些属性必须在标准模式下才有效，如果是混杂模式，就必须通过 document.body.clientWidth 和 document.body.clientHeight 取得相同信息,页面视口的大小，可以通过以下方式获取

var pageWidth = Window.innerWidth;
var pageHeight = Window.innerHeight;

if( typeof pageWidth != "number"){
    if(document.compatMode == "CSSlCompat"){  //compatMode 是否是标准模式
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
         pageWidth = document.body.clientWidth;
         pageHeight = document.body.clientHeight;
    }
}

二、location 对象

location 是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息。

2.1、查询字符串参数

以上属性可以访问到location 对象的大多数信息，但是其中访问URL包含的查询字符串的属性不太方便，可以像下面创建一个函数，用以解析查询字符串，然后返回一个包含所有参数的对象：

function getQueryStringArgs(){
    //去得查询字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1):""),
    //保存数据的对象
    args = {},
    //取得每一项
    items = qs.length ? qs.split("&"):[],
    item = null,
    name = null,
    value = null,
    //在for 循环中使用
    i = 0,
    len = items.length;
    //逐个将每一项添加到args 对象中
    for( i =0;i<len;i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1);
        if(name.lenght){
            args[name] = value;
        }
    }
}

//假设查询的字符串是?q=javascript & num = 10
var args = getQueryStringArgs();
alert(args["q"]) // "javascript"
alert(args["num"]) //"10"

2.2、位置操作

使用location 对象可以通过很多方式改变浏览器的位置

• window.location = "www.baiduc.com";
• location.href = "www.baidu.com";

其实都是调用assign 方法 并为其传递一个URL， location.assign("http://www.baidu.com");

注意:

当通过上述方式修改URL之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单机“后退”按钮都会导航到一个页面，要禁止这种行为，可以使用replace 方法，这个方法只接受一个参数，即要导航到的URL,结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录，在调用replace() 方法之后，用户不能回到前一个页面，使用场景，二级页面，在用户登陆之后，点击回退按钮，又调到了登陆页面，这个是通病，特别是在使用APP的时候，左滑动，又回到了登陆页，当然App 有App 的解决方法，在浏览器中可以使用replace

<script>
   setTimeout(function(){
       location.replace("http://www.baidu.com")
   })
</script>

三、小结

浏览器对象模型BOM 以window 对象为依托，表示浏览器窗口以及页面可见区域，同时，window 对象还是ECMAScript 中的Global 对象，因而所有全局变量和函数都是它 的属性。

1. 使用location 对象可以通过百年城方式来访问浏览器的导航系统，设置相应的属性，可以逐段或整体性的修改浏览器的URL。
2. 调用replace() 方法可以导航到一个新的URL,同时该URL会替换浏览器历史记录中当前显示的页面