Click here to Skip to main content
Click here to Skip to main content
Go to top

Update .htc (HTML Components) custom attributes to js since IE10 standard mode doesn't support htc again.

, 10 Jan 2013
Rate this:
Please Sign up or sign in to vote.
IE10 standard mode doesn't support htc (Html Components), so we have to update .htc code to js.

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
    }
}

//input
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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bob.LiuZhenDong
Software Developer (Senior) Microsoft China
China China
Consultant at Microsoft (China) Corporation Ltd.

Comments and Discussions

 
GeneralMy vote of 3 PingroupYashfi13-Jan-13 19:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 10 Jan 2013
Article Copyright 2013 by Bob.LiuZhenDong
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid