JavaScript高级程序设计-8:BOM
1. 什么是BOM?
BOM(Browser Object Mode) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
2. Window对象
2.1 框架与窗口关系
Window对象是指当前代码所存在的框架实例,在没有引入框架的情况下指的是浏览器窗口。同时需要了解其他窗口关系:
- Window对象:指当前代码所存在的框架实例
- Top对象:任何时候都指向最顶层框架,也就是浏览器窗口
- Parent对象:指当前框架的直接上层框架
- self对象:始终指向window,和window可以互换使用
2.2 窗口位置与大小
窗口位置我暂时没有想到什么应用的场合,这里主要讨论窗口大小的问题。IE9+、 Firefox、 Safari、 Opera 和 Chrome均提供了innerWidth、 innerHeight、 outerWidth 和 outerHeight属性来确定窗口信息。而IE8以下版本不支持该属性,不过它通过DOM提供了窗口相关信息:document.documentElement.clientWidth来保存页面视口的宽度。在IE6中,这些属性只在标准模式下才有效,而在混合模式下,就必须通过document.body.clientWidth来保存相同的信息。
//兼容性代码如下
var pageWidth = window.innerWidth,
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;
}
}
而对于移动设备也存在同样的问题。主流浏览器支持window.innerWidth保存可见视口,而IE浏览器不支持该属性,采用document.documentElement.clientWidth来保存页面宽度信息。
//移动端兼容性代码(在响应式布局时最好先判断是否为移动端)
windows.innerWidth ? windows.innerWidth : document.body.clientWidth;
windows.innerHeight ? windows.innerHeight : document.body.clientHeight;
注:innerWidth可读可写,而clientWidth是只读的。
2.3 导航与打开窗口
2.3.1 使用window.open()可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。
实例:var wroxWin = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");
其中第一个参数代表目的URL,第二个代表在已有或新建框架"wroxWindow"下加载页面,第三个参数代表新窗口都显示哪些特性。
而且使用resizeTo/ moveTo/ close()对新弹出的窗口进行编辑。
2.3.2 窗口被禁用弹出
禁止窗口弹出可能是浏览器内置的屏蔽程序,此时window.open()会返回null;还有可能是其他屏蔽工具,这是该条语句会导致错误。鉴于禁止弹窗分为两种情况,我们需要将windo.open()封装在一个try-catch块中。
var blocked = false;
try {
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
blocked = true;
}
} catch (ex){
blocked = true;
}
if (blocked){
alert("The popup was blocked!");
}
2.4 超时调用和间歇调用
2.4.1 超时调用 setTimeOut()
超时调用共传递两个参数,要执行的代码和一毫秒表示的时间。因为以字符串形式传递代码可能会影响性能,所以不建议传递字符串。
//不建议传递字符串!
setTimeout("alert('Hello world!') ", 1000);
//推荐的调用方式
setTimeout(function() {
alert("Hello world!");
}, 1000);
调用 setTimeout() 之后,该方法会返回一个数值 ID,表示超时调用。这个超时调用 ID 是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeout() 方法并将相应的超时调用 ID 作为参数传递给它,如下所示。
//设置超时调用
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);
//注意:把它取消
clearTimeout(timeoutId);
注:超时调用的代码都是在全局作用域中执行的,因此函数中 this 的值在非严格模式下指向 window 对象,在严格模式下是 undefined。
2.4.2 间歇调用 setInterval()
调用 setInterval() 方法同样也会返回一个间歇调用 ID,该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用,可以使用 clearInterval() 方法并传入相应的间歇调用 ID。取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面卸载。以下是一个常见的使用间歇调用的例子。
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
//如果执行次数达到了 max 设定的值,则取消后续尚未执行的调用
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber, 500); //使用超时调用也可以达到间歇调用的功能 var num = 0;
var max = 10;
function incrementNumber() {
num++;
//如果执行次数未达到 max 设定的值,则设置另一次超时调用
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);
可见,在使用超时调用时,没有必要跟踪超时调用 ID,因为每次执行代码之后,如果不再设置另一次超时调用,调用就会自行停止。一般认为,使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用,则完全可以避免这一点。所以,最好不要使用间歇调用。
3. location对象
location对象提供了当前窗口加载的文档的有关信息,它将URL解析成不同的片段,让开发人员可以用不同的属性访问这些片段。下表列出了 location 对象的所有属性(注:省略了每个属性前面的 location 前缀)。
属性名 | 例子 | 说明 |
hash | "#contents" | 返回URL中的hash( #号后跟零或多个字符),如果URL中不包含散列,则返回空字符串 |
host | "www.wrox.com:80" | 返回服务器名称和端口号(如果有) |
hostname | "www.wrox.com" | 返回不带端口号的服务器名称 |
href | "http:/www.wrox.com" | 返回当前加载页面的完整 URL。而location 对象的toString() 方法也返回这个值 |
pathname | "/WileyCDA/" | 返回URL中的目录和(或)文件名 |
port | "8080" | 返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串 |
protocol | "http:" | 返回页面使用的协议。通常是http: 或https: |
search | "?q=javascript" | 返回URL的查询字符串。这个字符串以问号开头 |
3.1 查询字符
虽然通过上面的属性可以访问到 location 对象的大多数信息,但其中访问 URL 包含的查询字符
串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的所有内容,但却没有办法逐个
访问其中的每个查询字符串参数。为此,可以像下面这样创建一个函数,用以解析查询字符串,然后返
回包含所有参数的一个对象:
function getQueryStringArgs(search){
//先判断参数长度,把问号去掉
var qs = search.length ? search.substring(1) : "";
//然后按&分割成字符串数组
var queryString = {};
var args = qs.length ? qs.split("&") : [];
//然后把数组的元素分别保存为对象成员
for(var i=0; i<args.length; i++){
var arg = args[i].split("=");
var name = arg[0];
var value = arg[1];
queryString [name] = value;
}
return queryString;
} var exp = getQueryStringArgs("?q=javascript&num=10");
console.log(exp["q"]);
console.log(exp.num);
3.2 位置操作
对浏览器的位置操作最常用的是location.href, location.replace(), location.reload(),用法分别如下:
- location.href会打开一条新的URL,点击后退可以退回到之前的URL。location.href其实是调用了assign()方法,也就是location.assign()会和location.href执行一样的操作
- location.replace()会直接将浏览器跳转到新的URL,别且点击后退时不能跳转到原来的页面
- location.reload()是重新加载当前的页面,一般是加载缓存中的页面,如果需要从服务器重新加载,则要为该方法传递参数true。使用reload()后,下面的代码可能执行也可能不执行,所以最好把reload放在代码的最后一行。
4. navigator对象
主要是用于识别浏览器的类型,以及是否安装插件的判断。用到的时候再查找即可。
JavaScript高级程序设计-8:BOM的更多相关文章
- 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- javascript高级程序设计阅读笔记(一)
javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...
- 《JavaScript高级程序设计》学习笔记
系统学习JS, 从<JavaScript高级程序设计>入门,通过学习jQuery或者angularJS源码来进阶. 第1章 JavaScript简介 1.JS问世的目的是处理以前由服务器端 ...
- JavaScript高级程序设计(第三版)学习笔记20、21、23章
第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...
- 读书时间《JavaScript高级程序设计》一:基础篇
第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一 ...
- 赠书《JavaScript高级程序设计(第三版)》5本
本站微博上正在送书<JavaScript高级程序设计>走过路过的不要错过,参与方式,关注本站及简寻网+转发微博:http://weibo.com/1748018491/DoCtp6B8r ...
- 《JavaScript高级程序设计》 -- 基本概念(一)
之前看过好几遍<JavaScript高级程序设计>这一书,但是始终没有完完整整的看过一遍.从现在开始我会把它完整的啃一遍,每章节都记录笔记,自己的心得,加油! 由于前三章的内容比较简单,因 ...
- JavaScript高级程序设计(读书笔记)(一)
本笔记汇总了作者认为“JavaScript高级程序设计”这本书的前七章知识重点,仅供参考. 第一章 JavaScript简介 JavaScript发展简史: 1995年,JavaScript诞生 19 ...
- javascript 高级程序设计 一
前言: 作为一个即将毕业.正在实习的大学生,我也默默的进入了开发者的行列.从一开始的c#编码狗到java程序员再到现在的JS开发者,我一直 希望自己可以在这个'万恶'的互联网时代走的更远.但是我还是一 ...
随机推荐
- NYOJ 925 国王的烦恼
从最后一天开始往前加边. 同一天的边同时加到图上,加完之后检查集合数量是否和没加之前有变化. 有变化的话,答案就+1. #include<cstdio> #include <iost ...
- Android Studio的使用(五)--导入第三方Jar包
本篇博文将介绍一下如何导入第三方Jar包. 1.首先将下载的Jar包直接Copy到libs目录下面,然后右击Jar文件,点击Add As Library后,在出现的弹出框点击确定即可. 2.打开bui ...
- Mysql程序
drop table if exists comp_ap; create table comp_ap as select ProjectName, ModelCode, 'AP_ACMClosed' ...
- 用telnet命令,POP3接收邮件
昨天已经成功利用telnet命令发送了邮件,今天接着来,只能发送不能接收多郁闷. 邮件的接收这里是基于pop3协议的,pop3协议共定义了12条与接收相关的邮件,如下面简单解释: 首先是与登陆验证相关 ...
- Eclipse的Java工作集和多工程构建路径
一.Java工作集: Eclipse有一个小功能,就是创建Java Working Set.它的作用是解决Package Explorer窗格中创建很多工程时出现拥挤的麻烦. 在创建(New对话框)时 ...
- hql 链接查询
第一部分.连接查询 一.内连接 内连接查询操作列出与连接条件匹配的数据行,它使用比较运算符比较被连接列的列值.内连接分三种: 1.等值连接:在连接条件中使用等于号(=)运算符比较被连接列的列值,其查询 ...
- iOS7以后的侧滑返回上一页
我们知道,iOS7以后,导航控制器默认带了侧滑返回功能,但是仅限于屏幕边缘.而且在你自定义leftBarButtonItem等之后侧滑效果就会消失.这种问题怎么解决呢? 首先,我们先来看看系统的这种手 ...
- 如何给对话框中的控件发送消息呢?Windows消息分类
以博文CTabCtrl中介绍的那样,给Tab添加子对话框来显示Tab内容.那么如果这个子对话框中含有个CTreeCtrl控件,有个Button控件,我想要模拟给这两个控件发送消息,该怎么办呢?直接把给 ...
- Struts2--Global Result全局结果集
如果有很多action,有共同的result指向, 而且属于不同的包,那么可以继承上面的包, 然后写一个<global-results> 1. jsp显示文件: <ol> &l ...
- JS常用校验方法(判断输入框是否为空,数字,电话,邮件,四舍五入等)
JS常用校验方法: 1.判断输入框是否为空,为空时弹出提示框 2.关闭窗口 3.检查输入字符串是否为数字 4.强制把大写转换成小写 5.手机号码校验,长度为11位数字. 6.电子邮件校验 7.电话号码 ...