天行健, 君子以自强不息
Sunny's Blog
Title

BOM简单总结--(2015/07/24更新)

BOM主要的三个对象window,location,navigator。

1.window,表示一个浏览器的实例。window对象本身有双重较色。一方面它是ECMAScript规定的Global对象,在全局作用域中声明的变量、函数都会变成window对象的属性和方法。另一方面它也是js访问浏览器窗口的一个接口。

1.window是个全局对象,它包含一个自身的window属性,调用的是用于控制窗口的window对象,他还包含document属性,引用了document对象,还有一些常用的API,比如setTimeOut,setInterval,decodeURIComponent等等。

1.1-访问未声明的变量会抛出错误,但是通过window查询会是undefined,这个方式可以判断未声明的变量是否存在。eg: var hasthis = window.test; 这里的hasthis是undefined。

1.2-全局js对象location和navigator也是window对象的属性,这也就是为啥window.location.xxx = location.xxx.

Location对象 包含的属性有href(可省),protocol,host,hostname,port,pathname,search(?后面),hash(#后面的)(2015/07/24)

1.3-window有相应的属性和方法来获取、修改窗口的位置和大小,但是这个意义不大。说一下window.open()和window.close(),弹出新窗口,可以控制(弹出和关闭)弹出窗口的大部分属性,不过现在大部分浏览器都会屏蔽这个东西。

1.4-setTimeout()和setInterval();setTimeout()/clearTimeout()是在指定时间后执行代码。setInterval()/clearInterval()是每隔指定的时间就执行一次代码。参数形式(functionName,time,parameter)。

                    //一个间歇调用的例子,指定个数
                    var num = 0;
                    var max = 10;
                    var intervalId = null;

                    function addNum(){
                        num++;
                        if(num == max){
                            clearInterval(intervalId);
                        }
                    }

                    intervalId = setInterval(addnum,500);
                

1.5-系统对话框。alert(),confirm("sss"),prompt("sss1","sss2")

2.location, url信息。window.location = document.location。主要属性:host = hostname+":"+port , href(整个URL), search(?xxx)

                    //解析查询字符串
                    function getQueryStringArgs(){
                        //获取查询字符串
                        var qs = (location.search.length > 0 ? location.search.substring(1) : "");
                        //存储解析后对象
                        var args = {};
                        //第一步解析,将其以&分开
                        var items = qs.length ? qs.split("&"): [];
                        //准备第二步解析用
                        var item = null, name = null, value = null;
                        var i = 0, len = items.length;

                        for( i = 0; i < len ; i++ ){
                            item = item[i].split("=");
                            name = decodeURLComponent(item[0]);
                            value = decodeURLComponent(item[1]);
                            if(name.length){
                                args[name] = value;
                            }
                        }
                        return args;
                    }
                

1.1-位置操作,location.assign("url") = location.href="url" 页面跳转。replace(),直接替换,这样就不能回退到原有的页面了。reload()重新加载本页。

3.navigator,识别客户端浏览器

几个常用属性:language(浏览器语言),Platform(浏览器所在系统平台),userAgent(浏览器用户代理字符串)。

4.window.history 窗口的浏览历史,脚本不能访问已保存的URL,有back,forword,go方法。(2015/07/24)

5.窗体之间的关系获取,如果你要获取不同窗口中的元素,前提条件就是要同源(2015/07/24)

1)从父到子

如果iframe有id,获取iframe的window对象的方式就是document.getElementById("xxx").contentWindow,利用了iframe的contentWindow属性,或者利用window的frames属性,window.frames[0],或者如果有id或name可以用window.frames["xxx"]或window.frames.xxx

2)从子到父

可以用parent属性的迭代,或者直接到顶级用top属性。

地势坤,君子以厚德载物