• JavaScript BOM 随笔谈


       浏览器对象模型 BOM,BOM提供了很多对象,用于访问浏览器对象。总结一下常用的属性及方法

       1.history 保存用户上网的用户记录

          history.go()//跳转到任意位置

       history.back() //后退

       history.forword()//前进

       history.length//历史记录的条数,可用于判断页面是否第一条历史记录

     2.screen 基本上只表现客户端的能力 包括浏览器窗口外部的显示信息

          常用的属性有 screen.height  screen.width。这两个属性被各大浏览器都兼容

       

     document.body.onload=function (){
            document.write("屏幕像素高度:"+window.screen.height+"屏幕宽度:"+window.screen.width);
         }

      3. navigator  已经成为识别客户端浏览器的事实标准,navigator的属性常用于检测浏览器

        plugins 浏览器中安装插件的信息数组

        例如:

    /*------------------------------------------------------------------]
          以下代码旨在验证window.navigator.plugins 的用法
         --------------------------------------------------------------------*/
         
         //Navigator.plugins 属性里包含插件数组,在非IE浏览器中可以这样检测
         function hasPlugin(name)
         {
            name=name.toLowerCase();
            for(var i=0;i<navigator.plugins.length-1;i++){
                if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
                       return true;
                }
                    
            }
            return false;
         }
         //在IE浏览器中不能这样检测。只能创建相关浏览器中的ActiveObject对象,如果成功表明安装此插件
         function hasIEPlugin(name)
         { 
            try
            {
                new ActiveXObject(name);
                return true;
               
            }catch(ex)
            {
              return false;
            }
         }
         
        //检测flash插件
        function hasflash()
        {
          var result=hasPlugin("Flash");
          if(!result){  
            result=hasIEPlugin("ShockwaveFlash.ShockwaveFlsh");
          }
          return result;
        } 
        //在body.onload方法验证
        document.body.onload=function (){
            if(hasflash())
            {
                document.writeln("浏览器含有Flash插件");
            }else{
                document.writeln("浏览器没有安装Flash插件");
            }
        }

          useAgent 浏览器的用户代理字符串

          可用于web 客户端检测,检测浏览器的版本,名称的信息

          cookieEnalbed 检测浏览器是否禁用cookiEnabked

              等属性

        4.location 当前窗口加载文档。以及导航

        

     document.body.onload=function(){
              document.write("hash:"+location.hash+"<br/>") //#号后面的参数
              document.write("host:"+location.host+"<br/>")          //服务器名称+端口号
              document.write("hostname:"+location.hostname+"<br/>"); //服务器名称
              document.write("port:"+location.port+"<br/>");         //端口号 例如:8080
              document.write("protocol:"+location.protocol+"<br/>"); //协议名 例如:http
              document.write("seach:"+location.seach+"<br/>"); //?后面的参数    
        }

        location.href 加载文档,并产生一条历史记录

        location.replace() 加载文档不产生历史记录

        location.reload() 从缓存中重新加载文档

        location.reload(true) 从服务器中重新加载文档

        例如:

        

        document.getElementById("reload").onclick=function(){
            window.location.reload();  
        }
        document.getElementById("reloadtrue").onclick=function(){
            window.location.reload(true);
        }

       5. window 属性

         5.1 系统对话框

            alert()弹出框,confirm()确认对话框 ,prompt()输入对话框

                使用方法如下

          

     document.body.onload=function(){
            alert("message");
               //确认对话框 有 是 否两个按钮
             if(confirm("Are you sure ?")){
                //弹出框 只有一个按钮
                alert("I am sure !");
             }else{
                alert("sorry I'm not sure !");
             }
        }
        document.body.onload=function(){
            //输入对话框,可以接受输入内容
            var result=prompt("What's your name boy ?","Jiangqiang");
            if(result!=null){    
                 alert("hellow,welcome "+result);
            } 
        }

        5.2 时间函数 Timeout Interval

          var action=setTimeout(function,Time):

          如果在Time时间内没有调用ClearTimeout(action); 将执行一次function

          例如:

     document.body.onload=function(){    
            var  i=1;
            var dosome=function (){ 
                i=i+1;
                alert(i)
                if(i==2){
                //取消调用
                clearTimeout(action);
                }
            };
            //超时调用
            var action=setTimeout(dosome,3000)
        }

            var action=setInterval(function,Time)
             每隔Time时间就执行一次function,直至调用ClearInterval(function)介绍接受调用

        例如:  

     document.body.onload=function (){
            var  i=1;
            var dosome=function (){ 
                i=i+1;
                alert(i)
                if(i==10){
                //取消调用
                clearInterval(action);
                }
            };
            //开始调用
            var action=setInterval(dosome,2000);    
        }

        5.3 window.open()

            window.open 可以打开一个新窗口,是唯一可以打开一个无状态栏的窗口的方法

           window.opener是 新打开窗口中表示原窗口的对象

               使用例:

           

    document.body.onload=function(){
         var i=1;
         var newwin=window.open("Default.aspx")
         //newwin 是原始窗口的指针,可以操作其窗口大小,位置,关闭,
         //控制其大小
         newwin.resizeTo(500,100);
         //控制其位置
         newwin.moveTo(100,100);
         
         var doing=function(){
            i=i+1;
            if(i==10){
               //唯一自动关闭
                newwin.close();
            }
         }
         setInterval(doing,1000);
       }

          5.4 窗口关系

          window.top,window.parent,window.opener,window.self 比较关系

          window.opener 是用window.open打开窗体的,父窗体的对象

          window.top 是在页面使用框架(frame),Iframe 时表示浏览器最早的窗体(最父的窗体);

          window.parent 是在页面使用框架(frame),Iframe 时表示浏览器上一级窗体(上级父窗体);

          window.self 是在页面使用框架(frame),Iframe 时 表示自己窗体本身对象。

      

     

  • 相关阅读:
    Object-C(自学1)
    在vue-cli@3.X中配置代理解决开发环境的跨域问题
    记一次发布/更新npm包的过程及包版本管理
    MAC OS上开启Nginx静态文件服务器
    vuecli3打包部署 非根目录下 配置vue.config.js publicPath
    使用Anywhere开启一个nodejs静态文件服务器
    搭建node服务端并使用express()创建简单数据接口,最后返回前端请求的所需数据
    对正反向代理对理解
    Mac查看Python安装路径和版本
    onBlur方法在iOS和Android平台上的差异
  • 原文地址:https://www.cnblogs.com/jiangqiang/p/2939995.html
Copyright © 2020-2023  润新知