JavaScript进行BOM操作
JavaScript通过用于操作BOM和DOM对象，来实现对浏览器、窗口及页面的控制。
1.Bom简介
Bom即浏览器对象模型（BrowserObjectModel）。
观察BOM的体系结构，所有的对象都源自window对象，它表示整个浏览器窗口。
document是window的子对象，window可理解为浏览器窗口，document可理解为文档，就是网页。
没有框架的情况下，一个window里只有一个document；在有框架的情况下，iframe里面也可以装个document，如在iframe里面的document.location和window.location不同的。
2.Bom操作简介
浏览器的对象模型特性，允许访问和操控浏览器窗口。通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。
BOM是JavaScript应用中唯一没有相关标准的部分，这是BOM真正独特且经常出现问题的所在。 BOM主要处理浏览器窗口与框架，事实上，浏览器特有的JavaScript扩展都被认作是BOM的一部分，这些扩展包括：
1.弹出新浏览器窗口的能力；
2.移动、关闭和更改浏览器窗口大小的能力；
3.可提供WEB浏览器详细信息的navigator对象；
4.可提供浏览器载入页面详细信息的location对象；
5.可提供用户屏幕分辨率详细信息的screen对象；
6.支持Cookies；
7.IE对BOM进行扩展的ActiveX对象类，可以通过JavaScript来实现ActiveX对象。
3.window对象操作
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的。
window可以看做浏览器，通过js可以操作Bom对象。
通常说的BOM操作，特指的对window对象，指不与页面内容（即DOM部分）发生直接联系的部分。
格式：
[window.]属性
[window.]方法（参数）
opener.属性
opener.方法（参数）
self.属性
self.方法（参数）
parent.属性
parent.方法（参数）
top.属性
top.方法（参数）
窗口名称.属性
窗口名称.方法（参数）
窗口对象的属性：
|
document |
当前文件的信息 |
|
location |
当前URL的信息 |
|
name |
窗口名称 |
|
status |
状态栏的临时信息 |
|
defaultStatus |
状态栏默认信息 |
|
history |
该窗口最近查阅过的网页 |
|
closed |
判断窗口是否关闭，返回布尔值 |
|
opner |
open方法打开的窗口的源窗口 |
|
outerHeight |
窗口边界的垂直尺寸，px |
|
outerWidth |
窗口边界的水平尺寸，px |
|
pageXOffset |
网页x-position的位置 |
|
pageYOffset |
网页y-position的位置 |
|
innerHeight |
窗口内容区的垂直尺寸，px |
|
innerWidth |
窗口内容区的水平尺寸，px |
|
screenX |
窗口左边界的X坐标 |
|
screenY |
窗口上边界的Y坐标 |
|
self |
当前窗口 |
|
top |
最上方的窗口 |
|
parent |
当前窗口或框架的框架组 |
|
frames |
对应到窗口中的框架 |
|
length |
框架的个数 |
|
locationbar |
浏览器地址栏 |
|
menubar |
浏览器菜单栏 |
|
scrollbars |
浏览器滚动条 |
|
statusbar |
浏览器状态栏 |
|
toolbar |
浏览器工具栏 |
|
offscreenBuffering |
是否更新窗口外的区域 |
窗口对象的方法：
|
alert(信息字串) |
弹出警告信息 |
|
confirm(信息字串) |
显示确认信息对话框 |
|
prompt(提示字串[，默认值]) |
显示提示信息，并提供可输入的字段 |
|
atob(译码字串) |
对base-64编码字串进行译码 |
|
btoa(字串) |
将进行base-64编码 |
|
back() |
回到历史记录的上一网页 |
|
forward() |
加载历史记录中的下一网页 |
|
open(URL，窗口名称[，窗口规格]) |
|
|
focus() |
焦点移到该窗口 |
|
blur() |
窗口转成背景 |
|
stop() |
停止加载网页 |
|
close() |
关闭窗口 |
|
enableExternalCapture() |
允许有框架的窗口获取事件 |
|
disableExternalCapture() |
关闭enableExternalCapture() |
|
captureEvents(事件类型) |
捕捉窗口的特定事件 |
|
routeEvent(事件) |
传送已捕捉的事件 |
|
handleEvent(事件) |
使特定事件的处理生效 |
|
releaseEvents(事件类型) |
释放已获取的事件 |
|
moveBy(水平点数，垂直点数) |
相对定位 |
|
moveTo(x坐标，y坐标) |
绝对定位 |
|
setResizable(true|false) |
是否允许调整窗口大小 |
|
resizeBy(水平点数，垂直点数) |
相对调整窗口大小 |
|
resizeTo(宽度，高度) |
绝对调整窗口大小 |
|
scroll(x坐标，y坐标) |
绝对滚动窗口 |
|
scrollBy(水平点数，垂直点数) |
相对滚动窗口 |
|
scrollTo(x坐标，y坐标) |
绝对滚动窗口 |
|
setInterval(表达式，毫秒) |
|
|
setTimeout(表达式，毫秒) |
|
|
clearInterval(定时器对象) |
|
|
clearTimeout(定时器对象) |
|
|
home() |
进入浏览器设置的主页 |
|
find([字串[,caseSensitivr,backward]]) |
查找窗口中特定的字串 |
|
print() |
|
|
setHotKeys(true|false) |
激活或关闭组合键 |
|
setZOptions() |
设置窗口重叠时的堆栈顺序 |
创建窗口对象的参数：
window.open(url,windowName,windowFeature)
例如：window.open(url,"新窗体","menubar=yes")
windowFeature可能的值：
|
alwaysLowered |
是否将窗口显示的堆栈后推一层 |
|
alwaysRaised |
是否将窗口显示的堆栈上推一层 |
|
dependent |
是否将该窗口与当前窗口产生依存关系 |
|
fullscreen |
是否满屏显示 |
|
directories |
是否显示连接工具栏 |
|
location |
是否显示网址工具栏 |
|
menubar |
是否显示菜单工具栏 |
|
scrollbars |
是否显示滚动条 |
|
status |
是否显示状态栏 |
|
titlebar |
是否显示标题栏 |
|
toolbar |
是否显示标准工具栏 |
|
resizable |
是否可以改变窗口的大小 |
|
screenX |
窗口左边界距离 |
|
screenY |
窗口上边界距离 |
|
top |
窗口上边界 |
|
width |
窗口宽度 |
|
height |
窗口高度 |
|
left |
窗口左边界 |
|
outerHeight |
窗口外边界的高度 |
|
personalbar |
是否显示个人工具栏 |
窗口对象的事件处理程序：
onLoad、onUnload
onResize
onBlur、onFocus
onDragDrop
onError
onMove
3.1窗体的控制
1) 窗体移动和缩放
moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素
2) 窗体滚动轴控制
scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
3) 窗体焦点控制
focus()——使窗体或控件获取焦点
blur()——与focus函数相反，使窗体或控件失去焦点
4) 窗体的创建和关闭
open()——打开(弹出)一个新的窗体
close()——关闭窗体
opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思
window.open方法语法
window.open(url, name, features, replace);
•url -- 要载入窗体的URL
•name -- 新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开
•features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔
•replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，通常不用指定
window.open("HTMLPage2.htm", "", "toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=yes,status=no,top=0,left=0");
可以用 window.open 的方法屏蔽 IE 的所有菜单
第一种方法：
window.open("你的.htm", "","toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=yes,status=no,top=0,left=0")
第二种方法是打开一个全屏的页面：
window.open("你的.html", "", "fullscreen=yes")
5) 窗体的刷新
<input type=button value=刷新 onclick="history.go(0)">
<input type=button value=刷新 onclick="location.reload()">
<input type=button value=刷新 onclick="location=location">
<input type=button value=刷新 onclick="location.assign(location)">
<input type=button value=刷新 onclick="document.execCommand('Refresh')">
<input type=button value=刷新 onclick="window.navigate(location)">
<input type=button value=刷新 onclick="location.replace(location)">
<input type=button value=刷新 onclick="window.open('自身的文件','_self')">
<input type=button value=刷新 onClick=document.all.WebBrowser.ExecWB(22,1)>
3.2窗体间相互调用
1) window.open产生的调用
在子窗口中引用父窗口：window.opener
在子窗口中引用父窗口的函数：window.opener.funcofparent();
注：funcofparent父窗口里的js函数。
2) 框架中产生的调用
在子窗口中引用父窗口：window.parent
在父窗口中引用子窗口（前提是子窗口已Load done）：document.getElementById("子窗口所在的框架ID").contentWindow
3) window.showModalDialog产生的调用
父窗口：window.showModalDialog("子窗口.aspx",window,"dialogWidth=500px;dialogHeight=300px");
子窗口可得到父窗口的引用：var pWin=window.dialogArguments;
注意：FF3开始支持showModalDialog
3.3 window的功能函数
alert();
confirm();
setInterval()
setTimeout()
clearTimeout()
1) confirm
window.onunload = function() {
alert("页面已经关闭");
}
window.onbeforeunload = function() {
alert("页面即将关闭");
}
window.onload = function(){
document.getElementById("btn1").onclick = function(){
var isRight = window.confirm("你确定要跳转吗");
if(isRight){
window.location.href="./2 innerHTML无刷新评论.htm";
}
}
}
2) setInterval和clearInterval
setInterval方法每隔一段时间执行计时器的代码。
启动和停止定时器：
var interId;
window.onload = function (){
interId = setInterval(getValue,1000);
document.getElementById("btn1").onclick = function(){
if(interId!=null){
clearInterval(interId);
}
};
document.getElementById("btn2").onclick = function(){
interId = setInterval(getValue,1000);
};
}
可用来实现走马灯效果：
3) setTimeout和clearTimeout
onhover事件中的div层的显示和消失：
setTimeout方法经过计划时间后后计时器的代码（只执行一次）。
var action;
function groupMouseOver(group) {
var id = 'g' + $(group).attr("alt");
var divdetails = document.getElementById(id);
var newId = "s" + $(group).attr("alt")
var divshow = $(divdetails).clone().appendTo($("#tree")).attr("id", newId).css("position", "fixed").css("right", 5 + "px").css("top", (event.clientY - 10) + "px");
action = setTimeout($(divshow).show(), 1500);//启动定时器
}
function groupMouseOut(group) {
var id = 's' + $(group).attr("alt");
if (action) {
clearTimeout(action);//取消定时器
}
setTimeout($("#" + id).remove(), 200);
}
4) resize保持DIV位于Body底部
$(window).resize(function () {
onResize();
});
function onResize() {
var height = $(document).height();
$("#record").height(height - 48);
}
record 随着window高度的变化而变化，48是预留给底部和顶部的固定空间。
5) 相对window.external自适应大小
$(function () {
resize();
$(window).resize(function () {
resize();
});
});
function resize() {
var width = window.external.Width;
var height = window.external.Height;
$('#centerdiv').css({ "height": height - 120 });
$('#bigdiv').css({ "width": width - 5 });
}
3.4 window对象的事件
window.onLoad
window.onUnload
window.onResize
window.onBlur
window.onFocus
window.onDragDrop
window.onError
window.onMove
1) onblur和onfocus
window.onblur和window.onfocus事件，在FireFox、Opera、Chrome、Safari下就非常正确，但在IE就根本不正常。
IE下，焦点从body和其它元素例如input、textarea切换时，IE竟然触发window.onblur或者window.onfocus事件。
失去焦点是因为切换到别的应用程序或别的web页面。
处理：
window.onblur = function (e) {
e = e || window.event;
if (window.ActiveXObject && /MSIE/.test(navigator.userAgent)) { //IE
var x = e.clientX;
var y = e.clientY;
var w = document.body.clientWidth;
var h = document.body.clientHeight;
if (x >= 0 && x <= w && y >= 0 && y <= h) {
window.focus();
return false;
}
alert("out");
}
}
2) onload与$(function(){})
$(function(){})先于onload
1. 自然是执行的时候不同。jq的是在DOM加载完毕开始执行(页面所有代码). 而window.onload是在页面全部内容,什么代码, 文件, 图片, flash等等乱七八糟的加载完毕, 开始执行..
2. $(function(){})可以写多个，但是window.onload只能写一个，各种函数要可以写在window.onload=function(){//这里..}
3. window.onload = demo()跟window.onload=demo的区别：前者的window.onload是demo()这个函数的结果，后者是引用demo这个函数.
4. $(function(){}).它其实不是它.它是jQuery(document).ready(function(){})的简写；window.onload很单纯，很纯粹，没有简写。
window.onload 事件是窗口完全加载完的时候执行
$(function(){ }) 是等页面上的标签加载完了就执行
比如说页面有个<img />标签，加载页面时，window.onload 要等图片完全显示出来之后才执行(假设其他代码都在图片显示之前加载完了)；
而 $(function(){ }) 等<img />标签加载完就执行了，这时候图片可能还没有显示出来。
3.5 window对象的属性
navigator.userAgent
获取客户端硬件类型，如果是ipad 并且非强制传统版做相应处理
if (navigator.userAgent.indexOf('iPad')>=0 && !window.isForce2pc) {
}
window.location.search
location.search是从当前URL的?号开始的字符串
如:http://www.51js.com/viewthread.php?tid=22720 它的search就是?tid=22720
通过下面这个函数就可以取到连接后面带的参数。
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
使用 unescape() 来解码字符串。ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之.
var QueryString = (function ()
{
var vs = window.location.search.slice(1);
if (vs == '') return {};
var result = {};
var va = vs.split("&");
for (var i = 0; i < va.length; i++)
{
var s = va[i].split("=");
var k = s[0];
var v = s[1];
result[k] = v;
}
return result;
})();