htc-CSDN博客

初探 HTML 组件 - HTC 概述

作者：Weber 出处：HTMLCN

从 Internet Explorer 5 开始引入了 HTML 组件的概念， HTML 组件也是 Internet Explore 5.5 一个革命性的突破。Microsoft 的目的是用它取代 ActiveX 控件。HTML 组件是封装的对象，也像 ActiveX 控件一样是“自包含”的，可以在开发完后发布给任何人。HTC 文件并不仅仅是将一个 HTML 文件的扩展名换成 .htc，它含有脚本和 HTC 定制元素的集合。

在 HTML 文件中，HTC 拥有和页面中其他的 DHTML 元素一样的访问方式。这就意味着所有 HTC 元素都可以通过 id 属性在脚本中调用，也就是说 HTC 元素的属性、方法都可以通过脚本来进行灵活的运用。

您可以通过下面几种方式来执行 DHTML 行为：

定义属性和方法。在 HTC 中分别使用 PUBLIC:PROPERTY 和 PUBLIC:METHOD 元素来定义 HTC 的属性和方法。
定义事件：通过 EVENT 元素定义，使用元素的 fire () 方法在它们所在的页面里引发这些事件。事件的环境可以通过 createEventObject () 方法设置。
在它们所在的页面里访问 DHTML 对象模型。HTC 中的 object 元素返回它所附属的元素，通过这个对象，HTC 能访问他所在的文档及其对象模型 (属性、方法和事件)。
接受通报。当使用 ATTACH 元素时，浏览器向 HTC 通报标准 DHTML 事件和两个 HTC 专有事件，oncontentready 和 ondocumentready。

初探 HTML 组件 - 创建一个 HTC

作者：Weber 出处：HTMLCN
创建一个 HTC

下面通过创建一个鼠标滑过加亮显示的 HTC 来演示一下创建 HTC 的过程。 1、创建 HTC 文件的架构。一个标准的 HTC 文件含有一个 SCRIPT 块和一对可选的 COMPONENT 标记。

<PUBLIC:COMPONENT>
        <SCRIPT>
        </SCRIPT>
</PUBLIC:COMPONENT>

2、写一个可执行的脚本。
在下面的代码中，ATTACH 被用于设置 HTC 接收元素在 onmouseover 和 onmouseout 事件被触发的消息。它通知 HTC 通过切换颜色来体现鼠标滑过元素时的加亮效果。
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT=/"onmouseover/" ONEVENT=/"Hilite()/" />
<PUBLIC:ATTACH EVENT=/"onmouseout/"  ONEVENT=/"Restore()/" />
<SCRIPT LANGUAGE=/"JScript/">
   var normalColor, normalSpacing;

   function Hilite()
   {
     // save original values
     normalColor  = runtimeStyle.color;
     normalSpacing= runtimeStyle.letterSpacing;

     runtimeStyle.color  = /"red/";
     runtimeStyle.letterSpacing = 2;
   }

   function Restore()
   {
     // restore original values
     runtimeStyle.color  = normalColor;
     runtimeStyle.letterSpacing = normalSpacing;
   }
</SCRIPT>
</PUBLIC:COMPONENT>

注意：您可以直接使用属性、方法或者是事件的名称来访问它们，并不需要在前面加上 element 的前缀。在前面的例子中我们注意到在切换颜色时我们直接调用了 runtimeStyle ，而不是使用 element.runtimeStyle。

3、一旦执行，这个 HTC 就能在网页中应用来达到鼠标滑过加亮的效果。

<HEAD>
<STYLE>
   LI {behavior:url(hilite.htc)}
</STYLE>
</HEAD>

<P>Mouse over the two list items below to see this effect.
<UL>
  <LI>HTML Authoring</LI>
  <LI>Dynamic HTML</LI>
</UL>

初探 HTML 组件 - 定义方法

作者：Weber 出处：HTMLCN
定义方法

我们可以使用 PUBLIC:METHOD 元素来定义 HTC 的方法集，如下例所示：

<PUBLIC:METHOD NAME="startFlying" />

当我们定义了一个方法后，我们就可以在 HTC 中直接来调用它。请看下面的例子：

<PUBLIC:METHOD NAME="tick" />
<PUBLIC:METHOD NAME="startFlying" />

HTC知识

:
<SCRIPT LANGUAGE="JScript">
var currCount;
var flyCount;
var flying;
var msecs;

var oTop, oLeft;
msecs = 50;
flyCount = 20;
flying = false;

runtimeStyle.position = "relative";
runtimeStyle.visibility = "hidden";

window.attachEvent("onload", onload);

function onload()
{
// delay commences from the window.onLoad event
  if (delay != "none")
  {
     window.setTimeout(uniqueID+".tick()", delay);
  }
}

function tick()
{
   if (flying == false)
   {
      startFlying();
   }
   else
   {
      doFly();
   }
}

function startFlying()
{
  if (fromX==null && fromY==null)
  {
     if (from=="top")
     {
       runtimeStyle.posTop = -offsetTop-offsetHeight;
     }
     else if (from=="bottom")
     {
       runtimeStyle.posTop = element.document.body.clientHeight;
     }
     else if (from=="right" )
     {
       runtimeStyle.posLeft = element.document.body.clientWidth;
     }
     else
     {
       runtimeStyle.posLeft = -offsetLeft-offsetWidth;
     }
  }
  else
  {
     runtimeStyle.posTop = fromY;
     runtimeStyle.posLeft = fromX;
  }

  runtimeStyle.visibility = "visible";
  flying = true;

  oTop = runtimeStyle.posTop;
  oLeft = runtimeStyle.posLeft;

  currCount = 0;
  doFly();
}

function doFly()
{
  var dt, dl;

  currCount++;
  dt = oTop / flyCount;
  dl = oLeft / flyCount;

  runtimeStyle.posTop -= dt;
  runtimeStyle.posLeft -= dl;

  if (currCount < flyCount)
  {
      window.setTimeout(uniqueID+".tick();", msecs);
  }
  else
  {
      runtimeStyle.posTop = 0;
      runtimeStyle.posLeft = 0;
      flying = false;
      evObj = createEventObject();
      evObj.setAttribute("resulty", uniqueID);
      finished.fire(evObj);
  }
}
</SCRIPT>

初探 HTML 组件 - 定义事件

作者：Weber 出处：HTMLCN
<p><b>定义事件</b>
<p>要在 HTC 中定义一个事件，我们需要用到 PUBLIC:EVENT 元素。当我们定义了一个事件后，我们就可以在 HTC 的所在页中来调用它。
<p>在下面的例子中来示范如何实现一个计算器的功能。在 HTC 中我们使用 EVENT 元素定义了一个 onResultChange 事件。当在所在页中激活 onResultChange 事件时，HTC 将计算出结果并返回到所在页。
<xmp>
<PUBLIC:EVENT NAME=onResultChange ID=rcID />
<SCRIPT LANGUAGE="JScript">
:
oEvent = createEventObject();
oEvent.result = sResult;
rcID.fire (oEvent);
:
</SCRIPT>
</xmp>
<p>下面是含有这个 HTC 的页面：
<xmp>
<HTML XMLNS:InetSDK>
<HEAD>
<TITLE>Calculator Sample</TITLE>

<STYLE>
INPUT {font-family: Courier New}
@media all {
InetSDK:CALC {behavior:url(Engine.htc)}
}
</STYLE>

<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
</HEAD>

<BODY BGCOLOR="<BLOCKQUOTE CLASS="body">

<P>
<InetSDK:CALC id="myCalc" onResultChange="resultWindow.innerText =window.event.result">
<TABLE>
<TR>
<TD COLSPAN=5>
<DIV ID="resultWindow" STYLE="padding:5; background-color:buttonface" ALIGN="RIGHT">0.</DIV>
</TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 7 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 8 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 9 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" / "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" C "></TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 4 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 5 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 6 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" * "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" % " DISABLED></TD>
</TR>
<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 1 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 2 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" 3 "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" - "></TD>
<TD><INPUT TYPE=BUTTON VALUE="1/x" DISABLED></TD>
</TR>

<TR>
<TD><INPUT TYPE=BUTTON VALUE=" 0 "></TD>
<TD><INPUT TYPE=BUTTON VALUE="+/-"></TD>
<TD><INPUT TYPE=BUTTON VALUE=" . "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" + "></TD>
<TD><INPUT TYPE=BUTTON VALUE=" = "></TD>
</TR>
</TABLE>
</InetSDK:CALC>
</BLOCKQUOTE>
</BODY>
</HTML>
</xmp>
<p>注意：本文的所有例子都需要在 IE5 以上版本的浏览器中才能看到应有的效果。