如果要在web中使用JAVASCRIPT，那么BOM(浏览器对象模型)毫无疑问是最重要的部分。BOM提供了很多对象，例如，window、location、navigator、screen、history对象，下面我们来一一介绍这些对象的相关功能。先从window对象开始，它表示浏览器的一个实例。

window对象：

一、全局作用域

　　window对象在ECMAScript扮演者global对象的角色，因此在全局作用域中声明的变量和函数都会成为window对象的属性和方法；但是通过这两种方式定义的属性和方法还是有区别的：全局变量不能通过delete操作符删除，而直接在window对象上定义的可以。

 var age = 29;
 function sayAge(){
     alert(this.age);
 }
 alert(window.age);
 sayAge();
 window.sayAge();
var age = 29;
window.color = "red";

delelte window.age; //抛出错误
delete window.color;

二、窗口关系以及框架

　　如果页面包含框架，则每个框架都有自己的window对象，并且保存在frames集合中，可以通过多种方式来访问不同的window对象；也可以通过top对象来访问，top对象始终指向最外层的框架，也就是浏览器窗口，使用它，可以确保在一个框架中正确的访问另外一个框架。

<html>
    <head>
        <title>Frameset Example</title>
    </head>
    <frameset rows = "160,*">
        <frame src="1.html" name = "topFrame">
        <frameset cols = "50%,50%">
            <frame src="2.html" name = "leftFrame">
            <frame src = "3.html" name = "rightFrame">
        </frameset>
    </frameset>
</html>

　　访问方式：

 三、窗口位置

　　不同浏览器确定windows对象位置的方法不同，为了能跨浏览器获取位置，我们如下书写代码：

    var leftPos = (typeof window.screenLeft == "number")？window.screenLeft:window.screenX;
    var topPos = (typeof window.screenTop == "number")?window.screenTop:window.screenY;

　　即便如此，我们仍然不能在跨浏览器的环境下，取得窗口左边和上边的精确值：leftPos和topPos有的表示的是整个浏览器窗口相对与屏幕的坐标值，有的需要减去浏览器工具栏的像素高度。

四、窗口大小

　　IE8以及早期的版本没有提供取得当前浏览器窗口尺寸的属性，IE9+以及其余浏览器提供了outerWidth和outerHeight返回浏览器窗口本身本身的尺寸，因此，我们最终无法在跨浏览器的环境下，取得浏览器窗口的尺寸。而对于页面视口的大小，我们可以取得：

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){
    if(document.compatMode == "CSS1Compat"){
        // 标准模式
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        // 混杂模式
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

五、间歇调用和超时调用

　　接下来介绍JAVASCRIPT中的两个重要函数：setTimeout()和setInterval()。JAVASCRIPT是单线程语言，但它允许设置超时和间歇时间值来调度代码在指定时间允许，前者是指，在指定时间过后执行代码，而后者指每隔一定的时间就执行一次代码。　　

// 设置超时调用
var timeoutId = setTimeout(function(){
    alert("hello world");
},1000);

// 可以在超时调动前，取消超时调用
clearTimeout(timeoutId);
// 设置间歇调用
var timeoutId = setInterval(function(){
    alert("hello world");
},1000);

// 取消间歇调用，否则会一直执行
clearInterval(timeoutId);

　　要注意的是，经过了第二个参数设置的1000ms后，函数不一定执行；因为这个参数是告诉JAVASCRIPT再过多长时间把当前任务添加到任务队列中，如果队列是空的，那么添加的代码就会立即执行；如果队列不是空的，那它需要等待前面的任务执行完毕后才执行。

　　在开发环境下，很少使用真正的间歇调用，往往是通过超时调用来模拟间歇调用，因为这样，就不用跟踪间歇调用的ID来取消它（不取消则会一直执行）。

六、系统对话框

　　浏览器通过alert()，confirm()和prompt()方法可以调用系统对话框向用户显示消息，系统对话框与浏览器中显示的网页没有关系，也不包含HTML。它的外观是由操作系统及浏览器设置而定的，不是由CSS决定的。

location对象：

　　location对象的主要功能是，它可以通过自己的属性，将URL解析成独立的片段，让开发人员方便的访问：

　　以下示例通过href的功能修改了页面的URL，其中使用replace()时，会禁用浏览器后退到前一个页面的功能。

<!doctype html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p>Enjoy this page for a second</p>
        <script>
            setTimeout(function(){
                // location.href = "http://www.baidu.com";
                location.replace("http://www.baidu.com");
            },1000);
        </script>
    </body>
</html>

navigator对象：

　　使用navigator对象，可以检测浏览器中是否安装了指定的插件。IE和其他浏览器实现插件的方式不同，因此需要分别创建检测函数，再针对特定的插件做检测：

    function hasPlugin(name){
        name = name.toLowerCase();
        for(var i = 0; i < navigator.plugins.length;i++){
            if(navigator.plugins[i].name.toLowerCase().indexOf(name) != -1){
                return true;
            }
        }
        return false;
    }

    function hasIEPlugin(name){
        try{
            new ActiveXObject(name);
        }catch(ex){
            return false;
        };
    }

    function hasFlash(){
        var result = hasPlugin("Flash");
        if(!result){
            result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
        }
        return result;
    }

    alert(hasFlash());

screen对象：

　　screen对象在编程中用得很少，它包含了浏览器窗口外部显示器的相关信息，通常用于测定客户端能力的站点工具中。

history对象：

　　当页面的URL改变时，会生成一条历史记录，history对象正是保存着这样的用户上网记录。下面介绍一些常用的操作：

// 后退一页
history.go(-1);

// 前进一页
history.go(1);

// 前进2页
history.go(2);

// 跳转到最近的www.baidu.com页面
history.go("www.baidu.com");

// 后退一页
history.back();

// 前进一页
history.forward();

// 历史记录的数量
history.length;

《JAVASCRIPT高级程序设计》window/location/navigator/screen/history对象的更多相关文章

  1. JavaScript之BOM五大对象(window;location;navigator;screen;history)

    一.window 1.浏览器窗口与页面各部分尺寸 2.间歇调用与超时调用 setInterval(function,time(以毫秒计)) 返回:时间Id号(为clearInterval(timeId ...

  2. JavaScript高级程序设计之location对象

    location对象用来处理URL的相关信息 1.获取查询字符串 // 获取查询字符串对象 var getQueryStringArgs = function () { ? location.sear ...

  3. Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)

    var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...

  4. Javascript高级程序设计--读书笔记之理解原型对象

    先上一段代码和关系图 function Person(){} Person.prototype.name = "Nic" Person.prototype.age = 22 Per ...

  5. JavaScript高级程序设计（第4版）知识点总结

    介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...

  6. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  7. 读书时间《JavaScript高级程序设计》一：基础篇

    第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...

  8. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  9. JavaScript高级程序设计（第三版）学习笔记20、21、23章

    第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...

随机推荐

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. DNS架设准备+申请领域查询授权

    1. 架设DNS服务器首先我们得安装一下的软件[root@bogon ~]# rpm -qa | grep ^bindbind-libs-9.8.2-0.37.rc1.el6.i686 <==给 ...

  3. (简单) POJ 2492 A Bug's Life，二分染色。

    Description Background Professor Hopper is researching the sexual behavior of a rare species of bugs ...

  4. Nutch是个不错的选择

    对搜索引擎的理解:我们并没有google 的源代码,因此学习搜索引擎Nutch是个不错的选择.了解一个大型分布式的搜索引擎如何工作是一件让人很受益的事情.在写 Nutch的过程中,从学院派和工业派借鉴 ...

  5. 51nod贪心算法教程

    51nod确实是一个好oj,题目质量不错,wa了还放数据,学习算法来说挺好的,这次我做了几个水的贪心,虽然水,但是确实都很典型. 教程链接:http://www.51nod.com/tutorial/ ...

  6. STM32的NVIC_PriorityGroupConfig使用及优先级分组方式理解

    STM32的NVIC_PriorityGroupConfig使用及优先级分组方式理解 STM32的优先级NVIC_PriorityGroupConfig的理解及其使用 STM32中断优先级彻底讲解 S ...

  7. BZOJ 2209: [Jsoi2011]括号序列 [splay 括号]

    2209: [Jsoi2011]括号序列 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 1111  Solved: 541[Submit][Statu ...

  8. 【转】HashMap实现原理分析

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  9. bzoj1070 修车&& bzoj2879美食节 【费用流】

    bzoj1070: 把每个工人拆成汽车那么多个点,假如说 工人(i, j) 和 汽车k 连边,那就代表第i个工人倒数第j个修汽车k,那么这条边对以后的贡献就是k*time[i修k]. #include ...

  10. Memcached源码分析之memcached.h

    //memcached.h //返回在item中data字段key的地址,即把指针指向key #define ITEM_key(item) (((char*)&((item)->data ...