IE10标准模式不支持HTC (Html Components) ，升级重写Htc原有代码之一: 自定义属性
IE10标准模式不支持Htc(Html Components)已经是千真万确的事情了，如果浏览器升级到了IE10，那么原有的htc代码要怎么办呢？道路有二：
1.将htm页面设置为IE6, IE7, IE8等完全兼容htc的文档模式，这样在IE10下还是能跑htc的，IE9对htc已经有所抛弃了，所以不推荐设置为IE9的文档模式，具体见下文：
IE6-IE9兼容性问题列表及解决办法_补充之四：HTC (Html Components) 功能逐渐被IE抛弃
2.如果必须要将页面设置为IE10标准模式，那么，没得选择，就只能升级或重写htc代码了。
下文就是道路二的一个小Demo：
首先，先建好一个ie10_field_htc.htc, 里面就放一个自定义属性VisibilityOrHidden和它的get, put方法，这两个方法里本来可以写很多逻辑的，但简单起见，就各写了一句，代码如下：
<public:component>
<PUBLIC:PROPERTY NAME="VisibilityOrHidden" GET="getVisibilityOrHidden" PUT="putVisibilityOrHidden" />
<SCRIPT LANGUAGE="JScript">
function putVisibilityOrHidden(vValue) {
element.style.visibility = vValue
}
function getVisibilityOrHidden() {
return element.style.visibility
}
</SCRIPT>
</public:component>
然后，再来一个简单的ie10_field_htc.css文件，代码如下：
INPUT { behavior: url(ie10_field_htc.htc); }
最后，就是ie10_field_htc.htm文件了，这里写的IE=9，为的是在IE10下能正常跑这个功能：
<html> <head> <title id="1">asdf</title> <meta http-equiv="X-UA-Compatible" content="IE=9" /> <LINK type="Text/css" rel="stylesheet" href="ie10_field_htc.css"> </LINK> <script type="text/javascript"> function loaded() { document.getElementById("tid").VisibilityOrHidden = "hidden"; } </script> </head> <body onload="loaded()"> <div> <input type="text" id="tid" value="中国美国" /> </div> </body> </html>
有了这三个文件，一运行，就可以看到，因为我们设置了自定义的属性VisibilityOrHidden，所以页面里的input框不显示了，到现在为止，一切正常。
这时，将IE=9改为IE=10,然后再打开IE10浏览器一看，不出我们意料，这个页面果然就不行了，下面我们就开始升级重写htc里的代码。
这里用到了Js中的Object.defineProperty了，推荐资料：Object.defineProperty 函数 (JavaScript), http://technet.microsoft.com/zh-cn/sysinternals/dd548687
总之，用了它，就可以给任何一个javascript对象甚至dom元素添加扩展属性了。
废话不讲了，直接上代码，再创建一个ie10_field_htc.js文件，代码如下：
var Method_VisibilityOrHidden = { get: function () { return this.style.visibility }, set: function (val) { this.style.visibility = val } } //input if (!HTMLInputElement.prototype.hasOwnProperty("VisibilityOrHidden")) { Object.defineProperty(HTMLInputElement.prototype, "VisibilityOrHidden", Method_VisibilityOrHidden); }
当然，除Input外，象TextArea，Select这些元素如果也需要这个自定义属性，那么，就再添加爱一个HTMLTextAreaElement和HTMLSelectElement就好了，其他元素以此类推即可。
然后，将刚才的htm修改下，去掉引用htc的css，换成这个js，修改后代码如下：
<html>
<head>
<title id="1">asdf</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<script src="ie10_field_htc.js" type="text/javascript"></script>
<script type="text/javascript">
function loaded() {
document.getElementById("tid").VisibilityOrHidden = "hidden";
}
</script>
</head>
<body onload="loaded()">
<div>
<input type="text" id="tid" value="中国美国" />
</div>
</body>
</html>
然后再打开IE10，运行这个页面，哈哈，Bingo!
相关推荐
创建一个自定义组件需要在小程序的`components`目录下新建一个文件夹，用于存放该组件的代码。这个文件夹里包含四个文件：`.wxml`、`.wxss`、`.js`和`.json`。 - `.wxml`文件定义了组件的结构； - `.wxss`文件定义...
- **跨框架兼容**：Web Components标准是浏览器原生支持的，理论上在所有现代浏览器中都能运行，不受特定框架限制。 为了进一步学习和实践自定义标签，可以参考以下资源： - MDN Web Docs关于Web Components的教程...
在本文中，我们将深入探讨如何使用Sencha Touch框架自定义目录结构来创建你的第一个应用程序。Sencha Touch是一款强大的JavaScript框架，专为构建移动Web应用程序而设计。它提供了丰富的UI组件和数据管理工具，使得...
在Java编程领域，自定义控件（Custom Components）是开发者为了满足特定需求，扩展或定制标准GUI组件（如按钮、文本框等）的一种常见技术。本压缩包“基于java的生成自定义控件源代码.zip”显然包含了与创建自定义...
2. **浏览器兼容性**：虽然HTML5的大部分现代浏览器都支持自定义标签，但老版本的IE（尤其是IE9及以下）可能不支持。为确保跨浏览器兼容，可以使用JavaScript库如polyfill或使用Web Components技术（如Shadow DOM、...
虽然现在随着现代浏览器对Web Components标准的支持，HTC已经逐渐淡出视线，但在早期Web开发中，它曾是一种流行的解决方案。 本篇内容将带你入门HTC，了解其基本概念、使用方式以及与HTML和JavaScript的结合。首先...
HTML自定义元素是Web开发中的一个重要概念，它允许开发者创建自己的HTML标签，以扩展HTML语言的功能，实现更灵活、更具可复用性的网页结构。这一特性是Web Components技术的一部分，旨在提升前端应用的模块化和封装...
在Java编程领域，自定义控件（Custom Components）是开发者为满足特定需求，扩展标准GUI库功能而创建的独特用户界面元素。本资源“Java生成自定义控件源代码.zip”包含了一个实例，帮助开发者理解如何在Java中创建...
"CustomElements:自定义元素 Polyfill"就是这样一个工具，它为那些不支持自定义元素的浏览器提供了一个实现。 自定义元素的核心API包括： 1. **`window.customElements.define()`**：这个方法用于定义一个自定义...
在早期的Internet Explorer浏览器，即IE6、IE7和IE8，它们并不支持CSS3中的许多新特性，其中就包括了实现矩形元素圆角的方法。然而，开发者们通过一些技巧来模拟圆角效果，使得这些旧版IE浏览器也能呈现出类似的效果...
然而，需要注意的是，由于HTC是IE特有的技术，现代的Web浏览器（如Chrome、Firefox、Safari等）并不支持。随着Web标准的发展，CSS3和JavaScript的普及，HTC的重要性逐渐降低。如今，我们更倾向于使用JavaScript库...
然而，需要注意的是，随着现代浏览器对Web Components标准的支持，如Shadow DOM、Custom Elements和模板语法等，HTC组件的重要性逐渐降低，且只在IE浏览器中有效，这限制了它的广泛采用。现代Web开发更倾向于使用Vue...
在Android开发中，控件重写（View重写）是一项重要的技术，它允许开发者自定义UI组件，以满足特定的设计需求或实现独特的交互效果。本文将深入探讨Android控件重写的核心概念、步骤以及如何通过代码实现。 首先，...
虽然HTC在当时是一个创新的解决方案，但随着现代浏览器对Web标准（如HTML5和CSS3）的支持，以及跨平台兼容性的需求，HTC逐渐被更标准化的方法（如Web Components，CSS Shadow DOM，以及JavaScript框架）取代。...
但是，原生的rich-text组件可能不支持图片、视频和音频的直接展示与播放，因此需要通过自定义组件来扩展其功能。 五、自定义组件实现富文本功能 1. 图片展示：自定义组件可以通过接收JSON中的图片信息，使用uni-app...
本压缩包“Java生成自定义控件源代码.7z”中包含的文件很可能是一系列示例代码，帮助开发者学习如何在Java环境中创建自定义控件。 首先，理解Java中的控件（Components）：在Swing中，JComponent类是所有可绘制用户...
在网页开发中，HTML Control Architecture（HTC）是一种技术，它允许开发者通过脚本语言（通常是JavaScript）为HTML元素添加自定义的行为和样式。HTC的主要目标是扩展HTML的局限性，使网页能够实现更复杂的功能，而...
FAST（Fast Application State and Templating）是微软推出的一个开源Web UI框架，专注于提供高效、可访问性和可维护性的Web应用程序用户界面。这个框架基于Web Components技术，允许开发者创建可复用、可组合的UI...
本文将基于给定的"Custom Components"主题，深入探讨如何在Android中创建和使用自定义View，以及这一过程中的关键知识点。 首先，自定义View是在Android原生组件基础上进行扩展，以满足特定需求或实现特殊效果。...
总结起来，通过JavaScript开发自定义元素将数据表格升级为图表，不仅可以提供更直观的数据展示，还能提高代码的复用性和可维护性。这涉及到JavaScript的DOM操作、数据处理、图表库的使用以及Web组件的相关知识。了解...