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>
通过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的文件下,以后可能有用哦。
调整浏览器窗口的大小的两个方法
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()方法:前进,参数是数值。