BOM学习

      一window对象概述


       BOM的核心对象是Window对象,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每

打开的窗口,系统都会自动为其创建window对象。所有浏览器都支持window对象,它表示浏览器窗口。所有

JavaScript全局对象、函数以及变量均自动成为 window对象的成员。全局变量是 window对象的属性。全局函数是

window对象的方法。甚至HTML DOM的document也是window 对象的属性之一。通过下面的两句代码我们可以看出

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的。因此调用它的子对象时可以不显示的指明

window对象:

[javascript]  view plain copy print ?
  1. window.document.getElementById("test");  
       与上述等价的写法是:

[javascript]  view plain copy print ?
  1. document.getElementById("test");  
       二window对象

       (1)window对象的属性和方法

       window对象的属性



       window对象的方法


        (2)系统对话框

       Window对象可以在JavaScript中创建三种消息框:警告框、确认框、提示框。浏览器通过alert()方法,confirm()

方法和prompt()方可以调用系网页统对话框向用户显示信息。系统对话框与浏览器显示的网页没有关系,也不包含

HTML。

       1警告框:警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行

操作。

       语法:alert("文本");

       2提示框:提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点

击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为

 null。

       语法:prompt("文本");

       3确认框:确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才

能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

       语法:confirm("文本");

       综合实例:

[javascript]  view plain copy print ?
  1. var name=prompt("请输入您的名字","");  
  2. if (confirm(name!=null&&name!=""))  
  3. {  
  4.      alert("你好!"+name);  
  5. }  
  6. else  
  7. {  
  8.      alert("您没有输入名字!");  
  9. }  

        3新建窗口

        使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。它可以接受四个参数:

window.open(url,name,feature,replace);

        参数解释:

        url:要加载的URL,设置打开窗口中显示的文档的URL,如果缺省或者为"",那么新窗口就不显示任何文档。

     name:窗口的名称或窗口目标。为新窗口命名。该名称可以作为标签和的target属性值。如果名称为已经存在的

窗口的名称,那么open方法就不再创建新的窗口,而只返回对指定窗口的引用,这种情况,第三个参数将被忽略。

        feature:一个特性字符串,设置新窗口的显示特性,可选参数。

        replace:一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。设置是否在窗口的浏览历史中给加载

新页面的URL创建一个新条目,还是用它替换浏览历史中的当前条目。

       第三个特性字符串的参数:



       实例:

[javascript]  view plain copy print ?
  1. open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200,toolbar=yes","_parent");  

       4窗口页面尺寸

       有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

       a对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

[javascript]  view plain copy print ?
  1. window.innerHeight;//浏览器窗口的内部高度  
  2. window.innerWidth;//浏览器窗口的内部宽度  

       b对于 Internet Explorer 8、7、6、5:

[javascript]  view plain copy print ?
  1. document.documentElement.clientHeight;  
  2. document.documentElement.clientWidth;  

       或者

[javascript]  view plain copy print ?
  1. document.body.clientHeight;  
  2. document.body.clientWidth;  

       实用的JavaScript方案(涵盖所有浏览器)有两个:

       方案一:

[javascript]  view plain copy print ?
  1. var pageWidth=window.innerWidth;   
  2. var pageHeight=window.innerHeight;   
  3. if(typeof pageWidth!="number")  
  4. {   
  5.     if(document.compatMode=="CSS1Compat")//标准模式  
  6.     {  
  7.         pageWidth=document.documentElement.clientWidth;  
  8.         pageHeight=document.documentElement.clientHeigth;  
  9.     }  
  10.     else  
  11.     {  
  12.         pageWidth=document.body.clientWidth;  
  13.         pageHeight=document.body.clientHeigth;  
  14.     }  
  15. }  
  16. document.write("浏览器的内部窗口宽度:" + p ageWidth + ",高度:" + pageHeight + "。");  
        方案二:
[javascript]  view plain copy print ?
  1. var pageWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;  
  2. var pageHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;  
  3. document.write("浏览器的内部窗口宽度:" + pageWidth + ",高度:" + pageHeight + "。");  
       上述两个方案运行的结果为:

       浏览器的内部窗口宽度:1366,高度:607。

       三screen对象

       screen对象包含有关用户屏幕的信息。Screen对象最常用的两个属性是:availWidth(可用的屏幕宽度)和

availHeight(可用的屏幕高度)。

       screen对象属性:


       实例:

[javascript]  view plain copy print ?
  1. document.write("可用宽度:" + screen.availWidth+",");  
  2. document.write("可用高度:" + screen.availHeight);  

       输出:可用宽度:1366,可用高度:728

       四history对象

       history对象是保存上网的记录,从窗口被打开的那一刻算起,包含浏览器的历史。为了保护用户隐私,对

JavaScript访问该对象的方法做出了限制。

       history对象的属性和方法:

       实例:
[html]  view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>BOM</title>  
  6. <script type="text/javascript">  
  7. function goBack()  
  8. {  
  9.    if(history.length!=0)  
  10.    {  
  11.        history.back();//加载历史列表中的前一个 URL  
  12.    }     
  13. }  
  14. document.write("这个网页有"+history.length+"条历史记录!");  
  15. </script>  
  16. </head>  
  17. <body>  
  18. <input type="button" value="转到上一页" onclick="goBack()" />  
  19. </body>  
  20. </html>  
        运行的结果为:


        五location对象

        location对象是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。location

对象用于获得当前页面的地址(URL),并把浏览器重定向到新的页面。 

       location对象的属性:

       location对象的方法:

       实例:获取诸如?name=liu&psw=123这种类型的键值对。

[javascript]  view plain copy print ?
  1. function getArgs()  
  2. {    
  3.     //创建一个存放键值对的数组    
  4.     var args=[];    
  5.     //去除?号    
  6.     var qs=location.search.length>0?location.search.substring (1):"";    
  7.     //按&字符串拆分数组    
  8.     var items=qs.split("&");    
  9.     var item =null,name=null,value=null;    
  10.     //遍历    
  11.     for(var i=0;i<items;i++)  
  12.     {    
  13.         item=items[i].split("=");    
  14.         name=item[0];    
  15.         value=item[1];    
  16.         //把键值对存放到数组中去    
  17.         args[name]=value;    
  18.     }    
  19.     return args;    
  20. }    
  21. var  args=getArgs(); //调用函数    
  22. alert(args["name"]);    
  23. alert(args["psw"]);  
  24.          
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值