JavaScript
八、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) 中
- close()
8.1.5.2 安全限制
- 部分浏览器会限制弹出窗口特性以及屏蔽弹出窗口
8.1.5.3 弹出窗口屏蔽程序
- 内置屏蔽程序阻止弹窗
- window.open()返回null
- 拓展或其他程序阻止弹窗
- window.open()报错
8.1.6 间歇调用和超时调用
- javascript是单线程语言
- 只有一个执行线程,同步任务在该线程中执行
- 同时存在一个任务队列,存放异步任务
- 当同步任务执行完毕后,从任务队列中读取异步任务并执行
- 浏览器是多线程的
- 超时调用
- setTimeout()
- 参数
- 要执行的代码
- 字符串
- 函数
- 超时时间
经过多长时间将代码添加到任务队列中,并按任务队列的顺序执行
- 要执行的代码
- 返回值
数值ID,计划执行代码的唯一标识
- 参数
- clearTimeout()
- 数值ID
- setTimeout()
- 间歇调用
- setInterval()
时间间隔可能不准确,后一个间歇调用可能会在前一个间歇调用结束之前启动 - 可以用超时调用模拟间歇调用
在超时调用的任务代码中再调用超时调用
- 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
- 参数
- alert()
- 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值
是否从服务器重新加载,若不设置,且页面没有改变则会从缓存中重新加载
- 传入参数bool值
8.3 navigator对象
提供浏览器的信息,通常用于检测显示网页的浏览器类型
8.3.1 检测插件
- 非IE浏览器
- navigator.plugins
数组中的每一项都包含以下属性- 每一个plugin
- name
- description
- filename
- length
插件所处理的MIME类型数量
- plugins集合
- refresh() 重新获取所有插件,传入true则刷新所有插件页面
- 每一个plugin
- navigator.plugins
- IE浏览器
- ActiveXObject()
- 参数
- 唯一标识符
- 尝试根据唯一标识符创建对象,若插件存在,则可以成功创建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。