Introduction
Since IE10 standard mode doesn't support htc (Html Components), we have to update .htc code to js.
The article can update .htc custom attribute to pure js code.
Background
Since IE10 standard mode doesn't support htc (Html Components), how to make .htc code still can run in IE10?
There are two ways:
1. Set X-UA-Compatible to IE6 or IE7 or IE8 can make the .htc still working under IE10.
The code like that:
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=6" />
</head>
<body>
<h1>mouse</h1>
</body>
</html>2.Rewrite or update .htc code to js or JQuery code, the rest of the article will illuminate the way.
Using the code
1. Let's create a ie10_field_htc.htc.
Set a custom attribute named "VisibilityOrHidden", and set/get function, please see blow:
<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>2. Create a ie10_field_htc.htm file.
It use ie10_field_htc.htc through css behavior.
<html>
<head>
<title ></title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
h1{ behavior: url(ie10_field_htc.htc) }
</style>
<script type="text/javascript">
function loaded() {
document.getElementById("tid").VisibilityOrHidden = "hidden";
}
</script>
</head>
<body onload="loaded()">
<div>
<input type="text" id="tid" value="China and the US" />
</div>
</body>
</html>3. Let's run the ie10_field_htc.htm page under IE10, as you see, the "tid" input disppear. it's ok for now.
4. Let's change the IE=9 to IE=10，and re-run it in IE10, you will see the "tid" input can't disppear, because IE10 standard mode doesn't support htc again.
5. How to deal with it?
In this case, we need to use Js Object.defineProperty to add a custom attribute to an object or a dom element, please refer http://technet.microsoft.com/zh-cn/sysinternals/dd548687
6. Let's create a ie10_field_htc.js
var Method_VisibilityOrHidden = {
get: function () {
return this.style.visibility
},
set: function (val) {
this.style.visibility = val
}
}
if (!HTMLInputElement.prototype.hasOwnProperty("VisibilityOrHidden")) {
Object.defineProperty(HTMLInputElement.prototype, "VisibilityOrHidden", Method_VisibilityOrHidden);
}Of course, you can add the custom attribute for HTMLTextAreaElement and HTMLSelectElement, and so on.
7. Let's change the htm page
<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="China and the US" />
</div>
</body>
</html>8. Re-run the htm page under IE10, you will see the "tid" input dispper again, it works! Bingo!
