IE10标准模式不支持HTC (Html Components) ，升级重写Htc原有代码之一: 自定义属性
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!
