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

本文链接：https://blog.csdn.net/x121850182/article/details/51702304

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

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

一、BOM功能

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

二、window中的事件

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

[html]view plaincopy 
   
print?
 <!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中的方法

[html]view plaincopy 
   
print?
 <!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对象----浏览器信息

[javascript]view plaincopy 
   
print?
 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中的对象" οnclick="windowObjDemo()" />
  </body>
</html>

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

其中的方法：

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

[html]view plaincopy 
   
print?
 <input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />  