您的位置：首页 > Web前端 > JavaScript

JavaScript之 ------ 浏览器对象模型（BOM）

2015-10-23 23:31 821 查看

浏览器对象模型（Browser Object
Model : BOM）

主要讲window对象：代表浏览器中一个打开的窗口

一、BOM功能

提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法

二、window中的事件

3个load事件（浏览器的生命周期）：onload, onunload, onbeforeunload（但从字面也能看出意思吧，还有其他的事件，自己可以查看帮助文档）

<!DOCTYPE html>
<html>
<head>
<title>bom_window_event.html</title>
</head>

<body>

<script type="text/javascript">
//事件注册
onload=function(){
//alert("onload...");
window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");
}
/*
onunload=function(){
alert("onunload...");
}
onbeforeunload=function(){
alert("onbeforeunload...");
}
*/
</script>

</body>
</html>

三、window中的方法

<!DOCTYPE html>
<html>
<head>
<title>bom_window_method.html</title>
</head>

<body>

<script type="text/javascript" src="print.js">
</script>

<script type="text/javascript">
//window中的方法
function f1(){
var b = confirm("你确定要执行吗？");
alert("b="+b);
}

var id1,id2;
function f2(){
// id1 = setTimeout("alert('time out...')" , 3000);//经过指定毫秒值后计算一个表达式----定时器
id2 = setInterval("alert('time out...')" , 3000);//每经过指定毫秒值后计算一个表达式----定时器
}

function f3(){
//clearTimeout(id1);
clearInterval(id2);//清除定时器
}

function f4(){
//moveBy(10,10);//浏览器窗口----相对移动，向右下角移动(水平与垂直方向分别移动10像素)
//moveTo(40,40);
//窗口抖动
for(var x=0;x<10;x++){
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
}
}

</script>

<input type="button" value="演示window中的方法1--确认提示窗口" onclick="f1()" /><br/>
<input type="button" value="演示window中的方法2--定时器1" onclick="f2()" /><br/>
<input type="button" value="演示window中的方法2--定时器2" onclick="f3()" /><br/>
<input type="button" value="演示window中的方法3--move" onclick="f4()" /><br/>

</body>
</html>

四、window中的对象

1、window中的navigator对象----浏览器信息

function windowNavigatorShow(){
var name = window.navigator.appName;
//var version = window.navigator.appVersion;
var version = navigator.appVersion;//window对象是默认的，可以省略不写
println("name:"+name+",version:"+version);
}

2、window中的location对象----浏览器地址栏

function windowObj4(){
//获取属性
var pro = window.location.protocol; //window可省略
//alert(pro);
var text = location.href;
alert(text);

location.href="http://www.sina.com.cn";
}

3、window中的history对象----浏览器已浏览的url信息

其中的方法：

back	从历史列表中装入前一个 URL。
forward	从历史列表中装入下一个 URL。
go	从历史列表中装入 URL。

<input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />

五、广告（强制）

弹出一条广告，且在没有拦截保护时，无法关闭（关闭即立马重新弹出）

<!DOCTYPE html>
<html>
<head>
<title>特价大赌场</title>
</head>

<body>
<h1>特价大优惠！！！</h1>
<h2>走过路过千万不要错过！</h2>
<h1>快餐免费送。。。。送一盒贴10块...</h1>
<script type="text/javascript">
//setTimeout("close()",3000);//经过指定毫秒值后计算一个表达式。
onunload=function(){//在对象卸载前立即触发。
window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");
}
setInterval("focus()",1000);//每经过指定毫秒值后计算一个表达式。
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JavaScript之 ------ 浏览器对象模型 （BOM）