javascript入门五

本文深入解析Web开发中Window、Frames、Navigator、Screen、History、Location、Document等顶级对象与属性,详细阐述了它们在浏览器生命周期中的作用、相互关系以及在实际Web开发中的应用。重点介绍了如何通过JavaScript脚本来操作这些对象以实现动态网页功能,包括窗口管理、事件处理、URL导航、页面重载、框架集操作等关键技术。文章旨在为Web开发者提供一套全面的工具包,助力构建高效、互动性强的Web应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Window 及相关顶级对象

在 DOM 架构中,Window、Frames、Navigator 等顶级对象产生于浏览器载入文档至关闭文档期间的不同阶段,并起着互不相同且不可代替的作用,如Window 对象在启动浏览器载入文档的同时生成,与当前浏览器窗口相关,包含窗口的最小最大化、尺寸大小等属性,同时具有关闭窗口、创建新窗口等方法;而Location 对象以URL 的形式载入当前窗口,并保存正在浏览的文档的位置及其构成信息,如协议、主机名、端口、路径、URL 的查询字符串部分等,顶级模型的结构

Window 对象在层次中的最上层,而Document 对象处于顶级对象的最底层。一般说来,Frames 对象在Window 对象的下层,但当目前文档包含框架集时,该框架集中的每个框架都包含单独的Window 对象;每个Window 对象都直接包含一个(或者间接包含多个)Document 对象

Window 对象

Window 对象为浏览器窗口对象,为文档提供一个显示的容器。当浏览器载入目标文档时,打开浏览器窗口的同时,创建Window 对象的实例,Web 应用程序开发者可通过JavaScript 脚本引用该实例,从而进行诸如获取窗口信息、设置浏览器窗口状态或者新建浏览器窗口等操作

Window 对象是顶级对象模型中的最高级对象,对当前浏览器的属性和方法,以及当前文档中的任何元素的操作都默认以Window 对象为起始点,并按照对象的继承顺序进行访问和相关操作,所以在访问这些目标时,可将引用Window 对象的代码省略掉,如在需要给客户以警告信息的场合调用Window 对象的alert()方法产生警告框,直接使用alert(targetStr)语句,而不需要使用window.alert(targetStr)的方法。但在框架集或者父子窗口通信时,须明确指明要发送消息的窗口名称。

交互式对话框

警告框、确认框和提示框等,这三种对话框使用Window 对象的不同方法产生,功能和应用场合也不大相同。

1.警告框

警告框使用 Window 对象的alert()方法产生,用于将浏览器或文档的警告信息(也可能不是恶意的警告)传递给客户。该方法产生一个带有短字符串消息和“确定”按钮的模式对话框,且单击“确定”按钮后对话框不返回任何结果给父窗口。此方法的语法如下:

window.alert(Str);
alert(Str);

2.确认框

确认框使用 Window 对象的conform()方法产生,用于将浏览器或文档的信息(如表单提交前的确认等)传递给客户。该方法产生一个带有短字符串消息和“确定”、“取消”按钮的模式对话框,提示客户选择单击其中一个按钮表示同意该字符串消息与否,“确定”按钮表示同意,“取消”按钮表示不同意,并将客户的单击结果返回。

answer=window.confirm(Str);
answer=confirm(Str);

其中参数可以是已定义变量、文本字符串或者是表达式等。当参数传入时,将参数的类型强制转换为字符串作为需要确认的问题输出。该方法返回一个布尔值表示消息确认的结果,true 表示客户同意了该消息,而false 表示客户不同意该消息或确认框被客户直接关闭。

3.提示框

提示框使用 Window 对象的prompt()方法产生,用于收集客户关于特定问题而反馈的信息,该方法产生一个带有短字符串消息的问题和“确定”、“取消”按钮的模式对话框,提示客户输入上述问题的答案并选择单击其中一个按钮表示确定还是取消该提示框。如果客户单击了“确定”按钮则将该答案返回,若单击了“取消”按钮或者直接关闭则返回null 值。此方法的语法如下:

returnStr=window.prompt(targetQuestion,defaultString);
returnStr=prompt(targetquestion,default string);

该方法通过参数targetQuestion 传入一个字符串,代表需要客户回答的问题。通过参数defaultString 传入一个默认的字符串,该参数一般可设定为空。当客户填入问题的答案并单击“确定”按钮后,该答案作为prompt()方法的返回值赋值给returnStr;当客户单击“取消”按钮时,prompt()方法返回null。

设定时间间隔

Window 对象提供setInterval()方法用于设定时间间隔,用于按照某个指定的时间间隔去周期触发某个事件,典型的应用如动态状态栏、动态显示当前时间等,该方法的语法如下:

TimerID=window.setTimeout(targetProcess,itime);
TimerID=setTimeout(targetProcess,itime);

其中参数targetProcess 指目标事件,参数itime 指间隔的时间,以毫秒(ms)为单位。设定时间间隔的操作完成后,返回该时间间隔的引用变量TimerID。同时,Windows 对象提供clearInterval()方法用于清除该间隔定时器使目标事件的周期触发失效,该方法语法如下:

window.clearInterval(TimerID);

该方法接受唯一的参数TimerID,指明要清除的间隔时间引用变量名

事件超时控制

Window 对象提供setTimeout()方法用于设置某事件的超时,即在设定的时间到来时触发某指定的事件,该方法的实际应用有警告框的显示时间和状态栏的跑马灯效果、打字效果等。其语法如下:

var timer=window.setTimeout(targetProcess,itime);
var timer=setTimeout(targetProcess,itime);

参数targetProcess 表示设定超时的目标事件,参数itime 表示设定的超时时间,以毫秒(ms)为单位,返回值timer 为该事件超时的引用变量名。同时,Window 对象提供clearTimeout()方法来清除通过参数传入的事件超时操作。该语法如下:

clearTimeout(timer);

该方法接受唯一的参数timer 指定要清除的事件超时引用变量名,方法执行后将该事件超时设置为失效。

创建和管理新窗口

Window 对象提供完整的方法用于创建新窗口并在父窗口与字窗口之间进行通信。一般来说,主要使用其open()方法创建新浏览器窗口,新窗口可以包含已存在的HTML 文档或者完全由该方法创建的新文档,其语法如下:

var newWindow=window.open(targetURL,pageName, options,repalce);
var newWindow=open(targetURL,pageName, options,repalce);

其中参数:

targetURL:指定要打开的目标文档地址;
pageName:设定该页面的引用名称;
options:指定该窗口的属性,如页面大小、有否工具条等。

其中 options 包含一组用逗号隔开的可选属性对,用以指明该窗口所具备的各种属性

窗口建立后,可通过新窗口的 document 对象的write()方法往该窗口写入内容,可以是纯粹的字符串,也可是HTML 格式的字符串,后者将被浏览器解释之后再显示。操作完成后,可通过Window 对象的close()方法来关闭该窗口,close()方法的语法如下:

windowName.close();

使用close()方法关闭某窗口之前,一定要核实该窗口是否已经定义、是否已经定义,如果目标窗口未定义或已经被关闭,则close()方法返回错误信息。

常见属性和方法汇总

Navigator 对象

由于浏览器及其版本对 JavaScript 脚本的支持情况不同,出于脚本代码兼容性考虑,经常需要获取客户端浏览器相关信息,以根据其浏览器具体情况编制不同的脚本代码。

常见方法和属性汇总


Navigator 对象的属性和方法在实际调用过程中,除了理解其基本含义外,还需了解以下几项内容:

appName 属性返回浏览器应用程序的官方名称,IE 浏览器的官方名称为“MicrosoftInternet Explorer”,NN 浏览器的官方名称为“Netscape”,而有些浏览器则通过Navigator 对象的扩展方法来检测其官方名称,如Opera 浏览器的isOpera()、Safari浏览器的isSafari()等。

appVersion 属性返回当前浏览器的版本号,一般情况下可通过parseInt() 和parseFloat()方法提取其中的数值再进行相关比较,但此数值更多的是表现浏览器版本的继承特性而不是真正的版本号,如IE6 的appVersion 属性在提取数值后,返回4 而不是6。

platform 属性返回操作系统的类型。Win32 代表Window XP、Win98 代表Windows98、WinNT 代表Windows NT、Win16 代表Window3.x、Mac68k 代表Mac(680x0CPU)、MscPPC 代表Mac(PowerPC CPU)、SunOS 代表Saloris 等。

plugins 属性在IE4+上获得支持,但返回一个空数组,表示不包含任何IE 中不存在的对象。

Navigator 对象从本质上说是在顶级对象模型中与浏览器类型及其版本紧密相关的顶级对象,其属性和方法随着浏览器类型、版本及系统设置的完成而确定下来,多为只读的属性和方法。

Screen 对象

Screen 对象的属性可用screen.property 的方式调用,在IE4+中还可以使用如下的语法:

[window.]navigator.screen.property

Screen 对象基本的属性包括height、width 和colorDepth 等,但各浏览器厂商都对其进行了一定的扩展,如NN4 扩展了availLeft 和availTop、pixelDepth 等属性,用于返回屏幕可用区域的初始像素位置坐标(像素);IE4 扩展了bufferDepth 属性,用于打开offscreen 缓冲并控制缓冲的颜色深度等。除此之外,NN4 和IE4 共同扩展了availHeight 和availWidth 等属性,前两个表示客户端屏幕的可用尺寸(像素),而后者返回客户端的“显示”控制面板中设置的颜色位数。

获取客户端屏幕信息

在Web 应用程序中,为某种特殊目的如固定文档窗口相对于屏幕尺寸的比例、根据显示器的颜色位数选择需要加载的目标图片等都需要首先获得屏幕的相关信息。Screen 对象提供了height 和width 属性用于获取客户屏幕的高度和宽度信息,如分辨率为1024*768 的显示器,调用这两个属性后分别返回1024 和768。但并不是所有的屏幕区域都可以用来显示文档窗口,如任务栏等都占有一定的区域。为此,Screen 对象提供了availHeight 和availWidth属性来返回客户端屏幕的可用显示区域。一般来说,Windows 操作系统的任务栏默认在屏幕的底部,也可以被拖动到屏幕的两侧或者顶部。假定屏幕的分辨率为1024*768,当任务栏在屏幕的底部或者顶部时,其占据的屏幕区域大小为1024*30(像素);当任务栏被拖动到屏幕两侧时,其占据的屏幕区域大小为60*768。

定位窗口到指定位置

通过Screen 对象的属性获得屏幕的相关信息后,结合Window 对象有关窗口移动、更改尺寸的属性,可准确定位目标窗口。实际应用中如跟随鼠标移动的窗口、拥有固定位置的窗口等

  bufferDepth                    返回标记offscreen缓冲是否打开和缓冲的颜色深度,默认值为0                        IE4+

History 对象

History 对象处于Window 对象的下一个层次,主要用于跟踪浏览器最近访问的历史URL 地址列表

使用back()和forward()方法进行站点导航

History 对象提供back()、forward()和go()方法来实现站点页面的导航。back()和forward()方法实现的功能分别与浏览器工具栏中“后退”和“前进”导航按钮相同,而go()方法则可接受合法参数,并将浏览器定位到由参数指定的历史页面。这三种方法触发脚本检测浏览器的历史URL 地址记录,然后将浏览器定位到目标页面,整个过程与文档无关

使用go()方法进行站点导航

History 对象提供另外一种站点导航的方法即history.go(index|URLString),该方法可接受两种形式的参数:

参数 index 传入导航目标页面与当前页面之间的相对位置,正整数值表示向前,负整数值表示向后。
参数 URLString 表示历史URL 列表中目标页面的URL,要使history.go(URLString)方法有效,则URLString 必须存在于历史URL 列表中。

常见属性和方法汇总

length                   保存历史URL地址列表的长度信息
current                  在具有签名脚本的网页中指向历史URL列表的当前项
next                        在具有签名脚本的网页中指向历史URL列表当前项的前一项
previous                在具有签名脚本的网页中指向历史URL列表当前项的下一项
back()                     浏览器载入历史URL地址列表的当前URL的前一个URL
forward()                浏览器载入历史URL地址列表的当前URL的下一个URL
go(num|str)           浏览器载入历史URL列表中由参数num指定相对位置的URL地址对应的页面、或由参数str指定其URL地址对应的页面。

Location 对象

统一资源定位器(URL)

URL(Uniform Resource Locator:统一资源定位器,以下简称URL)是Internet 上用来描述信息资源的字符串,主要用在各种WWW 客户程序和服务器程序上。采用URL 可以用一种统一的格式来描述各种信息资源,包括文件、服务器地址和目录等。

URL 常见格式如下:

protocol://hostname[:port]/[path][?search][#hash]

参数的意义如下:
protocol:指访问Internet 资源和服务的网络协议。常见的协议有Http、Ftp、File、Telnet、Gopher 等;
hostname:指要访问的资源和服务所在的主机对应的域名,由DNS 负责解析。例如www.baidu.com、www.lenovo.com 等;
port:指网络协议所使用的TCP 端口号,此参数可选,并且在服务器端可自由设置。如Http 协议常使用80 端口等;
path:指要访问的资源和服务相对于主机的路径,此参数可选。假设目标页面“query.cgi”相对于主机hostname 的位置为/MyWeb/htdocs/,访问该页面的网络协议为Http,则通过http://hostname/MyWeb/htdocs/query.cgi 访问;
search:指URL 中传递的查询字符串,该字符串通过环境变量QUERY_STRING传递给CGI 程序,并使用问号(?)与CGI 程序相连,若有多项查询目标,则使用加号(+)连接,此参数可选。例如要在“query.cgi”中查询name、number 和code信息,可通过语句http://hostname/MyWeb/htdocs/query.cgi?name+number+code 实现;
hash:表示指定的文件偏移量,包括散列号(#)和该文件偏移量相关的位置点名称,此参数可选。例如要创建与位置点“MyPart”相关联的文件部分的链接,可在链接的URL 后添加“#MyPart”。

URL 是Location 对象与目标文档之间联系的纽带。Location 对象提供的方法可通过传入的URL 将文档装入浏览器,并通过其属性保存URL 的各项信息,如网络协议、主机名、端口号等。

Location 对象属性与URL 的对应

浏览器载入目标页面后,Location 对象的诸多属性保存了该页面URL 的所有信息,其属性、方法

文档载入后,将产生几个Location 对象,具体来说:

window.location:显示运行包含此脚本的文档的框架URL;
parent.location:表示框架集的父窗口的URL 信息;
parent.frames[0].location:表示框架集中第一个可见框架的URL 信息;
parent.frames[1].location:表示框架集中第二个可见框架的URL 信息;
parent.otherFrameName.location:同一框架集中另一个框架的URL 信息。

可见,对于框架集中某一个可见框架而言,访问其 URL 信息,需先将引用指向其父窗口,然后通过层次关系来调用。

使用reload()方法重载页面

Location 对象的reload()方法容易与浏览器工具栏中的Reload/Refresh(重载/刷新)按钮发生混淆,但前者比后者可实现的重载方式要灵活得多。总体来讲,reload()方法可实现的重载方式主要有三种:

强制从服务器重载:每次刷新页面时,浏览器都默认请求Web 服务器返回当前URL对应的页面给客户端,此法使用true 作为参数;
启动会话时从服务器重载:如果Web 服务器上的文档较之缓冲区内存放的文档新,或者缓冲区内根本没有这个文档,则从Web 服务器重载当前URL 对应的页面;
强制从缓冲区重载:每次刷新页面时,浏览器都默认请求浏览器从缓冲区载入当前URL 对应的页面。如果缓冲区没有此页面,则从Web 服务器重载。

前面已经讲述过,使用History 对象的go(0)方法也可实现页面的重载。从本质上讲,主要体现了两种不同性质的重载。history.go(0)方法重载页面时,在缓冲区取得文档,并保持页面中许多对象的状态,仅改变其全局变量值及一些可设置但不可见的属性(如hidden 输入对象的值等),该方法与浏览器工具栏内的Reload/Refresh(重载/刷新)按钮功能相同。

location.reload(URL)方法重载页面时,不管是从Web 服务器还是从缓冲区重载,目标页面内的所有对象都自动更新。

Frame 对象

框架集文档中对象的结构

框架在 Web 应用程序设计中存在着很大的争议,某些场合使用框架能简化设计步骤,如多页面导航实例中,可在一个固定的框架内添加导航控件如图片、按钮等,而在另外的框架中显示导航的结果,这样客户端随时都可通过该导航控件控制其它框架的显示内容而不需刷新整个文档。

浏览器载入含有框架的文档时自动创建 Frame 对象,并允许脚本通过调用Frame 对象的属性和方法来控制页面中的框架。

框架集文档中对象的结构

对于单个、无框架的文档,对象模型以Window 对象开始,并将其作为对象模型层次的起始点和默认的对象而存在,实际使用过程中可忽略对该对象的引用。

对于含有多个框架的框架集文档,该框架集文档作为父窗口,且此时浏览器的标题栏显示的是框架集文档的标题。

在对象模型中构造一个对象的引用,首先要获得目标对象的位置信息,然后应了解用何种方法来实现该引用。在框架集文档中对框架的引用路径主要有三种:

子到父
父到子
子对子

在子到父的引用路径中,可使用parent 关键字实现;父到子的引用可直接使用对象模型层次;而子到子的访问则需要通过top 关键字引用其共有的父对象,然后通过该父对象实现对另一框架的访问。综合如下:

this.parent;
parent.frameName;
top.otherFrameName.document;

Frame 对象的属性和方法受<frame>标记的控制,可在此标记内设定该框架的相关信息,如框架是否有滚动条、边框的颜色等。一般而言,在<frame>标记内应设置其ID 属性(或name 属性)以实现对象的有效引用。在上述最简单的框架集文档中,可通过如下方法实现对框架Frame02 的frameBorder 属性的访问(假设操作焦点在Frame01 框架中):

parent.document.all.Frame02.frameBorder;
parent.document.getElementById("Frame02").frameBorder;

在嵌套的框架集文档中,可根据对象模型层次从顶层的Window 对象开始引用并到达最终的Frame 对象,然后通过其属性和方法来操作该框架中载入的文档。

注意:如果框架集中某个框架载入了另外的框架集文档,则该框架的 top 属性属于另一个框架集文档中定义的框架集。如果总是把top 设定为父对象,则该引用将不可实现。实际应用中可通过判断顶级文档是否为其top 或parent 属性载入,并根据结果实施页面重定位的方法来禁止框架中载入新的框架集文档,进而解决对象引用失效的问题。

控制指定的框架

Frame 对象提供诸多的属性和方法用于控制制定的框架,如更改框架是否能改变大小的标志、是否显示框架的滚动条等。

不同的浏览器通常都会在文档内容和框架之间添加空白区域以便文档载入时其内容能自动插入到框架中。Frame 对象提供属性marginHeight(上边界和下边界)、marginWidth(左边界和右边界)来表示该空白区域的大小。

值得注意的是,Frame 对象的属性如frameBorder、marginHeight 等都可读可写,但框架集加载后,改变这些属性的取值能够改变其具体内容,并不能改变框架中文档的外观,而需通过document 对象调用其对应的属性和方法来修改。

常见属性和方法汇总

Frame 对象提供的属性和方法较少,主要用于设置框架的标记(如name、src 等属性)、改变框架的外观(如borderColor、scrolling 等属性)等

Frameset 对象

Frameset 对象主要用于处理框架与框架之间的关系,如框架之间边框的厚度(像素)、颜色及框架集的大小等。浏览器载入包含框架集的文档时,生成Frameset 对象

在框架集文档中,如果某属性未被指定,则该属性为空,浏览器一般以该属性的默认值来定义框架集,如框架集文档定义中frameSpacing 属性未被指定时,该框架集中框架之间的间距为默认值2 像素。

Frameset 对象的属性均为可读可写,但在框架集载入后,某些属性的更改并不反映到页面布局上来,如frameBorder、border 属性等,其更多的是作为可读的属性而存在。

框架集文档中的 Frameset 对象在框架管理方面提供快捷的途径来操作指定的项目并能实时更新目标页面。当框架集文档中所含的框架比较多或结构嵌套比较复杂的情况下,一般设定框架的name 属性(或id 属性),然后通过父窗口document对象的getElementById(FrameID)方法准确定位,并进行相关操作。

iframe 元素对象

iframe 元素对象本质上是通过<iframe>和</iframe>标记对嵌入目标文档到父文档时所产生的对象,表示浮动在父窗口中的目标文档。

iframe 元素对象的访问方法与Frameset 对象类似,在父文档中访问iframe 元素对象的属性可通过如下方式:

(IE4+) document.all.iframeID.property
(IE4+/NN6+) window.frames[iframeID].property
(IE5+/W3C) document.getElementById(iframeID).property

在包含iframe 元素对象的文档内,可通过如下方式访问该iframe 元素对象:

(IE4+) parent.document.all.iramesetID.property
(IE5+/W3C) parent.document.getElementById(FramesetID).property

iframe元素对象的align属性的可能属性值


值得注意的是,除 contentDocument 和contentWindow 属性为只读外,iframe 对象的其余属性均为可读可写,但并非所有的属性被改变后都能实时更新目标iframe 框架,如控制滚动条显示与否的scrolling 属性、控制框架与其外部的文档之间空白尺寸的hspace 和vspace属性等,其更多的是作为一种只读属性而存在。

Document 对象

JavaScript 主要作为一门客户端脚本而存在,在与客户交互的过程中Document 对象扮演着及其重要的角色。深入理解Document 对象对编写跨浏览器的Web 应用程序是JavaScript脚本程序员进阶的关键。

Document 对象在顶级对象模型中处于较低的层次,通俗地说,浏览器载入文档后,首先产生顶级对象模型中的Window、Frame 等对象,且当该文档包含框架集时,一个Window对象下面可包含多个Document 对象。

Document 对象

Document对象在顶级对象模型中占据非常重要的地位,它可以更新正在装入和已经装入的文档,并使用JavaScript 脚本访问其属性和方法来操作已加载文档中包含的HTML元素,如表单form、单选框radio、下拉框checkbox 等,并将这些元素当作具有完整属性和方法的元素对象来引用。

对象模型参考

客户端浏览器载入目标 HTML 文档后,在创建顶级对象模型中其它顶级对象的同时,创建Document 对象的实例,并将该实例指向当前的文档。当文档包含多个框架组成的框架集或者在该文档中由<iframe>和</iframe>标记对引入其它外部文档时,当前浏览器窗口就同时包含了多个Document 对象。Web 程序开发人员根据对象之间的相对位置关系使用JavaScript 脚本进行相关操作如对象定位、访问等。

Document 对象在文档结构模型中处于顶级层次,但较之如Window 等其它顶级对象而言,该对象与客户端浏览器的关联程度比较小,而与所载入文档本身的关联程度较为紧密。 从Document 对象的角度出发,显示了它在文档对象模型的参考层次中所处的相对位置

灰色表示的是DOM 中的顶级对象,而Document 对象所在层次之下的对象为目标文档包含的HTML 元素对象。可见在文档中定位了Document 对象之后,就可根据对象的层次关系操作其层次之下任意的元素对象。

注意:上面描述的对象模型中 frames 分别作为顶级对象和Document 对象包含的元素对象而存在,因为当某文档包含框架集时,frames 对象作为该文档对应的Document 对象的元素对象而存在。当框架集中某个框架载入另一个文档时,该文档对应的Document 对象又作为frames 对象下一层次的对象而存在。

Document 对象

Document 对象包括当前浏览器窗口或框架内区域中的所有内容,包含文本域、按钮、单选框、复选框、下拉框、图片、链接等HTML 页面可访问元素,但不包含浏览器的菜单栏、工具栏和状态栏。

Document 对象提供多种方式获得HTML 元素对象的引用,如在某目标文档中含有多个通过<form>和</form>标记对引入的表单,则可通过如下方式获得对该文档中forms 对象数组长度信息的引用:

document.forms.length
document.getElementsByTagName("form").length

获取了对象数组信息后,就可以根据目标文档中该类型对象的相对位置定位某对象,如循环检索forms 数组各表单的name 属性的代码:

var MyForms=document.forms;
for(i=0;i<MyForms.length;i++)
{
msg+="forms[" +i+ "].name : " +MyForms[i].name+ "\n";
}

代码运行后,将根据forms 对象数组的长度信息遍历该数组并输出各表单name 属性值。

获取目标文档信息

Document 对象一般的处理步骤如下:

获取文档的指定对象类型的目标数组,如 images、forms 数组等;
使用目标数组的长度为参数遍历数组,根据提供的属性值检索出目标在对象数组中的位置信息;
使用目标对象的位置信息访问该对象的属性和方法。

设置文档颜色值

Document 对象提供了几个属性如fgColor、bgColor 等来设置Web 页面的显示颜色,它们一般定义在<body>标记中,在文档布局确定之前完成设置。例如:

<body bgColor="white" fgColor="green" linkColor="red" alinkColor="blue" vlinkColor="purple">

其中bgColor 属性可通过JavaScript 脚本动态改变。Document 对象提供有关颜色的属性分别代表如下:

bgColor 表示文档的背景色;
fgColor 表示文档中文本的颜色;
linkColor 表示文档中未访问链接的颜色;
alinkColor 表示文档中链接被单击时出现的颜色;
vlinkColor 表示文档中已访问链接的颜色;

HTML4 中,颜色有如下两种表示方式:

颜色字符串常量表示法:使用特定的字符串表示某种颜色,如字符串“blue”表示蓝色、“red”表示红色等。在W3C 制定的HTML 4.0 标准中,存在16 个颜色字符串常量
RGB 原色表示法:RGB 是Red、Green、Blue 三个词语的缩写,一个 RGB 颜色值由三个两位十六进制数字组成,分别代表各原色的强度。该强度为从0 到255之间的整数值,如果换算成十六进制值表示,则范围从#00 到#FF。例如RGB(255,255,255)表示白色,且用#FFFFFF 表示;RGB(0,0,0)表示黑色,且用#000000表示。

在遵循 HTML4 规范的同时,各大浏览器厂商都扩展了在HTML4 中预定义的颜色字符串常量,但 RGB 原色表示法可以在所有浏览器中得到正确的显示。在编写需跨浏览器环境工作的HTML 文档时,要尽量使用RGB 原色表示法以避免出现兼容性问题。

往文档写入新内容

Document 对象提供open()用于打开新文档以准备执行写入操作,并提供write()方法和writeIn()方法用于写入新内容。这些动作完成后,可以使用close()方法来关闭该文档。

open()方法的语法如下:

open([mimeType][,replace])

其中参数mimeType 指定发送到窗口的MIME 类型,如text/html、image/jpeg 等。MIME类型是在Internet 上描述和传输多媒体数据的规范。在浏览器参数设置的辅助应用程序列表中已简单描述MIME 类型,它是用斜杠分隔的一对数据类型。将某个MIME 类型以参数传入open()方法即是通知浏览器准备接收该类型的数据,接收完成后,浏览器调用其相关功能将该数据显示出来。

各浏览器支持的 MIME 类型会有所区别,一般来说,常见的MIME 类型有超文本标记语言文本text/html、普通文本text/plain、RTF 文本application/rtf、GIF 图形image/gif、JPEG图形image/jpeg、au 声音文件audio/basic、MIDI 音乐文件audio/midi 或audio/x-midi、RealAudio音乐文件audio/x-pn-realaudio、MPEG 文件video/mpeg、AVI 文件video/x-msvideo 等。open()方法默认(缺省)的MIME 类型参数为text/html,在文档载入浏览器前,使用脚本组合典型的数据类型,包括HTML 页面上的任何图片。如果当前浏览器不支持以参数传入的特定MIME 类型,则浏览器搜索支持该MIME 类型的插入件。如果目标插入件存在,则浏览器装入该插入件,并在文档载入时将要写入的内容传入该插入件。open()方法接收的第二个可选参数replace 表示待写入的目标文档是否替换浏览器历史列表中当前文档。

注意:在IE3 中open()方法不接收任何参数,IE4 中仅接收MIME 类型为text/html 的参数,IE5+和NN4+支持第二个可选参数;若使用open()方法打开文档成功,则该方法返回非null 值,若由于某种原因打开文档失败,则返回null 值。

使用 open()方法打开文档后,可调用write()和writeIn()方法往其中写入新内容并在浏览器窗口中显示出来。write()和writeIn()方法本质上并无大的不同,唯一的区别在于后者在发送给文档的内容末尾添加换行符,下面两种表达方式等价:

document.write(targetStr+"<br>");
document.writeIn(targetStr);

实际上,一旦文档载入窗口或框架完成后,使用write()和writeIn()方法可在不重载或不重写整个页面的情况下改变文本节点和文本域textarea 对象的内容。一般情况下,脚本在当前文档收集用户输入(或动作)和浏览器环境信息,然后通过一定的算法产生表示另一个窗口(或框架)布局和内容的字符串变量,并使用write()和writeIn()方法将目标字符串变量写入新窗口或者多框架窗口中的某个框架中。该种方式允许使用任意多个document.write()和document.writeIn()方法写入任意多个字符串变量,同时可通过一个组合字符串调用这两种方法来写入。实际中采用何种方法写入目标字符串取决于浏览器环境和脚本样式。

在组合字符串过程中,可通过加号“+”或逗号“,”将字符串连接起来,例如下列两种方式均合法:

document.write(targetStr+"<br>");
document.write(targetStr,"<br>");

考察如下将相关字符串写入框架集中指定框架的实例,演示了“学生注册程序”中如何收集学生相关信息并在目标框架显示。

常见属性和方法汇总

Document 对象提供的属性和方法主要用于设置浏览器当前载入文档的相关信息、管理页面中已存在的标记元素对象、往目标文档添加新文本内容、产生并操作新的元素对象等方面。在包含框架集的文档中,要注意Document 对象引用的层次关系,并通过该层次关系准确定位目标对象并调用Document 对象的属性和方法进行相关操作。

body 元素对象

Document 对象在HTML 文档中并没有使用任何显式标记来描述,但JavaScript 脚本将其作为文档设置的入口,这些设置的内容又作为body 元素的内在属性在HTML 中描述。根据DOM 中的节点模型概念,可将body 元素对象作为<body>标记的引用。首先考虑如下简单的HTML 代码:

<body bgColor="red" fgColor ="blue">
<p>Contents</p>
<table>
...
</table>
<form name="MyForm">
...
</form></body>

如上述的文档背景颜色bgColor、文本颜色fgColor 等均可以作为body 元素对象的属性来调用;同时,body 标记元素对象也可以作为其他标记元素对象如<table>、<form>等的HTML 容器而存在。

body 元素对象具有Document 对象的大部分功能,但不具有title、URL 等属性,主要包含与文档页面相关的属性和方法,如设置文档背景图片的background 属性、控制页面滚动条的scroll 属性等。

获取body 元素对象信息

Document 对象提供了表示文档背景、文本、链接等颜色的属性,body 对象也提供了这几个属性的别名来访问文档中的各项与颜色相关的内容,如body 元素对象的aLink 属性、link 属性和vLink 属性分别对应于Document 对象的alinkColor 属性、linkColor属性和vlinkColor 属性,而text 属性则对应于Document 对象的fgColor 属性。

body 元素对象中与颜色相关的属性如bgColor、text 等与body 元素的HTML 属性等同,而不是与旧属性名相联系。

通过 body 元素对象的background 属性设置文档页面背景图片后,浏览器使用目标图片覆盖背景颜色,可以通过如下脚本动态去除该背景图片并显示背景色:

document.body.background= "";

常见属性和方法汇总


在提供上述属性和方法基础上,body 元素对象提供事件处理程序onscroll 响应用户的动作,如鼠标移动滚动条到底部时调用Window 对象的scroll()方法将当前浏览器窗口移动到指定位置等。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值