JavaScript高级程序设计-第三版（BOM）

最新推荐文章于 2022-07-01 15:17:30 发布

原创最新推荐文章于 2022-07-01 15:17:30 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了浏览器对象模型(BOM)的核心概念，包括window对象的功能、框架间的窗口关系、屏幕和历史对象的使用，以及location和navigator对象的重要属性。此外，还讲解了如何使用window对象进行导航、弹出窗口的管理，以及间歇调用和超时调用的实现。

八、BOM

BOM没有统一的标准，W3C已将BOM的主要方面纳入HTML5规范

8.1 window对象

8.1.1 全局作用域

定义的全局变量都会作为window的属性
直接在window对象上定义的属性可以使用delete进行删除，但定义的全局变量不能
全局变量的[[configurable]]为false

8.1.2 窗口关系及框架

每个框架都拥有自己的window对象，可通过索引或框架名称访问相应的window对象

top 始终指向最外层框架，即浏览器窗口
parent 指向当前框架的直接上层框架
self 始终指向当前window对象
每个框架有自己的一套构造函数，不同框架间的构造函数不相等

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

8.1.3 窗口位置

不同的浏览器支持以下方式中的一种以获取窗口位置
- screenLeft和screenTop
- screenX和screenY
移动位置
- moveTo()
- moveBy()

8.1.4 窗口大小

获取窗口大小
- innerWidth、innerHeight、outerWidth、outerHeight
- document.documentElement
  标准模式
  - clientWidth
  - clentHeight
- document.body
  混杂模式
  - clientWidth
  - clientHeight
改变窗口大小
- resizeTo()
- resizeBy()

8.1.5 导航和打开窗口

window.open()
- 要加载的URL
- 窗口目标
  <a href="…" target=“窗口目标” ></a>
  - 如果是已有窗口或框架的名称，则会在对应位置处加载URL
  - 如果是未存在的窗口或框架名称，则会打开新窗口加载URL，并将其命名为相应的名称
  - 特殊的窗口名称：_self、_parent、_top、_blank
- 特性字符串
- 表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

8.1.5.1 弹出窗口

如果是弹出新窗口，则新窗口的属性由特性字符串设置
- 特性字符串由逗号分隔的键值对组成
  - height、width、top、left等
window.open()
- 返回新窗口的引用
window实例对象
- close()
  - 只能关闭通过window.open()打开的弹出窗口
  - 窗口关闭后，新窗口的引用还存在，但只能检测其closed属性（bool）
- opener
  - 打开新窗口的原始窗口对象
  - 只存在最外层window对象（top） 中

8.1.5.2 安全限制

部分浏览器会限制弹出窗口特性以及屏蔽弹出窗口

8.1.5.3 弹出窗口屏蔽程序

内置屏蔽程序阻止弹窗
- window.open()返回null
拓展或其他程序阻止弹窗
- window.open()报错

8.1.6 间歇调用和超时调用

javascript是单线程语言
- 只有一个执行线程，同步任务在该线程中执行
- 同时存在一个任务队列，存放异步任务
- 当同步任务执行完毕后，从任务队列中读取异步任务并执行
浏览器是多线程的
超时调用
- setTimeout()
  - 参数
    - 要执行的代码
      - 字符串
      - 函数
    - 超时时间
      经过多长时间将代码添加到任务队列中，并按任务队列的顺序执行
  - 返回值
    数值ID，计划执行代码的唯一标识
- clearTimeout()
  - 数值ID
间歇调用
- setInterval()
  时间间隔可能不准确，后一个间歇调用可能会在前一个间歇调用结束之前启动
- 可以用超时调用模拟间歇调用
  在超时调用的任务代码中再调用超时调用

var num=0;
var max=10;
var intervalId=null
function incrementNumber(){
	num++;
	if(num>max){
		clearInterval(intervalId);
		alert("Done");
	}
}
intervalId=setInterval(incrementNumber,500);

function incrementNumber(){
	num++;
	if(num<max){
		setTimeOut(incrementNumber,500);
	}else{
		alert("Done");
	}
}
setTimeOut(incrementNumber,500);

8.1.7 系统对话框

同步对话框
会阻塞线程
- alert()
  - 要显示的提示信息
- confirm()
  - 参数
    - 要显示的提示信息
  - 返回值
    - 点击OK，返回true
    - 其他，返回false
- prompt()
  - 参数
    - 要显示的提示信息
    - 文本域中的默认值
  - 返回值
    - 点击OK，返回文本域中的值
    - 其他，返回null
Google Chrome
当连续弹出多个对话框时，从第二个对话框开始会出现复选框，表示是否阻止之后的对话框弹出
异步对话框
- window.print()
- window.find() 查找

8.2 location对象

既是window对象的属性，又是document对象的属性
location对象的作用
- 提供了与当前窗口中加载的文档有关的信息
- 将URL解析为对立的片段

属性名	示例	说明
hash	“#contents”	返回URL中的hash（#号后跟零或多个字符）
host	“www.wrox.com:80”	返回服务器名和端口号
hostname	“www.wrox.com”	返回不带端口号的服务器名称
href	“http://www.wrox.com”	返回当前加载页面的完整URL。location对象的toString()方法也返回这个值
pathname	“/WileyCDA/”	返回URL中的目录和文件名
port	“8080”	返回URL中指定的端口号
protocol	“http:”	返回页面使用的协议，http:或https:
search	“?q=javascript”	返回URL的查询字符串

8.2.1 查询字符串参数

search属性无法逐个访问其中的每个查询字符串参数

function getQueryStringArgs(){
	var qs=(location.search.length>0?location.search.substring(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;
}

8.2.2 位置操作

location.assign("…")
页面跳转，并会产生历史记录
location.href="…" 或者 window.location="…"
- 自动调用assign()方法
每次修改location的属性（hash除外），页面都会以新URL重新加载
location.replace("…")
页面跳转，但不会产生历史记录
location.reload()
- 传入参数bool值
  是否从服务器重新加载，若不设置，且页面没有改变则会从缓存中重新加载

8.3 navigator对象

提供浏览器的信息，通常用于检测显示网页的浏览器类型

8.3.1 检测插件

非IE浏览器
- navigator.plugins
  数组中的每一项都包含以下属性
  - 每一个plugin
    - name
    - description
    - filename
    - length
      插件所处理的MIME类型数量
  - plugins集合
    - refresh（） 重新获取所有插件，传入true则刷新所有插件页面
IE浏览器
- ActiveXObject()
  - 参数
    - 唯一标识符
  - 尝试根据唯一标识符创建对象，若插件存在，则可以成功创建ActiveXObject对象

8.3.2 注册处理程序

像使用桌面应用程序一样默认使用在线应用程序（例如，RSS阅读器和在线电子邮件程序）

registerContentHandler()
- 要处理的MIME类型
- 可以处理该类型的页面的URL
- 应用程序名称

navigator.registerContentHandler("application/rss+xml","http://www.somereader.com?feed=%s","Some Reader");

registerProtocolHandler()
- 要处理的协议
- 可以处理该类型的页面的URL
- 应用程序名称

8.4 screen对象

表明客户端的能力，其中包括浏览器窗口外部的显示器的信息

8.5 history对象

window对象的属性，不同框架有不同的history对象与特定的window对象关联
当页面URL改变时，就会生成一条历史记录。
开发人员无法得知浏览过的URL，但可以通过页面列表进行前进和后退
history.go()
- 可以是数值
  负数表示后退，正数表示前进
- 也可以是字符串
  跳转到历史记录中包含该字符串的最近的位置，如果没有则什么也不做
单页前进与后退
- history.back()
- history.forward()
history.length
历史记录数量，每个窗口、标签页和框架也自己的window对象和history对象，可用来检测是否是打开窗口后的第一个页面，若length=0。