初识HTC

最新推荐文章于 2025-08-10 19:50:19 发布

原创最新推荐文章于 2025-08-10 19:50:19 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#htc #function #浏览器 #javascript #html #脚本

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，这个标签是其他定义的父元素。

l <PUBLIC:PROPERTY NAME=”pName” GET=”getMethod” PUT=”putMethod” />：定义HTC的属性，里面三个定义分别代表属性名、读取属性、设置属性时HTC所调用的方法。

l <PUBLIC:METHOD NAME=”mName” />：定义HTC的方法，NAME定义了方法名。

l <PUBLIC:EVENT NAME=”eName” ID=”eId” />：定义了HTC的事件，NAME定义了事件名，ID是个可选属性，在HTC中唯一标识这个事件。

l <PUBLID:ATTACH EVENT=”sEvent” ONEVENT=”doEvent” />：定义了浏览器传给HTC事件的相应方法，其中EVENT是浏览器传入的事件，ONEVENT是处理事件的方法。

常用的HTC定义就这么多，有关更详细的信息，请参阅http://msdn.microsoft.com/library/default.asp?url=/workshop/components/htc/reference/htcref.asp，英文d，嘿嘿。

我们经常看到某些网页上有这样的效果：用户点击一个按钮，文本显示，再次点击这个按钮，文本消失，但浏览器并不刷新。下面我就用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>

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，注释写的比较清楚了，不再多解释了！

<head>

<?IMPORT namespace="frogone" implementation="switch.htc">

</head>

<body>

<frogone:Switch id="mySwitch"

TurnOffText="off"

TurnOnText="on"

status="off"

onStatusChanged="confirmChange()">

</frogone:Switch>

</body>

//相应开关事件

function confirmChange()

{

if(!confirm("是否改变开关状态?"))

mySwitch.reverseStatus();

}

</script>

</html>