一、window对象

BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global的对象。

1、全局作用域

由于window是Global对象,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

    var age = 29;
function sayAge() {
alert(this.age);
}
alert(window.age); //
sayAge(); //
window.sayAge(); //

定义全局变量与在window对象上直接定义属性的差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。

    var age = 29;
window.color = "red";
delete window.age; //在IE<9时抛出错误,在其他所有浏览器中都返回false
delete window.color; //在IE<9时抛出错误,在其他所有浏览器中都返回true
alert(window.age); //
alert(window.color); //undefined

使用var语句添加的window属性有一个名为[[Configurable]]的特性,这个特性的值被设置为false,因此这样定义的属性不可以通过delete操作符删除。IE8及更早版本在遇到使用delete删除window属性的语句时,不管该属性最初是如何创建的,都会抛出错误。IE9及更高版本不会抛出错误。

另外,尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在。

2、窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并且保持在frames集合中。在frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架名称来访问想要的window对象。每个window对象都有一个name属性,其中包含框架的名称。

可以通过window.frames[0]或者window.frames["topFrame"]来引用框架。不过,最好使用top而非window来引用这些框架(例如,top.frames[0])。

top对象始终指向最高(最外层的框架),也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。因为window对象指向的都是那个框架的特定实例,而非最高层的框架。

与top相对的另一个window对象是parent:始终指向当前框架的直接上层框架。在没有框架的情况下,parent一定等于top(此时它们都等于window)

除非最高层窗口是通过window.open()打开的,否则其window对象的name属性不会包含任何值。

self,它始终指向window;实际上self和window对象可以互换使用。引入self的目的只是为了与top和parent对象对应起来。

注意:在使用框架的情况下,浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数,因此每个框架都有一套自己的构造函数,这些构造函数一一对应,但并不相等。例如,top.Object并不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用instanceof操作符。

3、窗口位置

最终结果是无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。

 var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.scrollX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.scrollY;

IE、Safari、Opera和Chrome提供了screenLeft和screenTop属性,firefox则提供了scrollX和scrollY属性,Safari和Chrome也同时支持这两个属性。

IE、Opera和Chrome中screenLeft和screenTop保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。

而在Firefox和Safari中,scrollX和scrollY保存的是整个浏览器窗口相对于屏幕的坐标值。

注意:moveTo()和moveBy()这个两个方法在Opera和IE7(及更高版本)中默认被禁用。

4、窗口大小

IE9+,fireFox,Safari,Opera和Chrome提供了outerWidth和outerHeight返回浏览器窗口本身的尺寸大小。但是IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性;不过,它通过DOM提供了页面可见区域的相关信息。

    var pageWith = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWith != "number") {
if (document.compatMode == "CSS1Compat") { //判断页面是否处于标准模式
pageWith == document.documentElement.clientWidth;
pageHeight == document.documentElement.clientHeight;
} else {
pageWith = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
alert(pageWith + ":" + pageHeight);
// 在IE、Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth和
// document.documentElement.clientHeight保存了页面视口的信息。在IE6中,这些属性必须在标准模式下才有效;
// 如果是混杂模式,就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。
// 而对于Chrome,则都可以取得视口的大小。

注意:resizeTo()和resizeBy()这个两个方法在Opera和IE7(及更高版本)中默认被禁用。

5、导航和打开窗口

window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4个参数:

要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常指传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。

    window.open("http://www.wrox.com/", "topFrame");
//等价于<a href="http://www.wrox.com" target="topFrame"></a>
// 如果有一个名叫“topFrame”的窗口或者框架,就会在该窗口或框架加载这个URL;否则,就会创建一个新窗口并将其
// 命名为“topFrame”。此外,第二个参数也可以是下列任何一个特殊的窗口名称:_self,_top,_blank。

①弹出窗口

如果没有传入第三个参数,那么就会打开一个带有全部默认设置(工具栏,地址栏和状态栏等)的新浏览器窗口(或者打开一个新标签页——根据浏览器设置)。在不打开新窗口的情况下,会忽略第三个参数。

下表列出了可以出现在第三个参数这个字符串的设置选项:

设置 说明
fullscreen yes或no 表示浏览器窗口是否最大化。仅限IE
height 数值 表示新窗口的高度,不能小于100
left 数值 表示新窗口的左坐标。不能是负值
location yes或no 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果是设置为no,地址栏可能会隐藏,也可能会被禁用(取决于浏览器)
menubar yes或no 表示是否在浏览器窗口中显示菜单栏。默认值为no
resizable yes或no 表示是否可以拖动浏览器窗口的边框改变其大小。默认值为no
scrollbars yes或no 表示如果内容在视口中显示不下,是否允许滚动。默认值为no
status yes或no 表示是否在浏览器窗口中显示状态栏。默认值为no
toolbar yes或no 表示是否在浏览器窗口中显示工具栏。默认值为no
top 数值 表示新窗口的上坐标。不能是负值
width 数值 表示新窗口的宽度。不能小于100
    //    浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置,但却允许我们针对通过window.open()
// 创建的窗口调整大小或移动位置
var wroxWin = window.open("http://www.wrox.com/", "topFrame", "height=400,width=400,top=10,left=10,resizable=yes");
// 调整大小
wroxWin.resizeTo(600, 600);
// 移动位置
wroxWin.moveTo(100, 100);
// 关闭新打开的窗口,仅适用于通过window.open()打开的弹出窗口。对于浏览器的主窗口,如果没有得到用户
// 的允许是不能关闭它的。不过,弹出窗口倒是可以调用top.close()在不经用户允许的情况下关闭自己。
// wroxWin.close();
// 新创建的window对象有一个opener属性,其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象(top)
// 中有定义,而且指向调用window.open()的窗口或框架。
// 虽然弹出窗口中有一个指针指向打开它的原始窗口,但原始窗口中并没有这样的指针指向弹出窗口。
alert(wroxWin.opener == window);
// 将wroxWin.opener设置为null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信,因此,可以在独立的进程中运行。
wroxWin.opener = null;

②安全限制

不同浏览器对弹出窗口的限制不同

③弹出窗口屏蔽程序

6、间歇调用和超时调用

7、系统对话框

二、location对象

1、查询字符串参数

2、位置操作

三、navigator对象

1、检测插件

2、注册处理程序

四、screen对象

五、history对象

《高级程序设计》8 BOM的更多相关文章

  1. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  2. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  3. javascript高级程序设计阅读笔记(一)

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  4. 《JavaScript高级程序设计》学习笔记

    系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...

  5. JavaScript高级程序设计(第三版)学习笔记20、21、23章

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

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

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

  7. 赠书《JavaScript高级程序设计(第三版)》5本

    本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...

  8. 《JavaScript高级程序设计》 -- 基本概念(一)

    之前看过好几遍<JavaScript高级程序设计>这一书,但是始终没有完完整整的看过一遍.从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因 ...

  9. JavaScript高级程序设计(读书笔记)(一)

    本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考. 第一章 JavaScript简介 JavaScript发展简史: 1995年,JavaScript诞生 19 ...

  10. javascript 高级程序设计 一

    前言: 作为一个即将毕业.正在实习的大学生,我也默默的进入了开发者的行列.从一开始的c#编码狗到java程序员再到现在的JS开发者,我一直 希望自己可以在这个'万恶'的互联网时代走的更远.但是我还是一 ...

随机推荐

  1. github+hexo+node.js搭建个人博客基本过程及遇到的问题

    一,所需工具 1,github账号+Gitclient+配置SSH key 2,安装node.js. 3,安装Hexo. 当中,github pages是我们用来部署我们本地的博客到github上的. ...

  2. hdu 2460(tarjan求边双连通分量+LCA)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2460 思路:题目的意思是要求在原图中加边后桥的数量,首先我们可以通过Tarjan求边双连通分量,对于边 ...

  3. Zookeeper权限管理与Quota管理

    Zookeeper的ACL机制和Quota机制网上资料较少,这里做一个总结,以供大家参考. 1 Zookeeper ACL ZooKeeper的权限管理亦即ACL控制功能通过Server.Client ...

  4. python greenlet背景介绍与实现机制

    并发处理的技术背景 并行化处理目前很受重视, 因为在很多时候,并行计算能大大的提高系统吞吐量,尤其在现在多核多处理器的时代, 所以像lisp这种古老的语言又被人们重新拿了起来, 函数式编程也越来越流行 ...

  5. 如何学习TP框架

    1.学习访问方法 2.控制器的写法 3.视图的写法 4.模型的写法 5.扩展类的用法 6.扩展插件的用法

  6. Servlet 3.0 介绍

    1. 概述 注解代替 web.xml 配置文件 异步处理 对上传的支持 2. 注解代替 web.xml 配置文件 使用方法 在 Servlet 类上添加 @WebServlet(urlPatterns ...

  7. 前端基础 & 初识JS(JavaScript)

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中),后将其改名ScriptEase(客 ...

  8. 我的Android进阶之旅------>Android中Dialog系统样式讲解

    今天在维护公司的一个APP的时候,有如下场景. 弹出一个AlertDialog的时候,在系统语言是中文的时候,如下所示: 弹出一个AlertDialog的时候,在系统语言是English的时候,如下所 ...

  9. 我的Android进阶之旅------>(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

    作者:马忠信,作者授权早读课发表,转载请联系作者. 原文链接:http://www.jianshu.com/p/c3387bcc4f6e#  互联网早读课:http://zaodula.com/arc ...

  10. 操作系统/应用程序、操作中的“并发”、线程和进程,python中线程和进程(GIL锁),python线程编写+锁

    并发编程前言: 1.网络应用 1)爬虫 直接应用并发编程: 2)网络框架 django flask tornado 源码-并发编程 3)socketserver 源码-并发编程 2.运维领域 1)自动 ...