菜单

自定义标签在IE6-8的困境

2019年3月11日 - JavaScript

自定义标签在IE6-8的窘况

2015/07/20 · HTML5 ·
IE,
自定义标签

原稿出处:
司徒正美   

只怕未来前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。今后Web
Component还只有webkit援助。但2个零部件库,还须要3个特有的标识它们是一块的。不过这一个XML已经帮大家消除了,使用scopeName,如”<xxx:dialog>”。在本身继续往下想如何处理如何为这么些标签绑定数据,与其余零件通讯,管理生命周期,等等大事以前,我还有二个只能面对的题材,正是如何兼容IE6-8!

manbetx网页手机登录版,比如以下多个页面:

manbetx网页手机登录版 1

在chrome, firefox, IE11, IE11的IE6兼容形式分别如下:

manbetx网页手机登录版 2
manbetx网页手机登录版 3
manbetx网页手机登录版 4
manbetx网页手机登录版 5

咱俩会发现IE6下实际是多出累累标签,它是把闭标签也变为3个独自的因素商点

manbetx网页手机登录版 6

这些AA:DIV标签被开膛破肚,里面子节点全体暴出来,成为其兄弟节点了。由此想包容它,就要费点劲。有个四个情状供给考虑,1是用户已经将它写在页面上,意况同上;2是用户是将它放在字符串模版中,这一个用正则解决。然则正则借使撞倒复杂的属性名,依然会晕掉。由此小编要么打算采纳原生的HTML
parser。换言之,字符串,小编或许会将它成为节点。这么办吧?!小编想了诸多主意,后来要么接纳VML的命名空间法化解!

笔者们将方面包车型地铁页面改复杂点,再看看效果!

manbetx网页手机登录版 7
manbetx网页手机登录版 8

能够看看其套嵌关系未来完全正确,并且标签名不会大写化,也不会转移多余节点!

好了,大家再判定一下是不是为自定义标签,也许纯粹地说,这一个节点是或不是我们组件库中定义的自定义标签。有些情形下,三个页面能够存在多套组件库,包含avalon的,ploymer的,可能是一向用Web
Component写的。

avalon的机件库将使用命名空间,那样就好界别开。在IE6-9中,判定element.scopeName是或不是为aa(那是组件库的命名空间,你可以改个更了不起上的名字),在此外浏览器判定此因素的localName是还是不是以aa:开端就行了!

JavaScript

function isWidget(el, uiName){ return el.scopeName ? el.scopeName ===
uiName: el.localName.indexOf(uiName+”:”) === 0 }

1
2
3
function isWidget(el, uiName){
  return   el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0
}

那一个难点消除后,大家就足以开搞基于自定义标签的UI库了!

1 赞 1 收藏
评论

manbetx网页手机登录版 9

1.firefox和IE的自定义标签能够通过以下样式进行合并
<html XMLNS=”http://www.w3.org/1999/xhtml
XMLNS:TEST=”//www.jb51.net”>
2.自定义标签的的概念也能够拓展合并
<TEST:mylabel value=”mylabel”/>
<TEST:mylabel value=”mylabel2″></TEST:mylabel>
3.js收获自定义标签的值就有分别了(纵然有联合的点子,请务必留言)
function f_test(){
var mylabels;
if(IE)//如果是ie
mylabels = document.getElementsByTagName(“mylabel”);
else//如果是FF
mylabels = document.getElementsByTagName(“TEST:mylabel”);
}

您也许感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图