查看: 247|回复: 1

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

[复制链接]
发表于 5 天前 | 显示全部楼层 |阅读模式
在早期的Web开发中,微软的IE浏览器提供了一种名为HTC(HTML Components)的技术,允许开发者通过behavior属性将自定义脚本和样式封装成可复用的组件。本文将演示如何使用HTC制作一个简单的进度条控件,并给出完整的示例代码和调用方法。

一、HTC文件:ProgressBar.htc
创建ProgressBar.htc文件,代码如下:
  1. <PUBLIC:COMPONENT>
  2. <PUBLIC:METHOD NAME="Init" INTERNALNAME="fnCreateProgressBar" />
  3. <PUBLIC:METHOD NAME="showProgress" INTERNALNAME="showProgress" />
  4. <PUBLIC:PROPERTY NAME="Container"/>
  5. <PUBLIC:PROPERTY NAME="Speed"/>
  6. <SCRIPT LANGUAGE=javascript>
  7.     var startTime = null;
  8.     function fnCreateProgressBar(){
  9.         now = new Date();
  10.         startTime = now.getTime();
  11.         now = null;
  12.         oContainer = element.Container;
  13.         oContainer.innerHTML = "";
  14.         oDiv = window.document.createElement("DIV");
  15.         oDiv.className = "progress";
  16.         oContainer.appendChild(oDiv);
  17.         oDiv.style.display = "";
  18.         element.bar = oDiv;
  19.     }
  20.     function pause(numberMillis) {
  21.         var dialogScript = 'window.setTimeout( function () { window.close(); }, ' + numberMillis + ');';
  22.         var result = window.showModalDialog('javascript:document.writeln("<script>' + dialogScript + '<'+'/script>")');
  23.     }
  24.     function showProgress(StatesDesc){
  25.         now = new Date();
  26.         currTime = now.getTime();
  27.         now = null;
  28.         if(StatesDesc!=null) window.status = StatesDesc+"当前耗时:"+(currTime - startTime)+"毫秒!";
  29.         element.bar.style.width = (currTime - startTime) / element.Speed;
  30.         pause(1);
  31.     }
  32. </script>
  33. </PUBLIC:COMPONENT>
复制代码
说明:
- Init方法(内部调用fnCreateProgressBar)用于初始化进度条,在指定的Container容器中创建一个DIV,并命名为“progress”。
- showProgress方法根据当前时间与开始时间的差值动态设置进度条DIV的宽度,同时更新窗口状态栏显示描述信息和已耗时。
- pause方法利用showModalDialog弹出一个自动关闭的对话框,达到微秒级暂停效果(注意该方法会阻塞页面,且需要IE支持,实际开发中可考虑setInterval替代)。
- Speed属性用于控制进度条增长的速度(即时间差除以Speed得到像素宽度)。

二、CSS样式文件:ProgressBar.css
为进度条和HTC行为定义样式:
  1. .ProgressBar {
  2.     BEHAVIOR: url("ProgressBar.htc");
  3. }
  4. .progress{
  5.     position: relative;
  6.     width: 0px;
  7.     height: 20px;
  8.     z-index: 1;
  9.     background-color: #006699;
  10.     filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#006699,endcolorstr=#E3EFFF,gradientType=0);
  11.     border: 1px ridge #C0C0C0;
  12. }
复制代码
此处使用behavior属性将.ProgressBar类与HTC文件关联,使任何应用该类的元素自动获得进度条行为。内部进度条DIV(.progress)默认宽度为0,并应用蓝色渐变和边框。

三、调用示例HTML
创建一个测试页面,引入样式文件,并放置进度条控件容器和按钮:
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>进度条测试</title>
  5. <link rel="stylesheet" type="text/css" href="ProgressBar.css">
  6. <script>
  7. function Demo(){
  8.     PrgBar.Container = document.all.layer1;
  9.     PrgBar.Init();
  10.     for(var i=0;i<500;i++){
  11.         if(i%5==0) PrgBar.showProgress("操作进行中......");
  12.     }
  13.     PrgBar.showProgress("操作完成!");
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <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>
  19. <p><input type="button" value="测试" name="B3" onclick="Demo()"></p>
  20. <Progressbar id="PrgBar" class="ProgressBar" Speed="10"/>
  21. </body>
  22. </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的进度条控件,适合需要兼容旧系统的内部工具或遗留项目维护。
回复

使用道具 举报

发表于 5 天前 | 显示全部楼层

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

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

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

指导单位

江苏省公安厅

江苏省通信管理局

浙江省台州刑侦支队

DEFCON GROUP 86025

Hacking Group 021A

旗下站点

态势感知中心

应急响应中心

红盟安全

联系我们

官方QQ群:112851260

官方邮箱:security#ihonker.org(#改成@)

官方核心成员

关注微信公众号

Archiver|手机版|小黑屋| ( 沪ICP备2021026908号 )

GMT+8, 2026-6-14 04:20 , Processed in 0.028601 second(s), 17 queries , Gzip On, Redis On.

Powered by ihonker.com

Copyright © 2015-现在.

  • 返回顶部