HTC是HTML Component的縮寫，是IE5及後續版本瀏覽器所支持的客戶端組件。HTC就是一組以DHTML爲基礎封裝了客戶端行爲的腳本，每HTC以*.htc的文件存儲，一個HTC是一個客戶端“類”。
編寫HTC最重要的一點是知道element對象的意思，它代表了當前的HTC，類似於C＃類中的this。例如element.innerHTML可以訪問當前HTC對象在document中所包含的html代碼。既然HTC是“類”，它當然有屬性、方法、事件，下面簡要說明其定義方式：
l <PUBLIC:COMPONENT></PUBLIC:COMPONENT>：定義HTC，這個標籤是其他定義的父元素。
2 <PUBLIC:PROPERTY NAME=”pName” GET=”getMethod” PUT=”putMethod” />： 定義HTC的屬性，裏面三個定義分別代表屬性名、讀取屬性、設置屬性時HTC所調用的方法。
3 <PUBLIC:METHOD NAME=”mName” />：定義HTC的方法，NAME定義了方法名。
4 <PUBLIC:EVENT NAME=”eName” ID=”eId” />：定義了HTC的事件，NAME定義了事件名，ID是個可選屬性，在HTC中唯一標識這個事件。
5 <PUBLID:ATTACH EVENT=”sEvent” ONEVENT=”doEvent” />：定義了瀏覽器傳給HTC事件的相應方法，其中EVENT是瀏覽器傳入的事件，ONEVENT是處理事件的方法。
常用的HTC定義就這麼多，嘿嘿。
我們經常看到某些網頁上有這樣的效果：用戶點擊一個按鈕，文本顯示，再次點擊這個按鈕，文本消失，但瀏覽器並不刷新。下面我就用HTC來實現這個簡單效果。編程思路是這樣的：用HTC模擬一個開關，它有”on”和”off”兩種狀態（可讀/寫屬性status）；用戶可以設置這兩種狀態下開關所顯示的文本（設置屬性 turnOffText和turnOnText）；用戶點擊開關時，開關狀態被反置，並觸發一個事件（onStatusChanged）通知用戶，用戶可以自己寫代碼來響應這個事件；該HTC還定義了一個方法（reverseStatus），用來反置開關的狀態。下面是這個HTC的代碼：
<!—switch.htc定義 -->
<PUBLIC:COMPONENT TAGNAME="Switch">
<!--屬性定義-->
<PUBLIC:PROPERTY NAME="turnOnText" PUT="setTurnOnText" VALUE="Turn on" />
<PUBLIC:PROPERTY NAME="turnOffText" PUT="setTurnOffText" VALUE="Turn off" />
<PUBLIC:PROPERTY NAME="status" GET="getStatus" PUT="setStatus" VALUE="on" />
<!--定義事件-->
<PUBLIC:EVENT NAME="onStatusChanged" ID="changedEvent" />
<!--定義方法-->
<PUBLIC:METHOD NAME="reverseStatus" />
<!--關聯客戶端事件-->
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="initialize()"/>
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="expandCollapse()"/>
</PUBLIC:COMPONENT>
<!-- htc腳本 -->
<script language="javascript">
var sTurnOnText; //關閉狀態所顯示的文本
var sTurnOffText; //開啓狀態所顯示的文本
var sStatus; //開關狀態
var innerHTML //使用開關時包含在開關中的HTML
//設置開關關閉狀態所顯示的文本
function setTurnOnText(value)
{
sTurnOnText = value;
}
//設置開關開啓狀態所顯示的文本
function setTurnOffText(value)
{
sTurnOffText = value;
}
//設置開關狀態
function setStatus(value)
{
sStatus = value;
}
//讀取開關狀態
function getStatus()
{
return sStatus;
}
//反向開關的狀態
function reverseStatus()
{
sStatus = (sStatus == "on") ? "off" : "on";
}
//獲取htc控制界面html文本
function getTitle()
{
var text = (sStatus == "on") ? sTurnOffText : sTurnOnText;
text = "<div id='innerDiv'>" + text + "</div>";
return text;
}
//htc初始化代碼
function initialize()
{
//back up innerHTML
innerHTML = element.innerHTML;
element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();
}
//響應用戶鼠標事件的方法
function expandCollapse()
{
reverseStatus();
//觸發事件
var oEvent = createEventObject();
changedEvent.fire(oEvent);
var srcElem = element.document.parentWindow.event.srcElement;
if(srcElem.id == "innerDiv")
{
element.innerHTML = (sStatus == "on") ? getTitle() + innerHTML : getTitle();
}
}
</script>
下面是如何使用這個HTC，註釋寫的比較清楚了，不再多解釋了！
<!--learnhtc.html-->
<html xmlns:frogone><!--定義一個新的命名空間-->
<head>
<!--告訴瀏覽器命名空間是由哪個HTC實現的-->
<?IMPORT namespace="frogone" implementation="switch.htc">
</head>
<body>
<!--設置開關的各個屬性及內部包含的內容-->
<frogone:Switch id="mySwitch"
TurnOffText="off"
TurnOnText="on"
status="off"
onStatusChanged="confirmChange()">
<div id="dBody">文本內容...... </div>
</frogone:Switch>
</body>
<script language="javascript">
//相應開關事件
function confirmChange()
{
if(!confirm("是否改變開關狀態?"))
mySwitch.reverseStatus();
}
</script>
</html>
