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知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
自定义React Native组件一个高度可扩展的,黄油平滑的可重用组件,用于react-native初始项目的react native兼容。 由创建并维护 :red_heart: 由React本机组件使用lerna管理的React Native Components monorepo,可...
自定义日历聚合物组件,支持事件显示。 支持每月、每周、每天和列表视图。 演示 安装 使用安装组件: $ bower install event-calendar --save 或 。 用法 导入 Web Components 的 polyfill: < script src =...
向组件添加对CSS自定义属性(变量)的支持 安装 ember install ember-cli-custom-properties 产品特点 使用修饰符应用自定义属性 将组件属性映射到CSS自定义属性 快速,轻便的实施 仅在其绑定组件值更改时更新CSS...
快速组件 FAST自定义Form.io组件
其实,开发自定义标签并不需要Struts2的支持,一般情况下,只需要继承javax.servlet.jsp.tagext.BodyTagSupport类,重写doStartTag,doEndTag等方法即可。这里在实现自定义标签时,继承的2个类分别是org.apache....
visual Components软件渲染插件——Blender文档之一(备注:需要下载另一个之二文件一起,操作说明参考之三)
自定义HTML组件演示 测试自定义HTML组件。 安装 git clone https://github.com/tarvainen/custom-html-components-demo cd custom-html-components-demo yarn install yarn run serve
定制组件自定义vue SFC
导入自定义元素: < link rel =" import " href =" bower_components/video-bg/dist/video-bg.html " > 开始使用吧! < video-bg srcs = [ "video.mp4","video.ogg", "video.webm"] muted="muted" &...
这是一个存放微信小程序自定义组件的仓库wxapp-components-examples.zip
这不仅是引导css周围的webcomponents包装器,它的目的是提供一个干净,简单的重写,让每个webcomponents标准的新手都容易理解。 没有构建链/预处理器 通过CSS自定义属性允许轻松主题化 以属性的形式向最终用户提供...
仅支持自定义组件模式 date属性传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date() 通过 insert 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个...
HLF DOM扩展 __ __ ___/\ \ /\ \ / __\\ \ \_... 某些扩展还具有可通过自定义属性配置的示例和/或必需的样式。主要功能摘要: 基于悬停的“意图”,并防止冗余切换或DOM颠簸。 对一组触发器重复使用相同的技巧,以使DOM
添加自定义组件的方法
采用Pan来编写界面和控制代码,可以和原有的代码完全兼容、并存。 首先,是轻量化的Activity代码,主要通过Pan的工厂方法with,得到ViewModel的实例,绑定ViewModel和Controller到Activity上。工厂方法with有很多...
为地图创建自定义 HTML 元素 笔记 Mapbox 键和地图 ID 已被删除。 如果您想查看示例工作,则必须添加自己的。... html5rocks.com 上的自定义元素: http ://www.html5rocks.com/en/tutorials/webcomponents/customel
自定义元素存储 使用率 使用您的username , password和email : domy signup 从另一台计算机或使用另一个帐户登录系统: domy login 使用Stencil编译项目,并在发布后提交整个目录: domy publish --version ...
弯腰元素 自定义元素的集合。 最初设计用于 ,但可在... <hunch> :使用autofocus属性聚焦第一个子元素 <hunch> :轮播/滑块元素 <hunch> :延迟加载图像元素 <hunch> :响应式导航栏元素 <hunch> :选项卡容器元素