自我学习——javascript——BOM

1.window对象和全局环境并不完全等价

• 　　delete操作符不等价

          var age=29;
          window.color="red";
          
          //在ie<9时抛出错误，在其他浏览器中返回false
          delete window.age;
          
          //在ie<9是抛出错误，在其他所有浏览器中都返回true        
          delete window.color;
          
          alert(window.age);        //29,删除不成功
          alert(window.color);     //undefind，删除成功

  在ie6-8下，delete window对象下的属性都会报错，在其他浏览器下需要时声明为window下的属性才能删除

• 　　尝试访问未声明的对象会抛出错误，但是如果是查询window对象，不会报错

          //抛出错误，因为是访问未定义的变量
          var newValue=oldValue;
          
          //不会抛出错误，因为这只是一次属性查询，newValue值是undefined
          var newValue=window.oldValue;

  所以，如果是要判断某个属性是否存在或者是某个方法是否被当前浏览器支持，可以使用 window.XXX的方式进行判断，不存在的话值就是undefined

2.window对象下的常用方法

　　主要方法：1：获取浏览器位置 ；2：获取屏幕大小 3：打开新窗口 ； 4：设置定时器 ; 5:系统对话框 

            //跨浏览器确定浏览器窗口位置
            var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
            var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

            alert("left:" + leftPos);
            alert("top:" + topPos);

             //跨浏览器确定窗口大小
            var pageWidth = window.innerWidth; //ie9+，现代浏览器
            var pageHeight = window.innerHeight;

            if (typeof pageWidth != "number") {
                if (document.compatMode == "CSS1Compat") { //标准模式，ie6，7,8 移动ie
                    pageWidth = document.documentElement.clientWidth;
                    pageHeight = document.documentElement.clientHeight;
                } else { //在非标准模式下
                    pageWidth = document.body.clientWidth;
                    pageHeight = document.body.clientHeight;
                }
            }

             //打开新窗口
            window.open(); //浏览器各种屏蔽，基本上用不上了


             //设置定时器
            var num = 0;
            var max = 10;
            var intervalId = null;

            function incrementNumber() {
                num++;
                console.log(num);
                if (num < max) {
                    setTimeout(incrementNumber, 500);
                } else {
                    clearTimeout(intervalId);

                    alert("时间到了，调用完成");
                }
            }

            intervalId = setTimeout(incrementNumber, 500);
            
            //打开警示框
            window.alert("这是一个警示框");
            
            //打开确定框(返回值为 true 或者false 用来追踪用户行为)
            window.confirm("你确定要这么做");
            
            //打开输入框
            window.prompt("你想写什么","内容提示");
            
            //打开打印框
            window.print();
            
            //打开查找框
            window.find("你想要查找的内容");

 3.location对象下常用的方法

　　主要方法：1：查询字符串；2：位置操作

        //查询字符串编写
            
            function getQueryStringArgs(){
                // 取得查询字符串并去掉头部的问号
                var qs=(location.search.length>0?location.search.substring(1):"");
                //保存数据对象
                var args={};                
                
                //获取每一项
                var items=qs.length?qs.split("&"):[];
                var item=null;
                var name=null;
                var value=null;
                
                //在for循环中使用i=0
                var i=0,len=items.length;                
                for(i=0;i<len;i++){
                    item=items[i].split("=");
                    name=decodeURIComponent(item[0]);
                    value=decodeURIComponent(item[1]);
                    
                    if(name.length){
                        args[name]=value;
                    }
                }                
                return args;
            }     
            
                                                  
            //位置操作
            window.location="http://www.baidu.com";
            location.href="http://www.baidu.com";
            //改变hash值，把hash值看做为锚点，这样可以定位ajax页面
            location.hash="#xiaosi";
            //添加查询字符串（注意这里是一整串）
            location.search="?q=javascript";
            //返回不带端口号的服务器名称
            location.hostname;            
            //返回Url中的目录和文件名
            location.pathname;
            //返回url中指定的端口号
            location.port;
            //返回页面使用协议
            location.protocol;
            //页面重定位
            location.replace("http://www.baidu.com");
            //重加载(带参数 true 表示从服务器加载)
            location.reload(true);

 

 4.navigator对象，客户端识别

 　　说明：navigator对象是用来

　　　　　　1：识别客户端浏览器信息（比如ie版本）

　　　　　　2：检测插件

　　　　　　3：注册处理程序

 

5.history对象，实现页面前进倒退

            //跳转到访问过的上一页
            window.history.back();
            window.history.go(-1);
            
            //跳转到访问过的下一页
            window.history.forward();
            window.history.go(1);
            
            //返回历史记录的数量
            window.history.length;

 

 

 

 

 

 

转载于:https://www.cnblogs.com/yansi/p/3210313.html