在html中include一个文件内容的几种方法

在html文件引入其它html文件的几种方法
简介：在论坛中常常有网友问到，可以在一个html的文件当中读取另一个html文件的内容吗？答案是确定的，而且方法不只一种，在以前我只会使用iframe来引用，后来发现了另外的几种方法，那今天就总结这几种方法让大家参考一下，本人觉得第三种方式较好！
1.IFrame引入，看看下面的代码

[代码] <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME>


你会看到一个外部引入的文件，但会发现有一个类似外框的东西将其包围，可使用
[代码] <iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>


但你会发现还会有点问题，就是背景色不同，你只要在引入的文件import.htm中使用相同的背景色也可以，但如果你使用的是IE5.5的话，可以看看这篇关于透明色的文章 如果想引入的文件过长时不出现滚动条的话在import.htm中的body中加入scroll=no


2.<object>方式

[代码] <object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>


3.Behavior的download方式

[代码]
<span id=showImport></span>
<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" />
<script>
function onDownloadDone(downDate){
showImport.innerHTML=downDate
}
oDownload.startDownload('import.htm',onDownloadDone)
</script>

IE 永远未老，DHTML行为独好
本文将介绍 IE 浏览器的一个重要新功能：DHTML 行为，它是 IE 5.x 版本中免费提供的功能。DHTML 行为可以为动态 HTML 元素创建自包含的格式定义。在 Internet Explorer 4.0 里，如果使用两个行为相似的元素，除了分别定义它们以外，你别无其他的选择方法。5.x 版本允许通过一个叫作 Behavior 的格式设计、定义多个元素，Behavior 在面向对象语言的方面给 javascript 带来了一系列概念，例如隐藏细节、封装、代码复用和过程化接口。


　　 我们将通过一个“显示一个不停闪动的转动足球”的例子解释 Behavior。我们先不通过 Behavior 实现它，然后演示如何通过 Behavior 实现同样的任务。最后将强调这样做的优点。

　　 这里是 Behavior scriptlet 和 HTML 页面 的代码清单。

　　 原则上，可以在 Internet Explorer 4.x 中仿真 Behavior 功能。在我们的例子里，可以使用 IE 4.x 的 DHTML 对象创建一个闪动的图形，并通过操纵图形对象的属性如 visibility、left 和 top 来控制图形的可见性和移动它们。以下是完整的脚本：

< HTML>
< HEAD>
< TITLE> Soccer: World Cup is Over < /TITLE>
< /HEAD>
< BODY ONLOAD="soccerOnload()">
< DIV ID="soccer" STYLE="position:absolute; left:200; top:250">
< IMG SRC="bigsoccer.gif">< /DIV>
< SCRIPT LANGUAGE="javascript">
var msecs = 2000;
var counter = 0;

function soccerOnload() {
setTimeout("blink()", msecs);
}

function blink() {
soccer.style.visibility =
(soccer.style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
if (counter == 10) {
alert("Fifth Blink Point");
counter = 0;
}
setTimeout("blink()", msecs);
}

< /SCRIPT>
< /BODY>
< /HTML>
　　 注意我们在闪动足球里添加了一个小功能：每隔五次闪动就弹出一个警报窗口。例子中使用了一个简单的事件，在本文后面的内容里，我们就可以很容易地解释如何通过 Behavior 来实现这个事件。

Scriptlet 是在 HTML 页面中引用的独立脚本。它描述一个从外部接收数据并支持对这些数据进行操作的对象。Scriptlet 描述对象的行为和触发它的事件，它还允许你定义新的事件。Internet Explorer 4.0 以上版本支持 Scriptlet，但 Netscape Navigator 不支持它。Internet Explorer 5.0 中添加了对 Scriptlet Behavior 的支持。Scriptlet 保存在它自己的文件里，文件的扩展名 .sct。Scriptlet 文件由 < SCRIPTLET> 标记开始并以 < /SCRIPTLET> 标记结束：

< SCRIPTLET>......< /SCRIPTLET>
　　 Scriptlet 分为两个部分：接口定义部分和内部实现部分。接口定义部分包括 IMPLEMENTS 标记，每个 IMPLEMENTS 标记 以 < IMPLEMENTS> 开始并以 < /IMPLEMENTS> 标记结束。有两种 < IMPLEMENTS> 标记： < Behavior> 和 < Automation>。< Behavior> 指明同 Behavior 相联的事件，例如：

< IMPLEMENTS ID="kuku" TYPE="Behavior" DEFAULT>
< EVENT NAME="onFifthBlink"/>
< /IMPLEMENTS>
　　 < IMPLEMENTS> 标记的 Automation 类型指明 Scriptlet 的对象接口参数和它所支持的方法：

< IMPLEMENTS TYPE="Automation">
< METHOD NAME="blink"/>
< PROPERTY NAME="x"/>
< PROPERTY NAME="y"/>
< /IMPLEMENTS>
　　 内部实现部分由 javascript 脚本组成。此脚本实现了对象方法的内部细节。在以上的例子代码里只定义了一个事件 blink() 函数。以下是内部实现部分的完整内容：

< SCRIPT LANGUAGE="javascript">
var msecs =2000;
var counter = 0;
style.position = "absolute";
style.pixelTop = x;
style.pixelLeft = y;
window.attachEvent("onload", onload);

function onload(){
window.setTimeout(uniqueID+".blink()", msecs);
}

function blink() {
style.visibility = (style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
if (counter == 10) {
fireEvent("onFifthBlink");
counter = 0;
}
window.setTimeout(uniqueID+".blink()", msecs);
}
< /SCRIPT>
　　 随后详细介绍以上的各个部分。

Behavior 描述了与它相应的 HTML 元素的动态表现。这样一来，Behavior 就不包含它自己的数据。它需要操纵存储在 Web 页面中的数据。这些数据通过 Scriptlet 的接口部分中指定的有名属性传递给 Behavior。< IMPLEMENTS> 标记的 Automation 类型包含以下属性：

< IMPLEMENTS TYPE="Automation">
< METHOD NAME="blink"/>
< PROPERTY NAME="x"/>
< PROPERTY NAME="y"/>
< /IMPLEMENTS>
　　 注意每个 PROPERTY 标记结尾的 /，它代替了应该在 PROPERTY 标记结束位置的 < /PROPERTY> 标记。

　　 在 Scriptlet 接口中指定的属性名必须同 DHTML 元素中的保持一致。你可以使用任何名字定义你需要数目的属性。这里的例子里，我们把 Behavior 和一个 DIV 元素联系在一起。在下面的 DIV 定义中指定了 x 和 y 接口属性：

< DIV CLASS="soccer" x="200" y="250">
　　 在 Scriptlet 的脚本部分，你可以像使用任何其它本地变量一样地使用接口属性。在闪动的足球例子里，我们使用 x 和 y 属性确定一个动态 HTML 元素 (DIV) 的位置：

style.pixelTop = x;
style.pixelLeft = y;


?Behavior 作用在一个与 DHTML 元素相联系的对象上。在闪动足球例子里，首先在 Scriptlet 文件里定义了一个叫作 soccer 的 Behavior，然后通过给它的 CLASS 属性赋值，把一个 DIV 元素和这个 Behavior 联系起来：

< DIV CLASS="soccer" ...
　　 一旦把一个 Behavior 和一个 DHTML 元素联系起来，在 Behavior 定义脚本中的任何操作就假定为工作在此 DHTML 元素对象上。例如，当你操纵 soccer Behavior 中的属性时，你实际上是在操纵相应的 DHTML 对象的属性。soccer Scriptlet 中的以下代码改变 DIV 对象的可见性和位置：

style.position = "absolute";
style.pixelTop = x;
style.pixelLeft = y;
　　 要想引用对象的方法就比较复杂了。Internet Explorer 5.0 中并不默认指到相应的 DHTML 对象，它提供一个 uniqueID 机制。 uniqueID 是 Behavior 操作的当前 DHTML 对象的唯一标识符。在闪动足球例子里，当希望调用 blink() 方法时，用 uniqueID+".blink()" 方式调用它。当希望通过 msecs 以毫秒为单位指定将来的闪动时，我们使用以下代码：

window.setTimeout(uniqueID+".blink()", msecs);
在前面的内容里我们讨论了如何向 Behavior 传递对象和数据。但 Behavior 并不仅仅是接收数据，它还按照你的规定产生事件。在闪动足球例子里，我们定义了一个叫作 onFifthBlink 的事件，它在第五次闪动足球图像时发出信号。Behavior 的事件定义在 Scriptlet 的接口部分里，使用 IMPLEMENTS 标记的 Behavior 类型：

< IMPLEMENTS ID="kuku" TYPE="Behavior" DEFAULT>
< EVENT NAME="onFifthBlink"/>
< /IMPLEMENTS>
　　 在 Scriptlet 的实现部分中产生事件，是通过 fireEvent() 方法完成的。在例子里，我们简单地计算闪动的次数，然后在五次闪动后调用 fireEvent() 函数：

counter +=1;
if (counter == 10) {
fireEvent("onFifthBlink");
counter = 0;
}
　　 注意：我们计数到 10 而不是 5，因为每次闪动由两次可视性改变组成。同时，我们把 counter 变量清零，这样每隔五次闪动就引发事件，而不是只在第一个五次闪动之后。

　　 引发的事件同调用 Behavior 的 DHTML 元素相联系。在闪动足球例子里，只是在每隔五次闪动后弹出一个警告窗口：

< DIV CLASS="soccer" ... onFifthBlink = "alert('Fifth Blink Point')" ...

以上我们演示了如何定义 Behavior 并将它和一个 DHTML 元素联系起来。但 Behaviors 的真正优点是可以在好几个 DHTML 元素间共享一个 Behavior。通过对 Scriptlet 属性的不同赋值，可以完成略为不同的行为。以下是一个闪动的足球：

< DIV CLASS="soccer" x="200" y="250" onFifthBlink =
"alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
　　 现在，在窗口的不同位置再添加五个足球。DIV 这一行基本上和以前一样，只是每个 DIV 中的 x 和 y 属性被赋予了不同的值：

< DIV CLASS="soccer" x="50" y="100" onFifthBlink =
"alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="100" y="150" onFifthBlink =
"alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="150" y="200" onFifthBlink =
"alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="200" y="250" onFifthBlink =
"alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< DIV CLASS="soccer" x="250" y="300" onFifthBlink =
"alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
　　 像我们随后解释的那样，在几个元素间共享同一模型，是面向对象语言的基本要素。它不同于使用不同参数调用一个过程。面向对象模块同时封装了数据和能操作这些数据的方法。Behavior 恰恰就是这样。 　　

　　

像前面演示的那样，Behavior 结构例示了一些源于面向对象的编程语言及其环境的概念：

隐藏实现细节：只向调用它的 HTML 代码暴露了 Behavior 接口 (通过 IMPLEMENTS 标记)。这样允许你改变实现的方式，而不改变调用它的 HTML 元素，同时保持接口不变。


封装代码：Behavior 的定义封装在一个单独的 Scriptlet 文件中 (在闪动足球例子里的soccer.sct)。将行为和页面内容分隔开来方便了对它们二者的维护，维护内容的专业人员不再需要处理格式和风格。另一方面，维护格式的专业人员也不再需要处理页面的内容。


基于对象的定义：Behavior 的定义和对象的定义非常相像，它包含了数据和定义在数据上的操作。在 Behavior 定义之后，不能再把任何数据同它联系在一起。除了开始定义的操作，它不支持任何其它操作。


代码复用：同一个 Behavior 定义可以被多个 DHTML 元素使用。


应用程序过程化接口 (API)：Behavior Scriptlet 的接口像一个过程化接口那样被很好地定义。包含内容的页面给 Behavior 的预定义参数赋值。Behavior 能向调用它的页面传回事件。


以下是 Scriptlet 的完整代码：
< SCRIPTLET ID="soccer">

< IMPLEMENTS ID="kuku" TYPE="Behavior" DEFAULT>
< EVENT NAME="onFifthBlink"/>
< /IMPLEMENTS>

< IMPLEMENTS TYPE="Automation">
< METHOD NAME="blink"/>
< PROPERTY NAME="x"/>
< PROPERTY NAME=y/>
< /IMPLEMENTS>

< SCRIPT LANGUAGE="javascript">
var msecs =2000;
var counter = 0;
style.position = "absolute";
style.pixelTop = x;
style.pixelLeft = y;


window.attachEvent("onload", onload);

function onload()
{
window.setTimeout(uniqueID+".blink()", msecs);
}

function blink() {
style.visibility = (style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
if (counter == 10) {
fireEvent("onFifthBlink");
counter = 0;
}
window.setTimeout(uniqueID+".blink()", msecs);
}

< /SCRIPT>
< /SCRIPTLET>
　　 HTML 调用者页面
　　 以下是 HTML 的调用者页面。注意我们是如何将 soccer 定义为样式表，并指到 soccer.sct，以及在 DHTML 标记 DIV 中引用样表式 (Behavior) 的：

< HTML>
< HEAD>
< STYLE>
.soccer{behavior:url(soccer.sct)}
< /STYLE>
< /HEAD>
< BODY>
< DIV CLASS="soccer" x="200" y="250" onFifthBlink = "alert('Fifth Blink Point')">< IMG SRC="soccer.gif">< /DIV>
< /BODY>
< /HTML>
　　 注意看调用者页面是多么简单。现在，所有的格式定义和动态位置调整都被封装并隐藏在 Behavior 定义文件即 soccer.sct 里。如果需要在同一窗口中添加更多的闪动足球，请参照我们前面提供的方法。

　　 结语

　　 本文我们讨论了Internet Explorer 5.x 中提供的最强大新功能之一：DHTML Behavior。阅读本文后，你应该了解如何在 Internet Explorer 5.x 中实现 DHTML Behavior、如何使用 Scriptlet 定义行为。使用 Scriptlet 定义行为包括接口定义和细节实现两个部分。我们演示了 Behavior 的源于面向对象语言的几个概念，比如：封装、代码共享、抽象和 API。

http://www.pcworld.com.cn/2001/back_issues/2119/1933.asp

在宿主页面中嵌入外部页面
刘筱
---- 如今在Internet上建立网站已经是很平常的事了，但是要做好却并不容易。除了要求网站的内容丰富、可读性强外，网站美观和艺术性也是不可缺少的。而做到美观的一个重要方面就是使整个网站具有统一的风格，并具有一致的导航结构及相关版权信息提示。

---- 在这方面，FrontPage的模板就是为统一规划网站整体风格而设计的。但使用FrontPage的这一功能也存在明显的缺点，即当需要改变网站风格时，要对所有的页面进行修改。如果网站的页面很多，逐一修改页面将是非常烦琐的工作。对于这种情况，制作者可以在服务器端(ASP)通过使用“include”包含指令来嵌入另一控制网站整体风格的页面来达到简化修改目的，这样在修改网站风格时，只须把嵌入的外部页面修改即可，而不用对网站中所有的页面进行修改。遗憾的是免费主页空间一般都不提供对ASP、PHP、CGI等支持，那么在宿主页面中嵌入外部页面的操作能否在客户端实现呢？如果能，又怎样实现呢？下面我们就谈谈在客户端实现在宿主页面中嵌入外部页面的各种方法，并讨论它们的优缺点。

一．应用框架技术

---- 要在宿主页面中嵌入外部页面的方法是，在宿主页面中包含外部页面的位置插入“< IFRAME name="XXX" width=X height=X frameborder=0 src="XXX.htm" >< /IFRAME >”语句即可(注意: < IFRAME >标签中的各种属性含义请查阅相关技术手册)。

---- 如果想在嵌入的外部页面过长时不出现滚动条，在外部文件< body >标签中加入“scroll=no”或者在宿主页面< IFRAME >标签中加入“scrolling=no”即可。

---- 但这样做会出现一个问题，就是宿主页面和外部页面背景色不同，这样会给人造成页面不是一个整体的感觉。这时，只要在引入的外部文件中使用和宿主页面相同的背景色就可以解决这一问题。注意，如果您使用的是IE 5.5或以上版本的话，直接在标签< IFRAME >内设置属性allowTransparency="true"(即框架背景透明)即可。

---- 在应用框架技术时，为什么不使用框架页面(即< FRAMESET >)呢？现在有很多网站是通过使用框架页面来分割版面的，并达到了统一网站整体风格的目的，但笔者的体会是框架页面的操作灵活性较差，不像内建框架(即< IFRAME >)这样可以在宿主页面中的任何位置插入。

二．使用Scriptlets组件技术

---- 应用这种技术的方法是在宿主页面中包含外部页面的位置插入“< OBJECT style="border: 0px" type="text/x-scriptlet" data="XXX.htm" width=X Height=X >< /OBJECT >”语句即可(注意: < OBJECT >标签中的各种属性含义请查阅相关技术手册)。

---- 在IE 5.0及以后版本中，scriptlets和Html组件(HTCs)被重新命名为Windows脚本编程组件(WSC)，其特点类似于上文所讲的框架技术。它有自己的不透明方形区域，并覆盖在宿主页面上，因此不能很平滑地用于具有纹理背景的宿主页面中，其工作方式类似于ActiveX控件，具有自己独立的事件、方法和属性。

三．使用脚本文件技术

---- 我们知道document.write方法可以在宿主页面中输出内容，这样就可以通过在宿主页面中引入外部脚本文件来达到嵌入外部页面的目的。方法是在宿主页面中包含外部页面的位置插入“< SCRIPT language="javascript" src="import.js" >< /SCRIPT >”，然后对外部页面进行改造，将每一行内容写入document.write中，并另外保存在扩展名为js的新文件中。

---- 这种方法的特点是外部页面不具有自己的方形区域，和宿主页面浑然一体，但由于外部页面内容全部写在脚本中，无法做到所见即所得，必须等到脚本运行时才能看到实际效果，这样就为修改调试增加了困难。

四．使用内置行为技术

---- 在IE 5.0及以后版本，引入了一项被称为“DHTML行为”的新功能，并在其中内置了许多默认行为。当将一种行为应用于宿主页面上的标准HTML元素时，它可以增强该元素的默认功能，并提供该行为中定义的任何新方法、属性或事件。其实大家对行为技术并不陌生，微电脑世界2001年18期的《主页加入收藏设置面面观》一文就提到了利用IE中内置的homepage行为技术进行主页设置的方法。我们同样可以利用IE 5.0内置的download行为，来达到在宿主页面中嵌入外部页面的目的，其代码如下。

---- < Span id=showImport >< /Span >
---- < IE: Download ID="oDownload" STYLE="behavior: url(#default#download)" / >
---- < Script >
---- function onDownloadDone(downDate){
---- showImport.innerHTML=downDate;
---- }
---- oDownload.startDownload('import.htm',onDownloadDone)
---- < /Script >

---- 其原理就是使用download行为提供的startDownload方法下载一个外部文本文件，并将文件中的文本内容作为参数传递给onDownloadDone函数，然后再由该函数对文本内容进行处理，在本例中是作为showImport对象的内容显示出来。如果在函数中对文本内容做相应的处理，并与相关技术结合，如XML，就可以实现更为复杂的功能。

---- 这种方法使得外部页面不再具有自己的方形区域，和宿主页面浑然一体; 提供了更大的灵活性，通过使用对象的innerHtml属性可以真正做到在宿主页面的任何位置插入外部文件内容; 修改简单，只须用可视网页编辑软件(如FrontPage 2000)将外部页面修改即可轻松改变网站整体风格。可以说这是在宿主页面中嵌入外部页面的最好方法 (注: 以上代码在Windows 98 SE/IE 5.0中测试通过)。