jsBOM内容

Posted 决起而飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsBOM内容相关的知识,希望对你有一定的参考价值。

正如我们所知道的,javascript分为三大块,ECMAscript,BOM,DOM,ECMAscript固然重要;可是在web中使用ECMAscript很大程度上需要了解BOM即浏览器对象模型,否则ECMAscript就虎落平阳,毫无发挥之处,下面正式介绍BON。

1、window对象

window对象是BOM的核心,表示浏览器的一个实例;window对象有双重角色,即使通过js访问浏览器窗口的接口,又是ES规定的global对象。

1.1全局作用域

所有在全局作用域下声明的变量、函数都变成window的对象和方法

     var age=10
     console.log(window.age)    //10
     console.log(age)           //10

1.2窗口关系及框架

页面中包含框架则每个框架都有自己的window对象;并保存在frame是集合中,通过索引(从上到下,从左到右)或者框架名称访问相应的window对象,每个window对象都有个name属性,为框架名称

   <html>
       <head>
          <title>frameset example</title>
       </head>
       <frameset>
            <frame src="frame.htm" name="topframe">
            <frameset>
                <frame src="anotherframe.htm" name="lefeframe">
                <frame src="yetanotherframe.htm" name="rightname">
            </frameset>
       </frameset>
   </html>

上述代码:一个框架为上,两个框架为下,可以这样访问

    window.frames[0]   
    window.frames["topframe"]
    top.frames[0]
    top.frames["topframe"]
    frames[0]
    frames["topframe"]

注意:

top对象始终指向的是最外层的框架即浏览器窗口,所以都可以用top来表示访问。

parent对象始终指向当前框架的直接上层框架(某一个框架内又包括其他的框架),某些情况等于top,没有框架时就是top,都是window对象。

self对象始终指向window对象,可以互换(只是为了对应起来)

1.3窗口位置

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

一般跨浏览器获取window的窗口位置

1.4导航和打开窗口

使用window.open即可,一般有四个参数:加载的URL;窗口目标;特性的字符串;新页面是否取代浏览器历史记录中加载页面的布尔值

第二个参数:窗口目标一般用框架地址或者是(_self;_parent;_top;_blank)

第三个参数:一些特性,比如height  width  left 等等

    document.getElementById("start").onclick=function(){
            newwindow=window.open("http://id.qq.com/login/ptlogin.html","_blank","height=400,width=400,top=10,left=10,resizable=yes");
            newwindow.opener=null             //两个标签页可以在独立的进程中运行

    }
    document.getElementById("close").onclick=function(){
            newwindow.close()                 //可以关闭
    }

由于弹出窗口的设置,一些广告就随之而来,浏览器内置弹出窗口遮蔽程序,如何检测这类工具呢?

    var block=false

    try{
        var weixin=window.open("http://www.baidu.com","_blank")
        if(weixin==null){
            block=true
        }
    }catch(ex){
         block=true
    }
    if(block){
         alert("被拦截了")
    }

检测调用window.open打开的窗口是否被遮蔽了,并不会阻止浏览器与被遮蔽的弹出窗口有关的消息

1.4间歇调用和超时调用

大家都知道,js是单线程语言,但是允许设置超时值和间歇时间值来调度在特定的时刻执行,setTimeout和setInterval,前者是指定时间后执行,后者是每个指定时间执行;

拿setTimeout来说;接受两个参数;第一个为函数(可以用字符串不建议),第二个为等待的毫秒数;

js解析器会将执行的代码添加到队列中按顺序执行,而setTimeout会告诉多长时间后将其纳入队列

调用setTimeout()方法返回一个数值ID表示超时调用,这个ID是计划执行代码的唯一标识符,可以用它取消超时调用;超时调用为1,间歇调用为2

    var timer=setTimeout(function(){
         console.log("hello world")
    },1500)

间歇调用跟超时调用差不多,来个例子

    var num=0;
    var max=6;

    function change(){
        num++
        console.log("hello world")
        if(num==max){
            clearInterval(timer)
            alert("end")
        }
    }

    var timer=setInterval(change,1000)

1.5系统对话框

警告;提示;确认三种对话框,

alert()大家都熟悉了

confirm()返回的布尔值,所以说可以后续的操作

prompt()用于提示用户信息

   alert("这是一个警告框")
   var confirms=confirm("要不要确认啊")             //返回一个布尔值
   var prompts=prompt("你叫什么名字啊","张三")       //返回文本作用域的值

  
   if(confirms){
           console.log("great! you are smart")
   }else{
           console.log("you are bad ")
   }


    if(prompts==null){
        console.log("null")
    }else{
        console.log("not null")
    }
    window.print()    //打印对话框
    window.find()     //查找对话框

 2、location对象

提供与当前窗口加载的文档有关的信息,既是window对象的属性,又是document对象的属性

1提供文档的有关信息

2将URL解析为独立片段,使开发人员通过不同的属性访问这些片段

location有以下属性:

hash   返回URL中hash(#号后跟零个或多个字符)

host    返回服务器名称和端口号

hostname   返回不带端口号的服务器名称

href     返回当前加载页面完整的URL   location对象的toString方法也返回其

pathname   返回URL中的目录或文件名

port    返回URL中指定的端口号

protocol   返回页面使用的协议

search  返回URL的查询字符串

下面以百度贴吧为例来看看具体情况

        location.hash    //#后面的内容
        ""                                       
        location.href
        "http://tieba.baidu.com/show/zhanqi/roomList?tag_id=6"
        location.host    //服务器名称和端口号
        "tieba.baidu.com"
        location.hostname   //服务器名称
        "tieba.baidu.com"
        location.pathname   //URL中的目录或文件名
        "/show/zhanqi/roomList"
        location.port    //端口
        ""
        location.protocol  //页面使用协议
        "http:"
        location.search   //URL的查询字符串
        "?tag_id=6"

位置操作

改变浏览器的位置一般用location.href("");改变URL就直接的设置其他的属性可以了

当改变URL后,浏览器会生成新的历史记录,浏览器后退键是可以返回的,禁用这种返回可以使用replace方法

    setTimeout(function(){
         location.replace("http://www.baidu.com")
    },1000)

location.reload 重新加载当前显示的页面;强制从服务器加载则传递参数true即可

3、navigator对象

识别客户端浏览器的事实上的标准,每个浏览器的navigator对象都有自己的一套标准

一些属性

appCodeName     浏览器名称(Mozilla)

userAgent             用户代理字符串

等等许多

检测插件

name插件的名字;description插件的描述;filename插件的文件名;length插件所处理的MIME类型数量,非IE浏览器则用plugins数组;兼容性的办法解决

技术分享图片
    //非IE浏览器
    function hasPlugin(name){
         name=name.toLowerCase()
         for(var i=0;i<navigator.plugins.length;i++){
                 if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
                       return true
                 }
         }
         return false
    }
    
    //IE浏览器
    function hasIEPlugin(name){
         try{
              new ActiveXObject(name)
              return true
         }catch(ex){
              return false
         }
    }



    function hasFlash(){
          var result=hasPlugin("Flash")
          if(!result){
                result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash")
          }
          return result
    }

    function hasQuickTime(){
          var result=hasPlugin("QuickTime")
          if(!result){
                 result=hasIEPlugin("QuickTime.QuickTime")
          }
          return result
    }

    alert(hasFlash())
    alert(hasQuickTime())
View Code

注册处理程序

让一个站点指明它可以处理特定类型的信息

4、history对象

保存用户上网的历史记录,从网页打开算起;使用go方法在用户的历史记录中任意跳转。

当然还有个length属性,检测用户一打开就是你的页面即首页

    var start=document.getElementById("start")
    var close=document.getElementById("close")
    start.onclick=function(){
        history.go(-1)           //向后一页   history.back()
    }
    close.onclick=function(){
        history.go(1)            //向前一页   history.forward()
    }

还有screen对象,浏览器窗口外部显示器信息,没多大用,屏幕对象,有width,height等属性

 

以上是关于jsBOM内容的主要内容,如果未能解决你的问题,请参考以下文章

前端开发 - jsBom

JS事件传播和JSBom部分总结

JSBOM

jsBOM对象

JsBOM

JAVAscript学习笔记 jsBOM 第七节 (原创) 参考js使用表