HTML 4.01 程序员参考 - 第 1 章：简介

标题 HTML 4.01 程序员参考 作者 Stuart Conway, Gary Damschen, Cassandra Greer, Dan Maharry, Simon Oliver, Sean Palmer, Jon Stephens, Chris Ullman 出版社 Wrox 出版日期 2001 年 6 月 ISBN 1861005334 价格 34.99 美元 页数 600

嵌入对象

虽然我们目前在 HTML 中看到的，例如链接、表格和表单，提供了许多重要的功能，但仍有许多事情仅靠 HTML 无法实现。如果我们想在网页中嵌入电影或音频 MP3 文件怎么办？在网络的早期，我们能做的很少，只能浏览超链接文本页面，如果幸运的话，偶尔能看到一张图片。使用 HTML 2.0，我们只能插入图像、视频、声音和文本。HTML 3.2 进一步改进了这一点，但要添加更多内容，例如简单的动画消息、电子表格、Word 文档，甚至完整的 3D 景观渲染，我们需要将它们作为对象插入。

HTML 4.01 通过使 <object> 元素成为实现此目的的标准方式来允许这样做。以前，对象在网页中的放置是通过标准和非标准方式的混合来支持的。事实上，<object> 元素取代了 <applet>、<embed> 和 <img> 元素，以及 Microsoft 的 <bgsound> 元素和 dynasrc 属性。<object> 元素主要用于浏览器本身无法处理的内容类型，因此 <object> 元素需要提供要显示的数据和处理数据显示的插件。理论上，<object> 提供了一种将各种对象嵌入到 Web 文档中的单一方式，并为 HTML 页面提供更通用的跨平台支持。

然而，一个主要的令人失望的原因是，<object> 元素尽管是实现此目的的标准方式，但直到最近才真正在 Internet Explorer 中可用。这是因为支持许多对象所需的插件通常不具有通用跨平台兼容性。Netscape 6 通过添加支持部分纠正了这一点。尽管如此，在 Netscape 6 的早期版本（6.0 和 6.01）中，当添加图像以外的任何内容时，对 <object> 元素的支持有时不稳定，甚至不存在。然而，在更最新的 Mozilla 里程碑构建（0.8 及更高版本，它们构成了未来 Netscape 版本的基础）中，许多这些问题已得到解决，因此 <object> 将在预计于 2001 年夏天发布的 Netscape 6 的下一个主要升级中正常工作。此外，其他浏览器，如 Opera 5，以及较旧的浏览器，如 Netscape 4，对该元素的支持仍然有限，完全依赖旧的 <embed> 元素来启用组件。

在本章中，我们将重点关注 <object> 元素，因为其他元素（<img> 除外）要么已被弃用并在第 15 章中介绍，要么，就 <embed> 和 <bgsound> 元素而言，从未成为标准的一部分。这两个元素都在第 16 章中介绍。

<object> 元素 – 历史

最初，HTML 2.0 标准只提供了一种将媒体整合到 HTML 文档中的方法：<img> 元素。这个元素当然已经被证明是值得的，但它当然仅限于图像媒体，这意味着随着更丰富的媒体进入网络，它的实用性是有限的。

然而，对于其他媒体，有 <embed> 元素，它在 Netscape 2 和 IE 3 中引入，并且在许多浏览器中仍然是将多种类型的对象插入网页的唯一方法。随着 Java 的引入，<applet> 元素在 HTML 3.2 中引入，允许开发人员插入 Java 小程序。

<object> 元素最初由 Microsoft 在 Internet Explorer 3 中引入，用于包含 Microsoft 组件对象模型或 COM 对象（例如 ActiveX 控件和各种不同的媒体类型和插件）。Internet Explorer 引入此标签并支持 ActiveX 控件，Microsoft 围绕它继续开发。

当微软于 1996 年 3 月发布其第一套互联网工具时，它宣布了 ActiveX 技术——事实上，这只是其现有 OLE 技术的一个新营销名称。ActiveX（或第三代 OLE 技术）是一个框架，允许软件组件进行协作，即使它们是由不同的供应商在不同的时间使用不同的工具和不同的语言编写的，并且如果对象位于同一进程中——同一台机器或分布在多台机器上。一些 ActiveX 控件随 IE 浏览器一起提供。

<object> 元素之所以受到 HTML W3C 标准机构的欢迎，并最终被其采用，是因为它引入了一种统一的方式来嵌入各种对象——图像、Java 小程序、电影等。我们不能使用 <embed> 标签来放置图像或 Java 小程序，我们也不能将 <img> 元素用于图像之外的任何东西，但引入这种内容的逻辑对于每种类型的对象都非常相似。对于每个对象，无论是图形、Java 小程序还是实时电影，我们仍然需要说明对象的位置、我们正在包含的对象类型，以及下载“辅助应用程序”的位置，以便浏览器即使不原生支持它，也能调用该对象。

辅助应用程序是指浏览器在运行特定对象之前需要下载的应用程序。例如，某些浏览器在运行 Flash 动画之前需要下载 Macromedia 的 Flash。

可以说，<embed> 元素也处理所有这些功能，并且可以进行调整以处理图像和 Java 小程序；然而，<object> 元素与 param 属性一起，提供了一种更清晰、更通用的方法来向组件传递参数，这可能就是它在竞争中脱颖而出的原因。

这是一个有吸引力的解决方案，尽管在某些方面有些缺陷。一个问题是 Netscape 4 不支持 <object> 元素——Netscape 仍然倾向于使用从未得到官方认可的 <embed> 元素，但如前所述，<object> 已在 Netscape 6 和 Opera 5 中引入，尽管程度有限。还有一个问题是，Microsoft 创建的几个组件只随 Internet Explorer 发布，因此只适用于 Internet Explorer，例如图形效果滤镜。通常，在 Netscape 6 中可以使用 <object> 添加许多其他第三方组件，例如图像和小程序，并且可以在 Opera 5 中包含图像。然而，在目前这个精确的时间点，<object> 元素并不是一个完全的跨浏览器解决方案。

<object> 元素的工作原理

大多数浏览器都内置了对常见功能的原生支持，例如图像（GIF、JPEG 和 PNG）、文本、字体和颜色。当 IE 4 在 1997 年发布时，网络上最常见的组件是 ActiveX 控件和 Java 小程序，两者都可以通过 <object> 元素运行。然而，自那时以来，情况发生了相当大的变化。COM 对象取代了 ActiveX 控件，而这些控件又在 .NET 框架中部分被 Web 服务取代。

压缩算法的进步和更廉价的更高带宽使得流媒体视频，如 MPEG、AVI 和 QuickTime 电影，现在在网络上变得更加普遍。这些需要单独的应用程序，如 Windows Media Player 或 Apple QuickTime Movie Player 才能运行。其次，音频已经超越了笨重的 WAV 文件。流式音频以 .ra（RealAudio 文件）的形式很常见，但迄今为止最常见的音频文件格式是 MP3 格式，它将音频文件的大小缩小到可管理的几兆字节，同时保持接近 CD 播放器的音质。我们再次需要在页面中插入第三方播放器，如 Windows Media Player，才能播放 MP3 文件。

从技术上讲，大多数 MP3 文件以比平均 CD 播放器（以 44.1Khz 采样）更好的采样率保存。然而，即使是保存为 128KHz 的文件，MP3 中使用的有损压缩算法也会去除非可听信息以减小文件大小。这仍然有缺陷，你会发现 CD 在听觉上优于 MP3 文件。

我们可以使用 <object> 元素插入这些技术。然而，由于文件大小较大，许多网络用户更喜欢单独下载这些文件，因此，网络开发人员在网页中主动嵌入视频或音频文件的情况越来越少。取而代之的是，网页中最常见的嵌入式应用程序是 Macromedia 的动态网络图形工具——Flash。它允许开发人员创建动画、交互式图形和菜单，并将它们嵌入到网页中。Flash 还可以处理声音和文本，并已成为开发人员流行的万能解决方案。Flash 动画使用 <object> 元素嵌入到 HTML 页面中。

为了在页面中嵌入一个对象，W3C 规定我们需要指定三种信息：

• 所包含对象的实现（或可执行代码的位置）
• 要渲染的数据
• 对象在运行时所需的附加值

前两个值在 <object> 元素的属性中指定，而附加值在 <param> 元素中指定。但是，我们不需要一次性指定所有三个。有些对象可能不需要在运行时初始化，而另一些则没有任何数据可渲染。当浏览器遇到一个对象时，它必须尝试在网页上渲染其内容，否则它必须尝试渲染 <object> 元素的内容。例如：

<object type="oojit/wotsit">
    If you are reading this text then your browser can't render the object.
</object>

这里我们将一些替代文本放在一个不存在的对象内部。所有浏览器都会显示替代文本，因为它们无法渲染该对象。

我们还可以使用 <object> 元素将对象相互嵌套。浏览器将尝试渲染第一个 <object> – 如果无法渲染，则应尝试渲染第二个 <object> 元素，依此类推，直到到达最内层的 <object> 元素，如果它尚未成功渲染任何对象。如果它无法渲染任何对象，那么它将渲染其中包含的文本。如果需要，我们可以将对象作为 <embed>、<applet> 或 <img> 元素放置在最内层的对象中，以供不支持 <object> 元素的浏览器使用。

还可以在文档头部（在 <head> 元素内）插入 <object> 元素，只要 <object> 元素不打算在网页上渲染任何物理内容。这听起来有点奇怪，因为 <object> 元素主要用于嵌入多媒体内容，但它是一种值得考虑的有用技术——例如，我们可以在文档头部使用 <object> 元素来调用数据库，然后可以通过主体中的脚本操纵其中的值。

然而，从 Netscape 6 和 Opera 5.x 处理 <object> 元素的方式来看，我们似乎需要确保元素不渲染，例如通过在样式表中设置 display: none;。另一方面，IE 5.5 会自动不渲染出现在 <head> 部分的任何 <object> 元素。

现在，让我们看看 <object> 元素的属性，并了解如何在我们的网页中使用对象。

<object> 属性

<object> 元素支持以下属性

archive	border	classid	codebase
codetype	data	declare	height
width	hspace	vspace	名称
standby	tabindex	usemap

以及常见的 HTML 4.01 属性 id、class、style、dir、lang 和 title，以及常见的事件（更多详细信息请参见第 2 章）。

archive

此属性指定一个由空格分隔的 URL 列表，其中包含与 classid 和 data 属性中指定的资源相关的信息。语法为

archive="urllist"

border

此属性指定要围绕对象绘制的边框宽度。语法为

border="n"

其中 n 是一个整数。对于 border="0"，不绘制边框。与 align 一样，此属性在 HTML 4.01 中已弃用。样式表是添加边框的首选方法。

classid

这指定了对象的类标识符（在 Windows 平台上，一旦对象安装，此信息存储在用户机器的注册表中）。语法是

classid="class_identifier"

class_identifier 是用于在我们的网页上创建对象的信息。类标识符（HTML 4.01 标准规定这应该是一个 URL）告诉浏览器绘制指定类型的对象。然而，在 Internet Explorer 中，它的处理方式略有不同；classid 属性是整个元素的关键——这是对象每个实例的唯一值，浏览器就是通过它知道要将哪个对象加载到页面中。以下是 RDS 控件的 classid 示例。

<object id="RDS Control" classid="clsid:BD96C556-65A3-11D0-983A-
    00C04FC29E33">
...

它被用作数据属性的替代，并且在 Internet Explorer 中通常比数据更受欢迎，因为数据属性在 <object> 元素中似乎效果不佳。

codebase

这允许我们指定要使用的对象的 URL 位置和版本。语法为

codebase="url"

然而，只有 IE 真正实现了此属性，并且它以以下方式实现

codebase="url#Version=a,b,c,d"

大多数组件需要先安装在我们的系统上才能在我们的网页中使用。在 IE 中，codebase 属性指向一个位置，对象可以从该位置下载并安装到我们的系统上以供使用。它还标识应下载的文件版本。如果我们的本地机器上尚不可用对象，则系统将不得不转到指定的 URL。当然，如果 codebase 中指定的站点繁忙或停止运行，那么不幸的是我们的页面将无法正确下载和插入所需的组件。

从语法中我们可以看到，我们可以选择在 URL 后附加一个版本号字符串。该字符串具有以下格式

• a – 指定 URL 处可用组件主版本的高位字
• b – 指定 URL 处可用组件主版本的低位字
• c – 指定 URL 处可用组件次版本的高位字
• d – 指定 URL 处可用组件次版本的低位字

如果 a、b、c 和 d 都设置为 1，则只有当发布日期晚于用户机器上的安装日期时，才会下载该组件。

一个能够运行 Macromedia Flash 5 动画的 codebase 示例如下所示

CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/
    swflash.cab#version=5,0,0,0"

然而，这只适用于 IE。

codetype

这指定了浏览器在下载 classid 属性中引用的类型的对象时所期望的 Internet 媒体类型。仅当已指定 classid 属性时才相关。语法如下：

codetype="media_type"

浏览器可能会使用 codetype 属性的值来跳过不受支持的媒体类型，而无需下载不必要的对象。有关媒体类型的更多详细信息，请参见“type”。

declare

这声明对象而不实例化它。语法很简单：declare。

当您创建文档后面出现的对象的交叉引用，或将对象作为另一个对象的参数使用时，请使用此项。

data

这定义了作为对象源的 URL 或数据本身。语法为

data="source"

其中 source 可以是可下载数据的 URL，也可以是作为十六进制值字符串的数据本身。我们将在本章后面查看一个示例。

height 和 width

这些指定对象要显示的宽度和高度。语法为

width="n"
height="n"

其中 n 是以像素为单位的宽度或高度。这也可以表示为百分比值，在这种情况下，值应附加 % 符号。

当使用 <object> 元素显示图像时，宽度和高度是可伸缩的。也就是说，我们可以使用它们来指定我们希望图像适应的框的大小，浏览器将按比例缩放图像以适应，这与 <img> 元素处理图像的方式完全相同。然而，这条规则有一个例外，即 IE 5.5 将图像以其原始大小放入一个框架中，并且这个框架被缩放到 width/height 指定的尺寸。我们稍后会详细介绍。

使用 <object> 元素的宽度和高度有助于页面加载更快，因为浏览器可以在加载对象之前知道对象的尺寸，从而布局页面的其余部分。

hspace 和 vspace

这些属性用于控制对象周围的空白。语法为：

hspace="n"
vspace="n"

其中 n 是以像素为单位的数值。图像旁边、上方和下方的其他元素将通过指定的像素数移开。这些属性现在已在 HTML 4.01 标准中弃用。

名称

此属性提供一个名称来引用对象。语法为

name="name"

其中 name 是页面中的唯一名称。在 HTML 4.01 中，这等同于 id 属性，但仅在表单提交时才需要。

standby

此属性指定在对象数据加载时将使用的文本字符串。语法为

standby="text"

其中 text 是一个单词、短语或句子，描述对象，或在加载时显示时提供有意义的对象描述。

tabindex

这是页面中对象的 Tab 索引。语法为

tabindex="n"

其中 n 是页面 Tab 顺序中的位置。默认情况下，页面中所有可以接收输入焦点的元素都属于 Tab 顺序，按照它们在 HTML 源代码中定义的顺序。按下 Tab 键时，每个元素依次获得焦点。通过将 tabindex 的值设置为 -1，该元素将从 Tab 顺序中移除。有关 tabindex 和焦点的更多信息，请参见第 6 章。

usemap

此属性表示该对象是一个图像映射，包含定义为独立超链接的区域。usemap 属性用于指定与此对象一起使用的映射文件。标准允许指向外部映射文件的完整 URL，但通常使用对内联 mapElement 的引用 #mapName。另请注意，此属性仅存在于 Internet Explorer 6 中，而不存在于早期 IE 版本中。有关图像映射的更多信息，请参见第 5 章。

Internet Explorer <object> 扩展

Internet Explorer 为 <object> 元素添加了其他属性

align	accesskey	alt	code
datafld	hidefocus	notab	type
unselectable

注意：只有 align 属性在 IE 5.5 及更高版本中受支持，其余仅适用于 IE 4。现在我们逐一查看这些属性

align

此处 align 属性的语法与通常略有不同

align="top | middle | bottom | left | right | absbottom* | texttop* | 
    absmiddle* | baseline*"

* 有关这些值的解释，请参见第 5 章，并查看 <img> 元素部分。此属性在 HTML 4.01 中已弃用。

accesskey

此属性定义可用于激活元素或将输入焦点切换到元素的“热键”。当超链接采用图像而非文本字符串的形式时，使用此属性。有关将图像用作超链接的详细信息，请参见第 4 章。有关 accesskey 属性的更多用途，请参见第 6 章。

alt

这定义了图形的替代文本。有关更多详细信息，请参见第 5 章。

code

此属性定义实现对象的 Java 类文件的 URL，如果这是对象源而不是图像。其语法为

code="url"

datafld 和 datasrc

这些属性用于将 <object> 元素连接到 Internet Explorer 4 中的客户端缓存数据源，这是一种称为数据绑定的技术。这些属性后来在 Internet Explorer 6 中被移除。有关使用这些属性的示例，请参见第 8 章的“<frame>”部分。

hidefocus

此属性包含一个值，指示当元素获得焦点时，对象是否可见。有关更多信息，请参见第 8 章。

notab

此属性在 Internet Explorer 3 中非常短暂地存在，但在版本 4 时被删除。它用于将元素从 Tab 顺序中排除，但现在可以通过将 tabindex 属性设置为 –1 来实现。

type

此属性定义对象的 MIME 类型，如 Windows 机器上的注册表中所定义。语法为

type="mime-type"

其中 mime-type 是标准格式的唯一文本字符串，它告诉浏览器文件包含何种信息，以及使用哪个应用程序读取或执行它（视情况而定）。流行图像格式的 MIME 类型是 "image/gif"、"image/jpeg" 和 "image/png"。这将被 classid 属性覆盖。

unselectable

此属性指定元素不可选择。语法为

unselectable="on | off"

如果设置为 off（默认值），则元素可以被选中。将其设置为 on 则使对象不可选中。

Tags <object> 可以包含

<object> 元素与 <param> 元素协同工作，后者用于指定每个对象可以接受的不同参数。这些参数是对象在运行时将需要的值。它们必须放在 <object> 元素内容的开头。

<param> 元素

param 元素可以接受以下属性

name      type      value      valuetype

以及第 2 章中讨论的通用属性和核心事件。这些特定于特定对象的大多数附加元素将只使用名称和值。

名称

此属性指定参数的名称或属性。此属性对于每个 <param> 元素都是强制性的。语法为

name="string"

value

此属性指定要为参数设置的值。语法为

value="string"

type

如果 valuetype（值属性的数据类型）设置为 ref，则此属性的值是检索到的 MIME 类型。语法为

type="string"

valuetype

此属性指定如何获取参数值。语法为

valuetype="data | ref | object"

ref 是通过 URL，而 data 是默认的隐式值，object 是指页面中定义的另一个对象的 ID 的标识符。IE 6 是第一个支持 <param> 元素的 valuetype 的 IE 版本。

使用 <object> 元素

<object> 元素是一个通用元素，旨在将许多不同类型的内容插入 HTML 文档中。为了应对这种多样性，type 属性用于指示对象显示的数据类型，而 codetype 属性指示实现数据显示的应用程序类型。在使用图像时，我们感兴趣的是 type 属性，它是一个内容的字符串描述——例如 GIF 图像的“image/gif”，或 AVI 视频剪辑的“video/avi”。一般来说，对于视频、音频或文本以外的类型，显示数据所需的应用程序由“application/<document_type>”定义。对于通用图像类型，如 GIF 和 JPEG，浏览器本身处理图像的显示。

在 Windows 中，您的机器支持的所有 MIME 类型列表可以在注册表路径 HKEY_CLASSES_ROOT\MIME\Database\ContentType\ 下找到，所有浏览器都可以使用这些类型。

指定数据

data 属性为对象提供数据，可以是可下载的 URL，也可以是作为值字符串的内联数据。例如，此代码将显示一个名为 MyVideo.avi 的 AVI 文件。如果浏览器不支持 <object> 元素，它将显示文本 My Video

<object data="http://mysite.com/video/MyVideo.avi"
    type="video/avi">
    My Video
</object>

这是一个通用示例，说明我们如何利用 <object> 元素作为包含元素。

然而，type 属性是可选的；但如果它不存在，那么浏览器唯一能确定是否能处理对象的方法是先下载它——并非所有文件都可以从文件扩展名等唯一标识。此外，并非所有文件都必须具有正确的扩展名，而且并非所有系统都使用文件扩展名。通过包含 type 属性，我们可以准确告诉浏览器文件类型。然后，如果它无法处理，就不会浪费时间和带宽下载它。

不支持对象的浏览器回退

如果浏览器识别 <object> 元素，那么一切都好——对象将被调用。然而，如果它不识别 <object> 元素，或者无法处理构成对象源的数据，我们可以确保显示替代内容。

我们可以包含文本和其他元素，这些元素仅在不识别 <object> 元素或无法处理其指定数据内容类型的浏览器上可见。我们通过将文本或其他元素放置在开放和关闭 <object> 标签之间，以及任何参数标签之外来实现。这是一个例子：

<object data="http://mysite.com/video/MyVideo.avi"
        type="application/avi">
    <img src="http://mysite.com/stills/MyPicture.gif"
        alt="This is a picture of my dog">
</object>

在这种情况下，支持 <object> 元素的浏览器应显示视频剪辑。然而，如果浏览器不支持 <object> 元素，或者无法显示 AVI 文件，观看者将看到由 <img> 元素定义的普通图像。如果浏览器不识别 <img> 元素，或者因任何原因无法显示其内容，将显示 <img> 元素的 alt 属性中的替代文本。

对象的内联数据定义

如果对象的数据内容相对较小，可以通过将数据本身包含在 <object> 标签中进行定义，这称为内联定义

<object data="data:application/x-oleobject;3300,FF00,E3A0, ...etc... ">
</object>

这并不常见，因为内联定义所需的数据量通常非常不切实际。

使用 <object> 元素插入图像

HTML 4.01 中一个有趣的提议，正如我们所见，是使用 <object> 元素嵌入普通图形文件，例如 GIF 和 JPEG 文件。在最基本的形式中，使用很简单

<object data="wroxLogo.gif">
</object>

数据属性的工作方式就像 <img> 标签中的 src 属性一样，但当图像较小时也可以接受内联数据。这可以通过减少所需的服务器连接数量来加快页面的查看时间。

<object type="image/jpeg"
    data="data:image/jpeg;3300,FF00,2756,E5A0,E3A0,22F6, ...etc...">
</object>

然而，与 <img> 元素不同的是，后者会使用这些最少的信息在浏览器中显示图形，这对于 Internet Explorer（版本 4 到 6）来说是不够的。它会假定高度和宽度设置都为零，我们将看不到任何东西，尽管 Netscape 6 和 Opera 5.02 会非常愉快地显示图形。

通过添加 <img> 元素常见的宽度和高度属性，并在 type 属性中添加 MIME 类型，图像将在 Internet Explorer 中使用以下代码显示

<object type="image/gif" data="wroxLogo.gif"
    width="100" height="100" >
    This is our Wrox Logo
</object>

虽然现在添加了高度和宽度意味着我们可以在 Internet Explorer 中看到图像，但一切仍然不顺利。

查看结果，我们可以看到一个包含 <object> 元素的容器示例。与 <img> 元素不同，在 Internet Explorer（版本 4 到 6）中，<object> 元素不使用文件的默认大小来调整容器大小。我们指定的 height 和 width 用于调整一个框架的大小，该框架包含 <object> 元素本身，而不是图像。由于它大于可用空间，浏览器会自动添加滚动条。

当然，在 HTML 4.01 中调整元素大小的“正确”方法是使用样式表来指定 height 和 width 样式。下面，为了简洁起见，我们使用了内联样式表中的 width 属性。此代码生成与上面相同的页面

<object type="image/gif" data="wroxLogo.gif"
    style="width:100px; height:100px">
    This is our Wrox Logo
</object>

然而，这并没有解决滚动条的问题。重新调整图像容器使其适应图像大小也无济于事

<object type="image/gif" data="wroxLogo.gif"
    style="width:105px; height:105px">
    This is our Wrox Logo
</object>

现在水平滚动条已移除，但垂直滚动条仍然存在，尽管它现在处于非活动状态

因此，在 Internet Explorer 中，我们不能在 <object> 元素内使用图像而不会出现难看的滚动条。这使得它在 Microsoft 更新之前无法使用。

Netscape 6 和 Mozilla 正确渲染图像，没有滚动条，但其在 <object> 元素中表示图像时有一个异常。如果我们使用样式表调整图像大小，Netscape 只会将图像大小设置为默认值，忽略样式表中设置的任何值。如果我们要拉伸图像，就像 <img> 元素一样，我们必须使用 height 和 width 属性。

<object type="image/gif" data="wroxLogo.gif"
    height="250" width="100">
    This is our Wrox Logo
</object>

这样图像就会被拉伸以适应

隐藏图像元素

我们还可以指定其他样式属性，例如以下代码

<object type="image/gif" data="wroxLogo.gif"
    style="visibility:hidden; height:105pt; width:105pt">
    This is our Wrox Logo
</object>

将图像加载到页面上的 <object> 元素中，但使其不可见。虽然这可能看起来有点毫无意义，但它是一种让浏览器缓存我们想要快速可用的图像的好方法，例如翻转——像旋转的广告，或动画 GIF 中的一系列帧。当图像需要显示时，它不需要下载——只需从本地系统的缓存中提取，尽管它可能会减慢第一个页面的加载速度，因为所有图像都必须先加载。

替代内容

最后，如果浏览器不知道如何处理由 type 和 data 属性指定的对象怎么办？这里，我们为 type 使用了一个未知值

<object type="haven't/aclue" data="wroxLogo.gif"
    style="width:100; height:100">
    This is our Wrox Logo
</object>

结果是，经过片刻的犹豫之后，浏览器（仅限 IE 和 Netscape 6 – Opera 5.x 无论如何都会显示图像）报告它无法处理该文件并显示 <object> 元素的替代文本内容。

不幸的是，Internet Explorer 对带有永久垂直滚动条的图像的古怪渲染意味着，在普遍使用中，<object> 元素不太可能取代 <img> 元素。

将组件插入网页

虽然不可能查看如何将每个对象或组件嵌入网页的示例，但我们将查看我们可以使用 <object> 元素嵌入网页的组件的横截面。

播放电影

Internet Explorer 的每个不同版本都包含几个组件，这些组件使我们能够通过提供特殊的格式化功能、动画、视频等等来使我们的网页生动起来。

其中最有用的可能是 Microsoft 的 Windows Media Player 控件，它是 DirectX SDK 的一部分，可在 IE 4 及更高版本中使用。Windows Media Player 允许我们在网络上播放流行的媒体格式，包括 MPEG 音频和视频、AVI 文件、某些类型的 QuickTime 电影、MP3、WAV 文件和 MIDI 的渐进式播放。由于此组件随 IE 附带，我们不需要 codebase 属性来定位 Windows Media Player 的版本。

这里我们将展示如何通过将 Windows Media Player 作为对象插入网页来放置内联视频，如下所示

看看下面的代码

<html>
    <head>
        <title>ActiveMovie Example</title>
    </head>
    <body>
        <object id="WindowsMediaPlayer" 
            classid="CLSID:05589FA1-C356-11CE-BF01-
            00AA0055595A" style="position:absolute;top:55;left:90">
        <param name="ShowDisplay" value="0">
        <param name="ShowControls" value="1">
        <param name="AutoStart" value="1">
        <param name="AutoRewind" value="-1">
        <param name="Volume" value="-5000">
        <param name="FileName" value="http://webdev.wrox.co.uk/books/0707/
             chapter12/RockClmb.avi">
        </object>
    </body>
</html>

Windows Media Player 控件的多功能性在于，我们可以通过更改 FileName 参数值，轻松地将代码更改为播放 MP3 音频文件，如下所示

<param name="FileName" value="http://www.beemen.com/NewBeemenPages/

TheBeemenGoodnightBirmingham.mp3">

这将把一个 MP3 文件嵌入到网页中。

如您所见，<object> 元素本身中包含了一些 <param> 标签：这些都是 Windows Media Player 控件的参数。如果我们要将不同的对象嵌入到我们的页面中，该对象的属性将不同，我们需要输入这些不同的参数。我们实际上不打算花时间解释这些属性，但有关 Windows Media Player 的更多信息可以在以下位置找到

http://msdn.microsoft.com/workshop/imedia/directx/docs/wmp/content_authoring_guide.asp。

使用对象元素插入 Java 小程序

随着 <applet> 元素在 HTML 4.01 标准中被弃用，嵌入 Java 小程序的方式是使用 <object> 元素。这并不那么简单。Java 在 Web 浏览器方面有着坎坷的历史。随着 Sun 在 20 世纪 90 年代中期创建它，当时的浏览器主要供应商（Netscape 和 Microsoft）迅速意识到了它的潜力。它们都迅速在浏览器中包含了 Java 运行时环境的版本，<applet> 元素可以利用这些版本。然而，Sun 定期更新 Java 环境，因此浏览器只能支持过时的软件版本。

虽然 Opera 的创建对两大浏览器没有太大影响，但它确实使浏览器代理成为了一个更小的实体，并且是第一个考虑将 Java 虚拟机作为主浏览器的可选附加组件的浏览器。这现在对将 Java 小程序放入我们的网页产生了一些影响，因为我们仍然不能假设每个浏览器都会自动安装 Java（即使我们可以，有些人无论如何也会禁用它）。此外，即使他们安装了 Java，它也可能不是最新版本，或者不是足够新的版本来运行小程序。这也意味着如果我们要在一个没有原生 Java 支持的 Web 浏览器上运行 Java 小程序，我们必须首先通过 codebase 属性安装 Java 插件。然而，由于通过 codebase 属性下载任何组件都是一个漫长的过程，我们建议如果您真的打算使用 Java（即使您只是浏览 Java 小程序），那么您应该使用包含 Java 虚拟机的浏览器。

好的，我们将从 Sun Microsystems 网站借用一个非常简单的 Java 时钟小程序示例，其版权归 Sun 所有，但许可证允许其自由分发。它位于：http://java.sun.com/products/plugin/1.3/demos/applets/Clock/Clock2.java。

这应该在您自己的机器上保存为 Clock2.java，之后您需要使用 JDK 1.3 将其编译为 Clock2.class。

您可以使用命令提示符/UNIX 命令行使用以下代码编译它

>javac Clock2.class

我们对这段代码的内部工作原理不感兴趣，所以我们不打算解释它是如何工作的。我们只需要知道它将在我们的网页上显示一个矢量图形时钟。我们感兴趣的是将这个小程序嵌入到网页中，在 <object> 元素内，以便它在尽可能多的浏览器中工作。

对于 Internet Explorer，只需在 classid 属性中提供详细信息即可

<object codetype="application/java"

classid="java:Clock2.class" width="400" height="200">

您的浏览器正在忽略“object”元素。

</object>

然而，可以如下指定 JDK 的最新版本

<object codetype="application/java;version=1.3"

classid="java:Clock2.class" width="400" height="200">

您的浏览器正在忽略“object”元素。

</object>

在这种情况下，我们依赖于一个足够新版本的 IE 中的 JDK。在这两种情况下，它都应该产生类似以下内容的结果：

然而，对于不包含原生 Java 支持的浏览器来说，这还不够，我们还需要指出 Java 插件的位置才能运行 Java 小程序。我们需要如下指定 codebase——如果浏览器已经原生支持 Java，则会忽略此代码。在没有 Java SDK 的 IE 版本中，代码如下所示：

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300"
    height="200" codebase="http://java.sun.com/products/
    plugin/1.3/jinstall-13-win32.cab#Version=1,2,0,0">
    <param name="code" value="Clock2.class">
    <param name="type" value="application/x-java-applet;version=1.3">
    Your browser is ignoring the "object" element.
</object>

然而，指定的 .cab 可执行文件是 IE 特有的，为了让它在 Netscape 6 中工作，我们实际上需要指定 Sun Java 插件

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" width="300"
    height="200" codebase="http://java.sun.com/products/plugin/
    1.3/plugin-install.html">
    <param name="code" value="Clock2.class">
    <param name="type" value="application/x-java-applet;version=1.3">
    Your browser is ignoring the "object" element.
</object>

这里我们使用了没有包含 Java SDK 的 Netscape 6 版本，输出将如下所示

当然，这仍然留下了如何处理完全不支持 <object> 元素的浏览器（例如 Netscape 4）的问题。在这种情况下，我们可以将 <applet> 标签插入代码，如下所示，并确保将其注释掉（对于 Internet Explorer）

<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
    WIDTH=300 height=200 codebase="http://java.sun.com/products/
    plugin/1.3/jinstall-13-win32.cab#Version=1,2,0,0">
    <param name="code" value="Clock2.class">
    <param name="type" value="application/x-java-applet;version=1.3">
    <comment>
        <applet code="Clock2.class" width="170" height="150">
        </applet>
    </comment>
</object>

IE 特有的 <comment> 标签是唯一可用的，如果未使用，则 <object> 和 <applet> 元素都将被 IE 解释，小程序将显示两次。这与我们之前关于对象的说法直接矛盾；预期的行为应该忽略 <applet> 元素。然而，对于 IE 中的 <applet> 元素，似乎存在这个异常，它需要使用 <comment> 标签。有关 <applet> 元素的更多信息，请参见第 15 章。

使用 Object 元素插入 Flash 动画

正如本章前面提到的，将 Flash 动画插入我们网页的方法是使用 <object> 元素。通常使用 Flash，我们会使用发布工具（在 Flash 中通过“文件 | 发布”菜单访问）为我们创建 HTML，因此我们不必实际进行编码，因为发布工具会自动为我们完成所有这些操作。然而，有时我们可能希望手动将 Flash 动画放置到我们的网页中。

还值得一提的是，发布工具创建的代码使用 <object> 在 Internet Explorer 中插入动画，并且在 <object> 元素中，有一个 <embed> 元素用于插入动画，以便 Netscape 4 和 Opera 浏览器也能运行它。Netscape 6 浏览器似乎无法通过 <object> 元素执行它——再次需要 Microsoft .cab 文件才能在 <object> 中运行 Flash 工具，因此 Netscape 6 依赖于 <embed> 元素。现在我们来看一个示例。

我们借用了一个 Flash 文件（savior.swf – 请参见代码下载），由 Friends of Ed (http://www.friendsofed.com) 提供，它允许我们玩一个简单的街机游戏。创建嵌入式应用程序的代码并不重要，重要的是我们插入它的方法。Flash 现在已普遍包含在最新的浏览器中，但为了安全起见，我们添加了一个 codebase 属性指向 Flash 下载屏幕。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/
    cabs/flash/swflash.cab#version=5,0,0,0" width="500"
    height="400">
    <param name="movie" value="savior.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#FFFFFF">
    Flash animations not supported with "object"
</object>

假设 savior.swf 文件与包含上述信息的网页位于同一目录中，我们应该在 Internet Explorer 中看到以下内容

要使此动画在 Netscape 和 Opera 中工作，我们需要将以下 <embed> 元素代码封装在 <object> 元素代码中

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/
    cabs/flash/swflash.cab#version=5,0,0,0" width=500
    height=400>
    <param name="movie" value="savior.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#000000">
    <embed src="savior.swf" quality="high" bgcolor="#000000" width=550
        height="400" type="application/x-shockwave-flash"
        pluginspace="http://www.macromedia.com/shockwave/download/
        index.cgi?P1_Prod_Version=ShockwaveFlash">
    </embed>
</object>

<embed> 元素甚至没有被弃用，因为它从未成为任何 HTML 标准的一部分，尽管 IE、Netscape 和 Opera 都支持它。pluginspace 属性等同于 IE codebase 属性。有关 <embed> 元素的更多信息，请参见第 16 章。最后一点需要注意的是，这里我们不需要 <comment> 标签，因为 IE 在这里只会嵌入一次 Flash 动画（正如它所预期的那样），尽管从技术上讲指定了两次，因为它会忽略 <object> 元素内部的内容，如果它自己处理标签，就应该这样做。

插入 Excel 电子表格

在 Internet Explorer 中也可以插入简单的项目，例如电子表格和 Word 文档。我们可以使用 FrontPage 等工具为我们完成基本工作，但 FrontPage 实际所做的只是创建所需的 <object> 元素并将必要的数据作为 param 属性插入。以下代码将一个空白的 Excel 电子表格插入到我们的网页中。

<object classid="CLSID:0002E510-0000-0000-C000-000000000046">
    <param name="DisplayTitleBar" value="false">
</oject>

不幸的是，这在 Netscape 或 Opera 上不会产生任何结果，因为它们不支持 COM 对象。

在另一个 HTML 文档中包含 HTML

HTML 4.01 标准还允许我们使用 <object> 元素“将 HTML 文档插入到我们的网页中”。将网页插入网页可能看起来毫无意义，但它可能有非常有用的两个原因

• 首先，它充当 <iframe> 元素的替代品，这很好，因为 <iframe> 并非 HTML 4.01 标准的官方组成部分。然而，将其用于此目的存在问题。<iframe> 元素可以被链接或表单定位，并且可以获得焦点和打印，而 <object> 元素不支持这些功能。
• 其次，它使我们能够轻松地在一个站点中多次重用单个代码段（HTML 或脚本），而无需完全复制代码。

我们可以使用 data 属性嵌入文档，如下所示

<object data="embedded_document.htm">
    Couldn't include document specified.
</object>

然而，IE 5.5 中曾存在与此功能相关的安全漏洞。它允许使用 object type="text/html" 并解析 index.dat 来执行任意程序，通过泄露临时互联网文件文件夹的位置，这可能导致黑客完全控制用户计算机。有一个补丁可以纠正此问题。此安全问题的详细信息可在 http://www.microsoft.com/technet/security/bulletin/MS00-055.asp 找到，补丁的详细信息可在 http://www.microsoft.com/windows/ie/download/critical/patch11.htm 找到。该补丁基本上阻止了此功能的运行。它在 Netscape 中也无法运行。唯一确定支持此功能的浏览器是 Opera 5.x。

Microsoft 还提供了在 HTML 文档中嵌入脚本代码作为行为（Behaviors）的功能。行为是可在 Web 上部署的平台独立组件。以前，它们的前身（称为 Scriptlets）使用 <object> 元素来实现这一点。然而，这是一种不断发展的技术，事实证明它是一种有缺陷的插入方式，因此行为现在通过样式表嵌入。因此，这是一种超出本书范围的技术，我们将不再讨论。

摘要

在本章中，我们介绍并解释了如何将对象添加到我们的网页中。我们简要概述了 <object> 元素。我们介绍了不同的属性，并展示了如何使用它将图像以及视频和 MP3 文件等对象添加到 HTML 文档中。这是 HTML 4.01 标准推荐的方法，也是如果可能的话应使用的方法。

我们以概述如何将一些最流行的组件嵌入到我们的网页中来结束本章。然而，我们建议由于 Internet Explorer 不完全支持用于图像的 <object> 元素，因此它不太可能取代 <img> 元素在流行用法中的地位，但对于所有其他类型的媒体，它非常有用。

版权所有 © 2000 Wrox Press Ltd