[JavaScript] 8.JS BOM对象

1183人阅读 评论(1) 收藏 举报
分类:

简介

BOM是browser object model的缩写,简称浏览器对象模型;

BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window;

BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性;

浏览器对象模型(Browser Object Model)尚无正式标准。

结构


window对象

window对象是浏览器对象中其他大部分对象的共同的祖先,所以一般在JavaScript程序中可以省略window对象

常用window对象的方法

open(URL,windowName,parameterList):open方法创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址

close():close方法关闭一个浏览器窗口

alert()等

setTimeout

Specifiesa delay for calling a function or evaluating an expression.

setInterval

Callsa function or evaluates an expression every time the specified intervalelapses.

clearTimeout

Clearsa timeout that was set with the setTimeout method.

clearInterval

Clearsa delay that was set with the setInterval method.

Demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
                   <title>akali-javascriptBOM</title>
                   <script>
                            vara;
                            varb;
                            functiontestSetTimeout(){
//                                  a= setTimeout(function(){      //这样直接定义匿名函数最好!可以解决浏览器差异问题!
//                                           alert("3秒后执行!");
//                                  },3000);
                                    
                                    
//                                setTimeout(ttt,3000,"3","5");   //如此传参会有浏览器差异问题。建议仍然使用匿名函数调用。如下:
                                     setTimeout(function(){
                                               ttt(3,4);
                                     },3300);
                            }
                           
                            functionttt(a,b){
                                     alert(a+b);
                            }
                           
                            functiontestSetInterval(){
                                     vari = 1;
                                     b= setInterval(function(){
                                               alert("第"+(i++)+"次执行");
                                     },3000);
                            }
                           
                            functiontestClearTimeout(){
                                     clearTimeout(a);
                            }
                           
                            functiontestClearInterval(){
                                     clearInterval(b);
                            }
                   </script>
         </head>
         <body>
                   <inputtype=button value=测试setTimeout onclick="testSetTimeout();"/>
                   <inputtype=button value=取消setTimeout onclick="testClearTimeout();"/>
                   <inputtype=button value=取消setInterval onclick="testClearInterval();"/>
                   <inputtype=button value=测试setInterval onclick="testSetInterval();"/>
         </body>
</html>

History对象

history含有以前访问过的网页的URL地址。

Demo

<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
                   <title>history对象</title>
         </head>
         <body>
                   <ahref="javascript:void(0);"onclick="javascript:history.go(-1);">后退一个</a>
                   <ahref="javascript:void(0);"onclick="javascript:history.go(1);">前进一个</a>
         </body>
</html>

Navigator对象

使用navigator获取浏览器信息//判断浏览器类型

Demo

function method() {

                                     varc=window.navigator.userAgent.toLowerCase();

                                     if(c.indexOf("msie")>0){

                                               alert("您用的是微软的ie浏览器");

                                     }elseif(c.indexOf("firefox")>0) {

                                               alert("您用的是火狐");

                                     }else{

                                               alert("不知道");

                                     }

                            }

 

location对象

location对象是当前网页的URL地址。我们可以使用Location对象来让浏览器打开某页

具体的语法为

window.location=“xxxx”

这里的xxxx可以是一页也可以是一个网站的IP地址。

Demo

<html>
         <head>
                   <metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
                   <title>UntitledDocument</title>
                   <scriptLanguage="JavaScript">
                            functiontestLocation() {
//                                     alert(window.location);
                                        alert(location);
                            }
                           
                            functiontestLocation1() {
                                     location="http://www.baidu.com";
                            }
                   </script>
         </head>
         <body>
                   <ahref="javascript:void(0);" onclick="testLocation()">测试location</a>
                   <ahref="javascript:void(0);" onclick="testLocation1()">测试location</a>
         </body>
</html>

业务思想

BOM对象的实质对象间的通信,掌握其基本属性和方法,便可以很好地为我们服务。关于BOM对象最为重要的也莫过于其属性和方法,多加练习使用,便可摇摆于其间。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:229616次
    • 积分:7563
    • 等级:
    • 排名:第2827名
    • 原创:144篇
    • 转载:16篇
    • 译文:1篇
    • 评论:1290条
    时间,你好!
    网易博客
    Github:Social Coding
    博客专栏
    CNZZ统计