简介
BOM是browser object model的缩写,简称浏览器对象模型;
BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;
浏览器对象模型(Browser Object Model)尚无正式标准。
结构
window对象
window对象是浏览器对象中其他大部分对象的共同的祖先,所以一般在JavaScript程序中可以省略window对象
常用window对象的方法
open(URL,windowName,parameterList):open方法创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址
close():close方法关闭一个浏览器窗口
alert()等
setTimeout
Specifiesa delay for calling a function or evaluating an expression.
setInterval
Callsa function or evaluates an expression every time the specified intervalelapses.
clearTimeout
Clearsa timeout that was set with the setTimeout method.
clearInterval
Clearsa delay that was set with the setInterval method.
Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>akali-javascriptBOM</title>
<script>
vara;
varb;
functiontestSetTimeout(){
// a= setTimeout(function(){ //这样直接定义匿名函数最好!可以解决浏览器差异问题!
// alert("3秒后执行!");
// },3000);
// setTimeout(ttt,3000,"3","5"); //如此传参会有浏览器差异问题。建议仍然使用匿名函数调用。如下:
setTimeout(function(){
ttt(3,4);
},3300);
}
functionttt(a,b){
alert(a+b);
}
functiontestSetInterval(){
vari = 1;
b= setInterval(function(){
alert("第"+(i++)+"次执行");
},3000);
}
functiontestClearTimeout(){
clearTimeout(a);
}
functiontestClearInterval(){
clearInterval(b);
}
</script>
</head>
<body>
<inputtype=button value=测试setTimeout οnclick="testSetTimeout();"/>
<inputtype=button value=取消setTimeout οnclick="testClearTimeout();"/>
<inputtype=button value=取消setInterval οnclick="testClearInterval();"/>
<inputtype=button value=测试setInterval οnclick="testSetInterval();"/>
</body>
</html>
History对象
history含有以前访问过的网页的URL地址。
Demo
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>history对象</title>
</head>
<body>
<ahref="javascript:void(0);"οnclick="javascript:history.go(-1);">后退一个</a>
<ahref="javascript:void(0);"οnclick="javascript:history.go(1);">前进一个</a>
</body>
</html>
Navigator对象
使用navigator获取浏览器信息//判断浏览器类型
Demo
function method() {
varc=window.navigator.userAgent.toLowerCase();
if(c.indexOf("msie")>0){
alert("您用的是微软的ie浏览器");
}elseif(c.indexOf("firefox")>0) {
alert("您用的是火狐");
}else{
alert("不知道");
}
}
location对象
location对象是当前网页的URL地址。我们可以使用Location对象来让浏览器打开某页
具体的语法为
window.location=“xxxx”
这里的xxxx可以是一页也可以是一个网站的IP地址。
Demo
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>UntitledDocument</title>
<scriptLanguage="JavaScript">
functiontestLocation() {
// alert(window.location);
alert(location);
}
functiontestLocation1() {
location="http://www.baidu.com";
}
</script>
</head>
<body>
<ahref="javascript:void(0);" οnclick="testLocation()">测试location</a>
<ahref="javascript:void(0);" οnclick="testLocation1()">测试location</a>
</body>
</html>
业务思想
BOM对象的实质对象间的通信,掌握其基本属性和方法,便可以很好地为我们服务。关于BOM对象最为重要的也莫过于其属性和方法,多加练习使用,便可摇摆于其间。