BOM操作

BOM是Browser Object Model的简写,意思是流量器对象模型,BOM操作就是访问和操作浏览器窗口的模型。
BOM整体对象图:

核心是window对象;

以下有特殊双重身份:

window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;

document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象

location对象既是window对象的属性,同时也是document对象的属性。

1. window对象 (从两个方面看待:ECMAScript规范中的Global对象,也是BOM中的顶级对象)

1.1 window作为ECMAScript中的Global对象

1_引用window对象的属性和方法时,可以省略window。(就像Globle对象一样)
2_在全局作用域中this和window指向同一个对象,另外,还可以使用self来引用window对象,全等关系即:this===window===self。
3_在全局作用域中定义的变量和函数也会成为window对象的属性和方法,但是和直接在window对象上定义属性还是有区别:

a、全局变量不能使用delete删除(相当于给window定义属性时将属性特性[[Configurable]]赋值为false了),

        直接在window对象上定义的属性可以使用delete删除(直接定义window对象时属性特性[[Configurable]]赋值默认为true)。

        如果同时定义了全局变量和window对象的属性,则删除window属性时不起作用。

b、尝试访问未定义的全局变量会抛出异常,但是访问未定义的window对象的属性则只是返回undefined。(这里可以很好地利用此特性进行检测兼容性)
var name = 'Games';                               //全局作用域中定义的变量和函数会成为window对象的属性和方法,但是不能使用delete删除
function getName(){
    return this.name;
}
console.info(window.name);                       // Games
console.info(window.getName());                  // Games
console.info(this == window);                    // true
console.info(this == self);                      //  true
console.info(window == self);                    // true

window.name = 'Kobe';                            //直接在window对象上定义属性,会同时修改全局变量的值,相反,修改全局变量的值,window对象的属性值也会修改
console.info(name);
delete window.name;                              //既定义了全局变量,又在window对象上定义了属性,删除时虽然没有报错,但是并没有起作用
console.info(name);                              //Kobe
console.info(window.name);                       //Kobe

window.team = 'cavs';                            //直接在window对象上定义属性,可以使用delete删除
console.info(window.team);
delete window.color;
console.info(window.color);                      //undefined

1.2 window作为BOM中的顶级对象

1.2.1 浏览器整个窗口与框架

  没有子框架时:window、self、top和parent都相等,都是指最顶层框架,即浏览器窗口。

  有子框架时:window、self 和 top 都为最顶层框架,parent指向当前框架的直接上层框架.
   如果页面中包含框架,则每个框架都有自己的window对象,并且保存在父窗口的frames集合中.

  可以通过索引(从0开始,从左至右,从上至下)或者框架名称name属性访问相应的window对象。每个window对象都有一个name属性,表示所处框架的名称。

1.2.2 window作为顶层对象的主要方法:

兼容性:表示窗口位置的属性有screenLeft、screenTop、screenX、screenY、表示窗口大小的属性有innerWidth、innerHeight、outerWidth、outerHeight,但是它们的具体含义和不同的浏览器密切相关。在处理浏览器差异性建议使用JS框架。

2. history对象

history对象保存着从窗口被打开起的历史记录,每个浏览器窗口、标签页、框架都有自己的history对象。
history对象的主要属性和方法有:

3. location对象

location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;它既是window对象的属性,同时也是document对象的属性.
主要属性有:

主要方法有:

常用情况,将url后面参数键值对分别添加到对象中保存。例如url?username=Games&age=31,取出args[“username”]=”Games”,args[‘age’]=31;

function getQueryStringArgs(){
           //用逗号隔开可用var进行多个变量声明
            var qs = (location.search.length > 0 ? location.search.slice(1) : ""),     //如果?后无数据,则返回空数组,并且去掉查询字符串前面的问号
                args = {},                                                             //空对象用于接收数据
                items = qs.length ? qs.split("&") : [],                                //将参数以&分隔
                item = null,
                name = null,
                value = null,
                i = 0,
                len = items.length;

            for (i=0; i < len; i++){                                                 //循环处理,将每一个参数的名称和值加入到参数对象中
                item = items[i].split("=");                                            //通过等号分割,返回数组
                name = decodeURIComponent(item[0]);                                    //进行编码处理
                value = decodeURIComponent(item[1]);

                if (name.length){
                    args[name] = value;                                              //键值对匹配添加到对象中
                }
            }

            return args;
        }

        var args = getQueryStringArgs();                                             //假定查询字符串返回?username=Gamest&age=31
        console.info(args["usename"]);                                               //"Gamest"
        console.info(args["num"]);                                                   //"10"

4. navigator对象

navigator对象用来描述浏览器本身,包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.
但是各个浏览器及浏览器的不同版本之间对这个对象的实现也不尽相同.
特性检测:不建议直接使用navigator的方法或属性进行检测浏览器版本,在使用特定方法时,如果担心兼容性,则可以使用特性检测。

5. screen对象

screen对象用来表明客户端显示器的能力。多用于测定客户端能力的站点跟踪工具中。
包括浏览器窗口外部的显示器的信息,如像素宽度和高度等,每个浏览器中的screen对象都包含着各不相同的属性。
screen对象属性有:

6. document对象

document对象既是BOM顶级对象的一个属性,更是DOM模型中的顶级对象,在DOM中一起总结。

时间: 2024-09-22 04:04:55

BOM操作的相关文章

PHP批量删除、清除UTF-8文件BOM头的代码实例_php实例

记得运行代码前先把文件备份一下哦,避免出现失败问题. 代码一: function checkBOM ($filename) { global $auto; $contents = file_get_contents($filename); $charset[1] = substr($contents, 0, 1); $charset[2] = substr($contents, 1, 1); $charset[3] = substr($contents, 2, 1); if (ord($char

删除uft-8文件bom头信息的方法

如果您在修改任何PHP文件发生: * 不能登入或者不能登出: * 页顶出现一条空白: * 页顶出现错误警告: * 其它不正常的情况. bom文件是怎么产生呢? window编辑器如果保存为utf8文件就会帮你加上BOM头,以告诉其他编辑器以utf8来显示字符 但是在网页上并不需要添加BOM头识别,因为网页上可以使用 head头 指定charset=utf8告诉浏览器用utf8来解释.但是你用window自动的编辑器,编辑,然后有显示在网页上这样就会显示出0xEF 0xBB 0xBF这3个字符.

PHP中遇到BOM、&amp;lt;feff&amp;gt;编码导致json_decode函数无法解析问题_php技巧

昨天同事遇到一个奇怪的问题,就是以下代码,无法通过JSON校验,也无法通过PHP的json_decode函数解析. 复制代码 代码如下: [     {         "title": "",         "pinyin": ""     } ] 可能聪明的你已经猜到其中包含有不看见的特殊字符,在vim下查看: 复制代码 代码如下: [     {         <feff>"title&quo

PHP批量检测并去除文件BOM头信息代码

如下代码为PHP方式去除当前目录及子目录所有文件BOM信息的代码,新建文件,将其放倒根目录下,然后浏览器访问即可. 例子 将以上代码保存为后缀为php的文件放到需要去除bom的文件目录里面,然后运行该php文件,将会对该目录以及该目录所有的子目录下的文件进行bom检查并去除bom  代码如下 复制代码 <?php if (isset($_GET['dir'])) { //设置文件目录      $basedir = $_GET['dir']; } else {     $basedir = '.

元素-网页上方莫名出现了一个白条,而且图片不能显示,谢谢!急!

问题描述 网页上方莫名出现了一个白条,而且图片不能显示,谢谢!急! 帮朋友调一个网站,问题如题目,我用图片加以说明 通过审查元素看到,代码里不知道怎么就插入了一个白条. 而且图片不显示,怪异的是只限搜狗浏览器,别的浏览器图片都显示,但是白条不分浏览器,都有这个白条.谢谢大家!! 忘了贴出来网址了 http://sunresortshotels.cn/index.php?optionid=971 下图是造成白条的代码 下面是审查元素里面图片的属性被设置成0了,我觉得可能是某JS出了问题 解决方案

前端知识库

前端开发全面知识库,包括HTML5,CSS3和js的基本框架知识,以及DOM和BOM操作的基础知识和一些基本工具和IDE.学习本篇,你将了解到以下知识. 核心 Core HTML5 W3C http://www.w3school.com.cn/html5/ W3C https://www.w3.org/html/ig/zh/wiki/HTML5 菜鸟教程 http://www.runoob.com/html/html5-intro.html HTML5中文门户 http://www.html5c

web前端知识体系小结(转)

1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人们对于前端只有三大块(html.css.js)的认识--做web前端需要的比这三大块要多得多. 拖了好几个月了,但是由于近期将要参加的某一个活动,我不得不这两天把这个东西整出来.说干就干.上午我就开始在办公室画草图,乱七八糟的在那儿理思路. 大家不要害怕,其实下文中的这个知识框架要比草图中的好看的

谁会C#设置 权限? (比如:一个系统, 管理员、库管、采购等等, 拥有的后台权限不同, 该怎么设置 )

问题描述 C#如何设置权限(比如:一个管理系统,管理员.库管.采购等等,拥有的后台权限不同,该怎么设置,本人技术不是很好,请说详细点)或加我QQ244952436我把系统传给各位大神. 解决方案 解决方案二:你可以在数据库里面多加个字段,如管理员的时候为1,非管理员或者其他为2或者3什么的,然后用户每次登陆的时候先判断这个字段是几,如果是1的话就进入管理员界面...解决方案三:库内设置权限表来实现你的需求解决方案四:不同的角色的菜单不同,可以建立用户-角色-菜单关系表解决方案五:建个表来记录权限

【技术问题】 C#操作生产BOM

问题描述 听说咱们CSDN牛人如毛,小弟编程起步,刚入公司,现有一项目,具体要求如下:根据销售订单来展开产品BOM,并且算出毛需求,和净需求ERP为用友U6.还请有这方面经验的大师们指点迷津. 解决方案 解决方案二:为啥没人应答,跪求赐教!解决方案三:项目需求,不在这个板块中提问吧?解决方案四:没看出这个问题跟具体的技术有一毛钱关系自己先理清逻辑再说吧解决方案五:引用2楼ghao0的回复: 项目需求,不在这个板块中提问吧? 那是在哪个版块提问的呢?解决方案六:引用3楼Z65443344的回复: