JavaScript基础07——BOM

BOM概念

 　　BOM是Browser Object Model的缩写，简称浏览器对象模型。这个对象就是window

        BOM提供了独立于内容而与浏览器窗口进行交互的对象

        BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

        BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C

        BOM最初是Netscape浏览器标准的一部分

 

    由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

window对象介绍，内置对象（location／history／navigator）及方法：

//    什么是window对象，window对象是浏览器内置的一个对象，相当于BOM的一个抽象

//    window对象是js中全局对象的寄存地。

    window对象的常见方法：
    alert(要显示的文本);      //弹出信息框
    prompt(提示对话框信息);   //弹出输入框，点击确定，返回字符串，点击取消，返回null
    confirm(提示文字);        //点击确定返回true，点击取消返回false

     close();                //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭
                            //不允许关闭非脚本打开的页面

    open(url,name,feature,replace);
        //open('http://www.baidu.com','_blank','width=300,height=300')
        //谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页

window对象下内置的子对象：

 1.history对象：该对象包含浏览器访问过的url。

//     该对象的属性：
        history.length;         //返回历史记录的数量
//     该对象的方法：
        history.back();         //后退，加载前一个url。
        history.forward();      //前进，需要后退一下之后，才有前进的方向
        history.go(num);        //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新

2.location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。

//     该对象的属性：
        location.href;          //设置或返回完整的url
        location.search;        //返回url?后面的查询部分
        location.hash;          //是一个可读写的字符串，是url的锚部分（从#开始的部分）哈希
//     该对象的方法：
        location.reload();      //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？
        location.assign(url);   //加载新页面，当url为空字符时，加载当前页面    

 3.navigator对象：浏览器信息

        navigator.appName;      //返回当前浏览器名
        navigator.appCodeName;  //返回当前浏览器的代码名
        navigator.appVersion;   //返回当前浏览器的版本号和平台
        navigator.platform;     //返回当前计算机的操作系统    

以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：
        navigator.userAgent;    //返回浏览器信息

 几乎没什么卵用

        4.frames对象：包含当前页面所有的框架信息。
             frames.length;                  //返回当前页面的框架数量
             frames[0].location;             //修改第一个框架的地址
         5.screen对象：包含当前显示屏信息
             screen.width/height             //屏幕总宽高度
             screen.availWidth/availHeight   //屏幕的宽高（不包括任务栏）

window.onload / onscroll／onresize 事件

//  onload当文档加载完成后执行一些操作
    window.onload = function(){
        console.log("页面加载完成")
    }

//  onscroll当页面发生滚动时执行一些操作
    window.onload = function(){
        console.log(1)            //当页面发生滚动时，打印1
    }

//  onresize当窗口大小发生改变时执行一些操作
    window.onresize = function(){
        console.log(1)            //当窗口大小发生改变时，打印1
    }
//  页面滚动条距离顶部的距离
    document.documentElement.scrollTop
//  页面滚动条距离左边的距离
    document.documentElement.scrollLeft