JS原生系列-BOM篇

我们已经学习了DOM，文档对象模型，我们的主要处理都是在这个模型基础上工作的，同样我们还有可能对浏览器进行一些操作，如：

1.检测浏览器的类型和版本

2.检测是pc还是移动设备

3.根据条件，进行页面的自动跳转

4.打开一个新的窗口，存放指定链接

5.关闭窗口

6.返回到上一个页面

7.获取地址栏信息，进行处理

等...

我们来学习，并且逐个实现上面的处理

 （一）screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。

代表屏幕对象，获取屏幕信息，并不是浏览器

 availHeight:返回显示屏幕的高度

 availWidth:返回显示屏幕的宽度

 colorDepth:返回目标设备或缓冲器上的调色板的比特深度。

 height:返回屏幕区域的实际高度

 width:返回屏幕区域的实际宽度

js：

alert("返回显示屏幕的高度"+screen.availHeight)
alert("返回显示屏幕的宽度"+screen.availWidth)
alert("返回目标设备或缓冲器上的调色板的比特深度"+screen.colorDepth)   
alert("返回屏幕区域的实际高度"+screen.height)   
alert("返回屏幕区域的实际宽度"+screen.width)

 screen对象，我们用的很少，我们都是对浏览器的处理，再说客户的屏幕差别很大，我们做了解！

（二）Window对象,Window 对象表示一个浏览器窗口或一个框架。

window对象，是global对象，全局对象，我们的很多对象都是直接间接挂在在window下面

我们看下面的代码，并且分析：

var aa="123";
var bb=function(){alert(aa)};
alert(aa);
bb();

上面是我们最常用的写法，其实这些全局的变量和方法都是挂载在window下面的，window可以缺省，当然有些特殊的不可以省略

我们改成如下代码：

var aa="123";
var bb=function(){alert(aa)};
alert(window.aa)
window.alert(aa);
window.bb();

全局aa变量通过window.可以访问到，bb方法也可以，同样alert方法也可以通过window访问到，

js为了给我省略这个冗余代码，我们通过简写缺省就可以了！不过我们心里却要记住是挂在在window下面的，可以通过它就调用

我们下面看window的属性和方法：

window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')   新窗口的打开

参数解释：
      window.open 弹出新窗口的命令；
　　'page.html' 弹出窗口的文件名；
　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
　　height=100 窗口高度；
　　width=400 窗口宽度；
　　top=0 窗口距离屏幕上方的象素值；
　　left=0 窗口距离屏幕左侧的象素值；
　　toolbar=no 是否显示工具栏，yes为显示；
　　menubar，scrollbars 表示菜单栏和滚动栏。
　　resizable=no 是否允许改变窗口大小，yes为允许；
　　location=no 是否显示地址栏，yes为允许；
　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；window.close()关闭当前窗口

window.moveTo(x,y) 方法可把窗口的左上角移动到一个指定的坐标。

window.moveBy(x,y) 方法可相对窗口的当前坐标把它移动指定的像素。

window.resizeTo(width,height) 方法用于把窗口大小调整为指定的宽度和高度。

window.resizeBy(x,y) 方法用于根据指定的像素来调整窗口的大小。

window.status= "php点点通";改变状态栏显示的基本信息。

window.defaultStatus = "php点点通";改变状态栏显示的基本信息。

我们下面多一些功能代码处理：

新窗口打开：

window.open("https://www.baidu.com/","demo",'height=400', 'width=400')

窗口关闭：

<input type="button" id="close" value="关闭" />

var wclose=document.getElementById("close");
wclose.onclick=function(){window.close();};

open方法与close是配对使用，只有open打开的窗口才可以运用close方法；

moveBy(x,y)这些操作窗口的方法都是对open打开的窗口有效

下面的就是我们dom提到间隔执行函数和一次延时函数，也是直接在window下面的，我们不做解释和分析了

setTimeout(epress,time) 方法用于在指定的毫秒数后调用函数或计算表达式。

clearTimeout(timeID)停止已经启动的定时器

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval()停止使用setInterval() 方法

（三）Window.Navigator对象，包含的属性描述了正在使用的浏览器

navigator对象是window的下一级对象，也可以看做是window的属性，调用时window可省略

我们就不做太多解释，navigator包含了所有当前浏览器的信息

appCodeName  返回浏览器的代码名。
appMinorVersion  返回浏览器的次级版本。
appName  返回浏览器的名称。
appVersion  返回浏览器的平台和版本信息。
browserLanguage  返回当前浏览器的语言。
cookieEnabled  返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass  返回浏览器系统的 CPU 等级。
onLine  返回指明系统是否处于脱机模式的布尔值。
platform  返回运行浏览器的操作系统平台。
systemLanguage  返回 OS 使用的默认语言。
userAgent  返回由客户机发送服务器的 user-agent 头部的值。
userLanguage  返回 OS 的自然语言设置。

我们代码一次演示输出：

alert(navigator.appCodeName)
alert(navigator.appMinorVersion)
alert(navigator.appName)
alert(navigator.appVersion)
alert(navigator.browserLanguage)
alert(navigator.cookieEnabled)
alert(navigator.cpuClass)
alert(navigator.onLine)
alert(navigator.platform)
alert(navigator.systemLanguage)
alert(navigator.userAgent)
alert(navigator.userLanguage)

我们从中也可以看到很多我们有用的信息属性，浏览器的名称，运行平台，cookie启用等

（四）Window.History对象，其实就是来保存浏览器历史记录信息。

history对象是window的下一级对象，也可以看做是window的属性，调用时window可省略

length，返回浏览器历史列表中的 URL 数量。

back()加载 history 列表中的前一个 URL。

forward()加载 history 列表中的下一个 URL。

go()加载 history 列表中的某个具体页面。

如常见的返回上一页：History.go(-1)和history.back()

（五）Window.Location对象，Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

hash:设置或返回从井号 (#) 开始的 URL（锚）。

host:设置或返回主机名和当前 URL 的端口号

hostname:设置或返回当前 URL 的主机名。

href:设置或返回完整的 URL。

pathname:设置或返回当前 URL 的路径部分

port:设置或返回当前 URL 的端口号

protocol:设置或返回当前 URL 的协议。

search:设置或返回从问号 (?) 开始的 URL（查询部分）。

assign()加载新的文档。

reload()重新加载当前文档。

replace()用新的文档替换当前文档。

我们先来属性的输出：

alert(window.location.hash)
alert(window.location.host)
alert(window.location.hostname)
alert(window.location.href)
alert(window.location.pathname)
alert(window.location.port)
alert(window.location.protocol)
alert(window.location.search)

看出，url的路径部分，还有？后面参数我们是会经常要处理的

我们进行方法的操作：

载入指定页面，这个我们不太常用

window.location.assign("2-js基本概念.html")

刷新当前页面，重新载入

window.location.reload();

（六）BOM综合实例

我们从dom看到bom，梳理出，js是一门基于对象的语言，处理的方式就是

obj.属性

obj.属性=“属性值”

obj.方法

obj.事件=方法

我们js的处理，应该在整个文档加载完运行，我们为了兼容，都要放入

window.onload=function(){}的内部去写js代码

我们做一些bom的综合实力处理：

检测是手机还是电脑做跳转：

//平台、设备和操作系统  
    var system ={  
        win : false,  
        mac : false,  
        xll : false  
    };  
    //检测平台  
    var p = navigator.platform;  
    alert(p);  
      
    /**var sUserAgent = navigator.userAgent.toLowerCase(); 
    alert(sUserAgent);*/  
      
    system.win = p.indexOf("Win") == 0;  
    system.mac = p.indexOf("Mac") == 0;  
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);  
    //跳转语句  
    if(system.win||system.mac||system.xll){//转向后台登陆页面  
        window.location.href="http://www.baidu.com";  
    }else{  
        window.location.href="http://t.qq.com";  
    }

检测浏览器类型和版本：

var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var s;
        (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
 
        //以下进行测试
        if (Sys.ie) document.write('IE: ' + Sys.ie);
        if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
        if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
        if (Sys.opera) document.write('Opera: ' + Sys.opera);
        if (Sys.safari) document.write('Safari: ' + Sys.safari);

 

BOM到这里，主要接口就介绍完毕，还有使用方法！bom的处理我们平时用的较少一些，主要是对dom的操作，把dom学好才是最主要的！