JavaScript之 ------ 浏览器对象模型 (BOM)

Posted 饿狼干爹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript之 ------ 浏览器对象模型 (BOM)相关的知识,希望对你有一定的参考价值。

浏览器对象模型 (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">
		//事件注册
		οnlοad=function()
			//alert("onload...");
			window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");
		
		/*
		οnunlοad=function()
			alert("onunload...");
		
		οnbefοreunlοad=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--确认提示窗口" οnclick="f1()" /><br/>
	<input type="button" value="演示window中的方法2--定时器1" οnclick="f2()" /><br/>
	<input type="button" value="演示window中的方法2--定时器2" οnclick="f3()" /><br/>
	<input type="button" value="演示window中的方法3--move" οnclick="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,后退" οnclick="history.back()" />

五、广告(强制)

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

<!DOCTYPE html>
<html>
  <head>
    <title>特价大赌场</title>
  </head>
  
  <body>
    <h1>特价大优惠!!!</h1>
    <h2>走过路过千万不要错过!</h2>
	<h1>快餐免费送。。。。送一盒贴10块...</h1>
	<script type="text/javascript">
		//setTimeout("close()",3000);//经过指定毫秒值后计算一个表达式。
		οnunlοad=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)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript之BOM

JavaScript 之 navigator 对象

JavaScript对象之document对象

用JAVA编写浏览器内核之实现javascript的document对象与内置方法

JavaScript 之 history对象

前端之JavaScript面向对象开发