浏览器对象模型BOM

  • Post author:
  • Post category:其他


JavaScript程序是与浏览器窗口(BrowserWindow)和在窗口显示的文档(document)相关联的。窗口是浏览器对象,而文档是HTML对象。浏览器对象模型也叫做BOM。其中,窗口是对象树的顶层,它下面的对象包括window(窗口)、navigator(导航器)、franes【】(框架)、document(文档)、history(历史)、location(位置)及screen(显示器)。

1、navigator属性

Navigator对象包含描述浏览器的属性和方法。Navigator对象可以用来做特定平台的检测。例如确定使用的浏览器版本、是否支持java、插件是否启用等。

<scripttype=”text/javascript”>

for(var property in navigator){

str=”navigator”+”.”+property;

document.write(property+”&nbsp;&nbsp;”+str+”<br/>”)

}

</script>

2、检测插件

插件是一类特殊的程序。下载安装后,它可以扩展浏览器的功能。

插件是平台独立的,而且他们的MIME类型可以多种多样。

navigator对象的plugins【】数组存储了已安装插件的完整列表并且所有浏览器插件都有其对应的数值索引。plugins【】数组的每一个元素代表一个plugin对象。当在文档中使用HTML<embed>标签时,就意味着创建了一个plugin对象。

<scripttype=”text/javascript”>

varnum=navigator.plugins.length;

for(var i=0;i<num;i++){

var number=i+1;

document.write(“<fontcolor=yellow>plug-inNo.”+number+”-</font>”+navigator.plugins[i].name+”<br/>[Location:”+navigator.plugins[i].fileName+”]<p>”);

}

alert(“\nYou have “+number+”plugs!”);

</script>

3、window对象的使用

Window对象的方法

alert(text)                                                            创建一个警告对话框,显示一条消息;

blur()                                                                    将焦点从窗口移出

clearInterval(interval)                     清除之前设置的定时器间隔

clearTimeOut(timer)                                     清除之前设置的超时

close()                                                                关闭窗口

confirm()                                                           创建一个需要用户确认的对话框

focus()                                                                将焦点移至窗口

open(text,name,[options])                              打开一个新窗口并返回新window对象

prompt(text,defaultInput)                             创建一个对话框要求用户输入信息

scroll(x,y)                                                           在窗口中滚动到一个像素点的位置

setInterval(expression,milliseconds) 经过指定时间间隔后计算一个表达式

setInterval(function,milliseconds,[arguments])经过指定时间间隔后调用一个函数

(1)打开及关闭窗口

可以通过“文件”菜单中的“新建窗口”命令来打开新浏览器窗口。也可以从JavaScript程序中使用window的open方法打开新窗口。

varwindow_object=window.open(“url”,windowname,attributes(options));

示例:

varwinOBJ=window.open(“http://localhost/windows/winter.jpg”,”winter”,”width=1150,height=350,resizable=yes,scrollbars=yes,location=yes”)

4、创建定时事件

(1)定时器方法

Window对象有两个类似闹钟的方法:setTimeout()、setInterval()。可以设定时间来让程序完成指定任务。setTimeout()是指经过指定时间后计算一个表达式并退出。setInterval()方法会根据设置的时间间隔自动反复执行一个表达式,除非程序结束或取消setInterval,否则将一直重复执行。

这两个方法的语法相同,都带有两个参数一个是带引号的表达式或函数引用,另一个是以毫秒表示的时间。

要取消超时设置或时间间隔设置,可以调用clearTimeout()或clearInterval()方法。调用时要将setTimeout()或setInterval()方法返回值作为参数传递给clearTimeout()或clearInterval()方法。

格式:

var timeout=setTimeout(“expression”,delaytime);

var timeout=setInterval(“expression”,intervaltime);

示例:

var timeout=setTimeout(“timer()”,15000);//15秒后调用函数timer()

var timeout =setTimeout(timer,15000);//使用函数的引用

var timerId =setInterval(“scroller()”,500);//每隔0.5秒调用scroller()函数

var timerId =setInterval(scroller,500);//使用函数的引用

使用clearTimeout()或clearInterval()方法取消定时 事件

clearTimeout(timeout);

clearInterval(timeId);

设置滚动显示效果,形成滚动栏的效果:

<html>

<head>

<metacharset=”utf-8″>

<title>NavigatorObject</title>

<scripttype=”text/javascript”>

vartoday=new Date();

varyear=today.getFullYear();

varfuture=new Date(“December 25, “+year);

vardiff=future.getTime()-today.getTime();

vardays=Math.floor(diff/(1000*60*60*24));

varstr=”Only “+days+” shopping days left until Christmas!”;

functionscroller(){

str=str.substring(1,str.length)+str.substring(0,1);

document.title=str;

window.status=str;

setInterval(scroller,300);

}

</script>

</head>

<body onLoad=”scroller()”>

<b><div align=”center”>

<font color=”yellow”size=”4″>

Watch the title bar and the status bar!!!

<br/>

<imgsrc=”../../../Pictures/01.jpg” height=”550″ >

</font>

</div>

</body>

</html>

(2)scrollTo()方法

此方法可以将一个窗口的内容滚动到指定的x/y坐标像素点位置。这个方法只有一种用途,那就是文档内容无法在当前可见区域完全显示出来的情况下使用。

scrollTo()方法有两个参数:以水平及垂直像素坐标表示窗口的位置。例如,坐标(0,0)将滚动到窗口的左上角,位置(0,350)将从起始的左上角位置向下滚动350个像素点。

格式:

window_object.scrollTo(horizontal_pixel_position,vertical_pixel_position);

示例:

parent.window.scrollTo(0,350);

5、Frame的使用

浏览器就是一个虚拟的窗口,它可以被分成若干个框架(frame)-类似于窗口里的小方块,是主窗口中的独立窗口,每个框架都能显示不同的信息.

定义框架布局的文件叫做父窗口(parent window),它描述的每个框架都是其子框架(child)。



版权声明:本文为mafang9601原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。