JavaScript网页编程之------浏览器对象模型(BOM)-js教程-PHP中文网

JavaScript网页编程之------浏览器对象模型(BOM)

黄舟

发布： 2016-12-30 16:33:59

原创

1344人浏览过

浏览器对象模型（browser object
model : bom）

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

一、BOM功能

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

二、window中的事件

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

立即学习“Java免费学习笔记（深入）”；

<!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对象----浏览器地址栏

<span style="font-weight: normal;">function windowObj4(){  
            //获取属性  
            var pro = window.location.protocol; //window可省略  
            //alert(pro);  
            var text = location.href;  
            alert(text);  
              
            location.href="http://www.baidu.com.cn";//1
	    location.href ="5a.html";//2
	    //上两句1和2处可以对目前所处的地址进行更改，这就是在浏览器中浏览到某些东西时突然会跳到其他页面去的原理，如1会自动跳转到百度
}</span>

登录后复制

5a.html

<html>
  <head>
    <title>aa</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  
  <body>
  	<script type="text/javascript">
  		function windowObjDemo(){
			history.back();
		}  	
  	</script>
    <input type="button" value="演示window中的对象" onclick="windowObjDemo()" />
  </body>
</html>

登录后复制

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

其中的方法：

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

2114

查看详情

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

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

go 从历史列表中装入 URL。

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

登录后复制

以上就是JavaScript网页编程之------浏览器对象模型(BOM)的内容，更多相关内容请关注PHP中文网（www.php.cn）！

大家都在看：

JavaScript_搜索引擎优化与性能提升 JavaScript数组方法_函数式操作与性能基准测试 JavaScript元编程_Proxy与Reflect高级技巧 JavaScript组合模式_树形结构操作如何实现动态按钮悬停涟漪效果：CSS与JavaScript协作教程