HTC组件实现IE浏览器进度条控件的完整教程（附代码）

脚本专家 · 发表于 5 天前

在早期的Web开发中，微软的IE浏览器提供了一种名为HTC（HTML Components）的技术，允许开发者通过behavior属性将自定义脚本和样式封装成可复用的组件。本文将演示如何使用HTC制作一个简单的进度条控件，并给出完整的示例代码和调用方法。

一、HTC文件：ProgressBar.htc
创建ProgressBar.htc文件，代码如下：

<PUBLIC:COMPONENT>
<PUBLIC:METHOD NAME="Init" INTERNALNAME="fnCreateProgressBar" />
<PUBLIC:METHOD NAME="showProgress" INTERNALNAME="showProgress" />
<PUBLIC:PROPERTY NAME="Container"/>
<PUBLIC:PROPERTY NAME="Speed"/>
<SCRIPT LANGUAGE=javascript>
var startTime = null;
function fnCreateProgressBar(){
now = new Date();
startTime = now.getTime();
now = null;
oContainer = element.Container;
oContainer.innerHTML = "";
oDiv = window.document.createElement("DIV");
oDiv.className = "progress";
oContainer.appendChild(oDiv);
oDiv.style.display = "";
element.bar = oDiv;
}
function pause(numberMillis) {
var dialogScript = 'window.setTimeout( function () { window.close(); }, ' + numberMillis + ');';
var result = window.showModalDialog('javascript:document.writeln("<script>' + dialogScript + '<'+'/script>")');
}
function showProgress(StatesDesc){
now = new Date();
currTime = now.getTime();
now = null;
if(StatesDesc!=null) window.status = StatesDesc+"当前耗时:"+(currTime - startTime)+"毫秒!";
element.bar.style.width = (currTime - startTime) / element.Speed;
pause(1);
}
</script>
</PUBLIC:COMPONENT>

复制代码

说明：
- Init方法（内部调用fnCreateProgressBar）用于初始化进度条，在指定的Container容器中创建一个DIV，并命名为“progress”。
- showProgress方法根据当前时间与开始时间的差值动态设置进度条DIV的宽度，同时更新窗口状态栏显示描述信息和已耗时。
- pause方法利用showModalDialog弹出一个自动关闭的对话框，达到微秒级暂停效果（注意该方法会阻塞页面，且需要IE支持，实际开发中可考虑setInterval替代）。
- Speed属性用于控制进度条增长的速度（即时间差除以Speed得到像素宽度）。

二、CSS样式文件：ProgressBar.css
为进度条和HTC行为定义样式：

.ProgressBar {
BEHAVIOR: url("ProgressBar.htc");
}
.progress{
position: relative;
width: 0px;
height: 20px;
z-index: 1;
background-color: #006699;
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#006699,endcolorstr=#E3EFFF,gradientType=0);
border: 1px ridge #C0C0C0;
}

复制代码

此处使用behavior属性将.ProgressBar类与HTC文件关联，使任何应用该类的元素自动获得进度条行为。内部进度条DIV（.progress）默认宽度为0，并应用蓝色渐变和边框。

三、调用示例HTML
创建一个测试页面，引入样式文件，并放置进度条控件容器和按钮：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>进度条测试</title>
<link rel="stylesheet" type="text/css" href="ProgressBar.css">
<script>
function Demo(){
PrgBar.Container = document.all.layer1;
PrgBar.Init();
for(var i=0;i<500;i++){
if(i%5==0) PrgBar.showProgress("操作进行中......");
}
PrgBar.showProgress("操作完成!");
}
</script>
</head>
<body>
<div style="position: absolute; width: 612px; height: 19px; z-index: 1; left: 10px; top: 72px; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" id="layer1"></div>
<p><input type="button" value="测试" name="B3" onclick="Demo()"></p>
<Progressbar id="PrgBar" class="ProgressBar" Speed="10"/>
</body>
</html>

复制代码

在此示例中：
- 通过document.all.layer1获取容器div，将其赋给PrgBar.Container。
- 调用PrgBar.Init()初始化进度条。
- 循环500次模拟耗时操作，每5次调用showProgress更新进度。
- Speed="10"表示每毫秒进度条增加0.1像素（需根据实际耗时调整）。

四、注意事项
1. HTC是IE专有技术，仅支持IE5及以上版本，在Chrome、Firefox等现代浏览器中无法使用。
2. pause函数使用showModalDialog可能导致弹窗被拦截，并且会阻塞UI，建议实际项目中使用setInterval或requestAnimationFrame实现平滑进度动画。
3. 当前范例中进度条宽度直接等于耗时除以Speed，未做最大值限制，可增加判断避免超出容器宽度。

通过以上步骤，你可以在IE浏览器中快速实现一个基于HTC的进度条控件，适合需要兼容旧系统的内部工具或遗留项目维护。

热心网友4 · 发表于 5 天前

感谢楼主分享这么详细的HTC进度条教程！这段代码让我想起了早期IE时代的开发方式，虽然现在HTC技术基本已经退出历史舞台，但作为技术回顾还是很有价值的。有一个小建议：示例中的`pause`方法使用`showModalDialog`会阻塞页面，实际应用中如果追求更好的体验，可以考虑用`setInterval`或`requestAnimationFrame`来驱动进度更新，避免弹窗带来的干扰。另外，如果需要在现代浏览器兼容，可能得考虑改用CSS动画或Canvas来模拟进度条了。再次感谢楼主的分享！

HTC组件实现IE浏览器进度条控件的完整教程（附代码）

Re: HTC组件实现IE浏览器进度条控件的完整教程（附代码）

浏览过的版块

指导单位

旗下站点

联系我们