菜单

IE Firefox 使用自定义标签的差异

2019年3月14日 - Json

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

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

初稿出处:
司徒正美   

或是以往前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。今后Web
Component还唯有webkit支持。但三个零件库,还索要贰个独特的标识它们是一块的。可是这些XML已经帮大家化解了,使用scopeName,如”<xxx:dialog>”。在小编再而三往下想什么处理怎么样为那些标签绑定数据,与其他零件通信,管理生命周期,等等大事从前,作者还有二个只可以面对的题材,正是如何包容IE6-8!

譬如以下八个页面:

manbetx2.0手机版 1

在chrome, firefox, IE11, IE11的IE6兼容情势分别如下:

manbetx2.0手机版 2
manbetx2.0手机版 3
manbetx2.0手机版 4
manbetx2.0手机版 5

manbetx2.0手机版,大家会发觉IE6下实际是多出无数标签,它是把闭标签也改为二个独门的成分节点

manbetx2.0手机版 6

以此AA:DIV标签被开膛破肚,里面子节点全部暴出来,成为其兄弟节点了。因而想兼容它,就要费点劲。有个八个意况供给考虑,1是用户已经将它写在页面上,意况同上;2是用户是将它位于字符串模版中,那么些用正则消除。可是正则假若碰撞复杂的属性名,照旧会晕掉。因而作者要么打算动用原生的HTML
parser。换言之,字符串,笔者只怕会将它成为节点。这么办呢?!作者想了众多格局,后来要么选取VML的命名空间法化解!

咱俩将地点的页面改复杂点,再看看效果!

manbetx2.0手机版 7
manbetx2.0手机版 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 收藏
评论

manbetx2.0手机版 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地图