浏览器为JavaScript提供的对象集合通常称为浏览器对象模型(Browser Object Model,BOM)

另一种常见的术语是文档对象模型(Document Object Model,DOM,W3C标准)——>见下一个随笔

在开始介绍BOM对象的时候,先来了解一个关于BOM的一些小东西:

不仅JavaScript是基于对象的,而且浏览器也是由对象组成的。JavaScript在浏览器中运行时,可以访问浏览器对象。

JavaScript的这些附加功能都存在一个潜在的弊端:BOM没有标准的实现方式。可以使用哪个对象集合高度依赖于当前使用的浏览器的类型和版本。

BOM:

  BOM对象非常庞大,但是初学者只需要使用BOM中的不到10%的对象,方法和属性。BOM有一个层次结构。在顶层的顶端是window对象,它表示浏览器的框架以及与其相关的所有内容,如滚动条和导航栏图标等。在BOM中,页面用document对象表示。

  window对象下面有许多对象如:location对象(浏览器当前URL信息,当前页面的位置信息),history对象(浏览器访问历史信息),navigator对象(浏览器本身信息),screen对象(客户端屏幕信息),document对象(文档对象)等。

  window对象是一个全局对象,因此不需要使用其名称来访问其属性和方法。window的某些属性也是对象。

window.alert()
alert()//这两条代码是等价的

在web页面中值得注意的是,所使用的函数名或变量名不能与BOM对象及其属性和方法的名词相冲突。

history对象:
  与JavaScript内置的Array类型类似,history对象也有length属性。使用它可以获得历史栈中的页面数量。

  go()方法,back()方法,forward()方法  go(-1)等价于back(),go(1)等价于forward()

location对象:

  获得当前页面位置:不仅包含了页面的统一资源定位器(URL)还包含保存该页面的服务器,连接服务器的端口号及使用的协议。通过location对象的href,hostname,port和protocol属性获得这些信息。

  改变当前页面位置:1.location对象的replace()方法,但是这个方法将从历史栈中移除当前页面,代之以新页面。

           2.使用location对象的href属性,把新页面加在历史栈的顶部。

navigator对象:
  处理浏览器之间的差异,确定用户的浏览器,版本和操作系统(“浏览器嗅探”技术)

navigator对象的geolocation属性(也是一个对象):

    geolocation对象的核心部分是getCurrentPosition()方法,调用该方法的时候必须传入两个回调函数,第一个参数是成功的时候执行的函数,第二个参数是失败的时候执行的函数。

    函数传入的都是对象,失败函数传入的对象有两个属性值,第一个code表示失败原因的数值,第二个属性为message,表示描述错误的可读信息。

    //获取位置
    function geoSuccess(position){
        var coords = position.coords
        var latitude = coords.latitude
        var longitude = coords.longitude

        var mess = "you're at "+latitude+","+longitude
        document.write(mess)
    }

    function geoError(errorObj){
        document.write(errorObj.message+"<br>")
        document.write(errorObj.code)
            
    }

    navigator.geolocation.getCurrentPosition(geoSuccess,geoError)

screen对象:

  包含了大量有关客户机显示能力的信息。

document对象:

  具体请移步另一个BOM随笔。

  images集合:
    页面上的每幅图都有一个对应的img对象,每个img对象都保存在images集合中,该集合是document对象的一个属性。该集合与数组的用法相同,页面上第一幅图片在document.images[0]元素中。

  links集合:

    页面上所有a对象都包含在links集合中。

  forms集合:

    页面上所有froms对象都包含在froms集合中。 

确定用户的浏览器:  

  特性检测:

    检查特性是否存在,如果存在就使用该特性。

    以下值为falsey: 0  ""(一个空字符串)  null  undefined  【】(一个空数组)  false

    typeof可能返回的值:1(数字)  “hello”(字符串)  true(布尔值)  [](对象)  {}(对象)  undefined(未定义)  null(对象)

//特性检测
        if(navigator.geolocation){
            document.write("true")
        }
//减少歧义
        if( typeof(navigator.geolocation) != "undefine"){
            document.write("true")
        }

  浏览器嗅探:

    navigator对象的appName属性和userAgent属性在标识浏览器方面很有用。appName属性将返回浏览器的模型,userAgent属性返回一个包含多段信息的字符串。

Posted on 2020-06-27 13:05  Schrodinger'sdoris  阅读(453)  评论(0编辑  收藏  举报