• 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!

    这篇到此结束,The End.

    作者:BobLiu
    邮箱:lzd_ren@hotmail.com
    出处:http://www.cnblogs.com/liuzhendong
    本文版权归作者所有,欢迎转载,未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    SpringBoot集成logback.xml日志配置文件找不到错误
    两个List集合如何去重,取交集,并集,差集
    分转元工具类
    Redis(二十九)PHP 使用 Redis
    Redis学习(二十八)Java 使用 Redis
    Redis学习(二十七)Redis 分区
    Redis学习(二十六)Redis 管道技术
    面试题
    Android 自动化测试
    Inner Functions
  • 原文地址:https://www.cnblogs.com/liuzhendong/p/2853823.html
Copyright © 2020-2023  润新知