小白读《JavaScript高级程序设计》BOM部分笔记

BOM

如果要在Web中使用JavaScript，那么BOM（浏览器对象模型）是真正的核心。
BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

window对象

BOM的核心对象是window，它表示浏览器的一个实例。
window对象的双重身份：

它是通过JavaScript访问浏览器窗口的一个接口。
它也是ECMAScript规定的Global对象

全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
定义全局变量与在window对象上直接定义属性的差别：
全局变量不能通过delete操作符删除。

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

var newValue = oldValue;
//这里会抛出错误，因为oldValue未定义
var newValue = window.oldValue;
//这里不会抛出错误，因为这是一次属性查询

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。

三个与框架有关的window对象

1.top对象：始终指向最高（最外）层的框架。

<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>

示例图片1
通过window.frames[0]或者window.frames[“topFrame”]来引用上方的框架。
不过建议将window换成top。

与top相对的另一个window对象是parent（父）。

2.parent对象：始终指向当前框架的直接上层框架。
注意：除非最高层窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值。

3.self对象：它始终指向window。

以上都是window对象的属性，可以用window.parent、window.top、window.self等形式来访问。

窗口位置

IE、Safari、Opera和Chrome：
screenLeft和screenTop属性：分别用于表示窗口相对于屏幕左边和上边的位置。
Firefox、Safari、Opera和Chrome：
screenX和screenY属性。

记住，位置信息是相对页面可见区域左上角。

两个移动方法（可能被浏览器禁用）
moveTo()和moveBy()。
moveTo()：接受新位置的x和y坐标值。
moveBy()：接收的是在水平和垂直方向上移动的像素值。

窗口大小

IE9+、Firefox、Safari、Opera和Chrome提供四个属性：

innerWidth
innerHeight
outerWidth
outerHeight

这四个属性不同浏览器返回结果不一样，要用的时候再确认一下吧。
类似的属性有：

document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth
document.body.clientWidth

一个封装的函数：

function getWidthAndHeight(){
	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;
		}
	}
	return [pageWidth,pageHeight];
}

可以放在一个叫utill.js的文件下，以后可能有用哦。
示例图片2

调整浏览器窗口的大小的两个方法
resizeTo()和resizeBy()方法。

导航和打开窗口

使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
4个参数：

要加载的URL
窗口目标
一个特性字符串
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

1.弹出窗口

fullscreen
heigh
left
location
menubar
resizable
scrollbars
status
toolbar
top
width

opener属性：保存着打开它的原始窗口对象。

关闭窗口

调用close()方法。
newWindow.close();

2.安全限制

一些广告窗口不断弹出，引诱用户点击。

3.弹出窗口屏蔽程序

一般浏览器有内置，若没有，可以安装Yahoo!Toolbar等带有内置屏蔽程序的实用工具。
如果有屏蔽弹出窗口的程序，则open()会变成null，所以需要检验一下：

function textIfWindowOpenIsNull(url) {
	var blocked = false;
	try {
		var wroxWin = window.open(url,"_blank");
		if (wroxWin == null) {
			blocked = true;
		}
	} catch (ex){
		blocked = true;
	}
	if (blocked) {
		alert("The popup was blocked!");
	}
}

间歇调用和超时调用

JavaScript是单线程语言，但它允许通过设置超时值和间歇值来调度代码在特定的时刻执行。
超时调用（只执行一次）：setTimeout()方法，接受两个参数：要执行的代码和以毫秒表示的时间。
第一个参数可以是包含JavaScript代码的字符串或者是一个函数。
取消：clearTimeout()方法，将相应的超时调用的ID作为参数传递给它。

间歇调用（执行多次）：setInterval()，参数和setTimeout()一样。
取消：clearInterval()方法。

系统对话框

alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。
alert()：警告。
confirm()：确认，会返回一个布尔值。
prompt()：提升用户输入一些文本，方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值（可以是一个空字符串）。
返回输入内容，没有或取消则为null。

find()：显示查找的对话框。
print()：显示打印的对话框。

location对象

location是最有用的BOM对象之一。
window.location和document.location引用的是同一个对象。
Loaction对象的属性：

hash
host
hostname
href
pathname
port
portocol
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,
	//在for循环中使用
	i = 0,
	len = items.length;
	//逐个将每一项添加到args对象中
	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;
}

位置操作

使用assign()方法并为其传递一个URL。

通过使用replace()方法，用户不能回到前一个页面。
重新加载：reload()方法。参数为true式强制从服务器重新加载。

navigator对象

appCodeName
appMinorVersion
appName
buildID
cookieEnabled
cpuClasss
javaEnabled()
language
mineTypes
onLine
opsProfile
oscpu
platform
plugins
preference()
product
productSub
registerContentHandler()
registerPeotocolHandler()
securityPolicy
systemLanguage
taintEnabled()
userAgent
userLanguage
userProfile
vendor
vendorSub

检测插件

使用plugins数组来检测浏览器中是否安装了特定的插件。

name：插件的名字
description：插件的描述
filename：插件的文件名
length：插件所处理的MIME类型数量

//检测插件（在IE中无效）
function hasPlugins(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;
}

//检测IE中的插件
function hasIEPlugin(name) {
	try {
		new ActiveXObject(name);
		return true;
	} catch (ex) {
		return false;
	}
}

注册处理程序

registerContentHandler()方法：三个参数：

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

registerPeotocolHandler()方法：三个参数：

要处理的协议（例如，mailto或ftp）
处理该协议的页面的URL
应用程序的名称

screen对象

略

history对象

go()方法，里面参数是数值。
back()方法：后退，参数是数值。
forward()方法：前进，参数是数值。