JavaScript学习笔记（7）

来源：互联网发布：什么下载软件好编辑：程序博客网时间：2024/06/08 11:02

BOM（浏览器对象模型）

BOM是JavaScript的第二大核心，包含了很多对象用于访问浏览器的功能，这些功能与网页内容无关，很大程度上方便了浏览器的操作。

1 window对象

BOM的核心对象，既是通过JS访问浏览器的接口，也是网页中定义的任何一个对象、变量、函数的全局对象。

1.1 全局作用域

在全局作用域下定义的变量和函数都会被自动归在window对象名下，可以通过window.propertyName，window.functionName()访问和调用。
但是定义全局变量和在window对象上直接定义属性还是有不同之处：
全局变量不能通过delete操作符删除，window对象上定义的属性可以。

var age = 1; // 全局变量 可以用window.age访问window.color = "red"; //window对象上定义的属性delete window.age; //返回false，全局变量不能用delete删除delete window.color// 返回true

1.2 窗口关系和框架

HTML中用frame来划定网页的大致框架是很常用的方法。每个框架都有自己的window对象，并且保存在frames集合里，在集合中，可以通过数值索引（从0开始，左上至右下递增）或者框架名称（name属性）来访问相应的window对象。

更常用的是top、parent、self对象，

top表示顶层框架（最外层框架，即浏览器窗口）；
如果有框架集嵌套，则parent表示当前框架的直接上层框架；
self则是表示window所指向的框架的特定实例。

<html>    <head>    <title>Frameset</title>    </head>    <frameset rows="160,*">        <frame src="frame1.html" name="topFrame">        <frameset cols="50%,50%">            <frame src="frame2.html" name="leftFrame">            <frame src="frame3.html" name="rightFrame">        </frameset>    </frameset></html>

上例中的3个frame的访问规则可以用下图表示：
这里写图片描述

1.3 窗口位置和窗口大小

2 location对象

location提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能，同时还可以将URL解析为独立的片段。location对象既是window对象的属性，也是document对象的属性。
location对象的所有属性：

属性名举例说明 hash “#contents” 返回URL中的哈市，如果URL不包含hash则返回空字符串 host “www.some.com:8080” 返回服务器名称和端口号 hostname “www.some.com” 返回服务器名称 href “http://www.some.com” 返回完整的URL pathname “/somepath/” 返回URL中的目录或文件名 port “8080” 返回端口号 protocol “http:” 返回页面使用的协议 search “?q=somequery” 返回URL的查询字符串，以问号开头

2.1 查询字符串参数

由于search属性的特殊性，当查询字符串比较复杂的时候，通过location.search得到的结果还需要再次解析。
多个查询字符串之间会用”&”隔开，如下函数，可以实现对多个查询字符串的参数-值对的解析。

function getQueryArgs(){    var qs = (location.search.length > 0?location.search.substring(1):"");//去掉开头的?问号    var args = {}; //保存最终解析的结果    var items = qs.length?qs.split("&"):[]; //若qs不为空，则以&为界分割字符串 存入items数组    var item = null; //保存中间结果    var name = null, value = null;//由于存储参数和参数值的变量    var i = 0, len = items.length;//循环变量和循环终止上界    for(i = 0; i < len; i++){        item = items[i].split("="); //用等号作为分隔，将参数和参数值拆分，每一次循环item数组都有2项        name = decodeURIComponent(item[0]); //将item数组的第一项解码并存入name        value = decodeURIComponent(item[1]);//将item数组的第二项解码并存入value        if (name.length){            args[name] = value; //将键值对保存进args散列表中        }    }    return args;}location.search = "?q=1&id=100"var args = getQueryArgs();alert(args["q"]); //"1"alert(args["id"]); //"100"

2.2 位置操作

location对象可以改变浏览器的位置.
其中最常用的方法是location.assign(url)，该方法可以立即打开新的URL并在浏览器的历史记录中生成一条记录，修改location.href属性也有同样的效果。修改location的其他属性也可以改变当前加载的页面。
location.replace(url)方法会跳转到指定URL，但不会生成历史记录，使用后退也不能返回。
location.reload()方法会重新加载当前页面，无参数调用时，页面会自动判断最优方式，无改变则从缓存中加载，有改变则从服务器加载。参数为true则指定从服务器重新加载。

3 navigator对象

navigator对象用于识别客户端浏览器。其属性包括浏览器名称、版本信息、浏览器配置、客户端操作系统等信息。

3.1 检测插件

navigator对象的plugins属性是个数组，可以用于检测浏览器是否安装了特定插件。，数组的每一项都包含了下列属性。

name，插件名
description，插件描述
filename，插件的文件名
length，插件所处理的MIME类型数量

//由于实现方法不同，所以IE和非IE的浏览器检测方法也不同function checkPlugin(name){ //对于非IE浏览器    name = name.toLowerCase(); //将传入参数转小写，规范化    for (var i=0;i<navigator.plugins.length;i++){        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){            return true;//indexOf大于-1表示plugins中存在给定的name        }    }    return false;}function checkIEPlugin(name){ //对于IE浏览器    try{//尝试创建该name的对象        new ActivityXObject(name);        return true;//创建成功则说明有该插件，返回true    } catch(ex){        return false;    }}function hasPlugin(name){//兼容所有浏览器的检测方法    var result = checkPlugin(name); //先假定为非IE浏览器，检测一次    if(!result){ //如果为false则可能是不存在该插件或者当前浏览器为IE        result = checkIEPlugin(name); //按照IE浏览器的方法，检测一次    }    return result; //返回结果}

4 screen对象

用于表明客户端的能力，包括浏览器外部显示器的信息，像素宽高、DPI等值。

5 history对象

history对象保存了用户上网的历史记录。go()方法可以在用户的历史记录中任意跳转。
参数为正数表示前进，负数表示后退，为字符串则跳转到包含这个字符串，且离当前页最近的一个位置。其简化版是back()和forward()。

0 0