菜单

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

2019年9月28日 - JavaScript

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

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

原稿出处:
司徒正美   

想必现在前端组件化之路都是自定义标签,但那东西早在20年前,JSTL已在搞了。未来Web
Component还唯有webkit协助。但贰个零件库,还要求贰个特殊的标志它们是一块的。可是这么些XML已经帮我们解决了,使用scopeName,如”<xxx:dialog>”。在自己三番五次往下想怎么样管理如何为这一个标签绑定数据,与其余零件通信,管理生命周期,等等大事在此以前,作者还大概有叁个只可以面临的标题,就是什么宽容IE6-8!

比如以下一个页面:

图片 1

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

图片 2
图片 3
图片 4
图片 5

小编们会发觉IE6下实际是多出相当多标签,它是把闭标签也化为叁个独立的要初秋点

图片 6

其一AA:DIV标签被开膛破肚,里面子节点全部暴出来,成为其兄弟节点了。由此想包容它,将要费点劲。有个五个情景必要记挂,1是客商已经将它写在页面上,景况同上;2是顾客是将它位于字符串模版中,这些用正则化解。然而正则即使冲击复杂的属性名,照旧会晕掉。由此小编照旧筹划采纳原生的HTML
parser。换言之,字符串,小编或然会将它变成节点。这么办呢?!小编想了多数措施,后来依旧利用VML的命名空间法消除!

笔者们将地点的页面改复杂点,再看看效果!

图片 7
图片 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 收藏
评论

图片 9

1.firefox和IE的自定义标签能够经过以下样式举办联合
<html XMLNS=”http://www.w3.org/1999/xhtml
XMLNS:TEST=”http://www.jb51.net"&gt;
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”);
}

http://www.bkjia.com/Javascript/317837.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/317837.htmlTechArticle1.firefox和IE的自定义标签可以通过以下样式进行统一
html XMLNS=”http://www.w3.org/1999/xhtml
XMLNS:TEST=”http://www.jb51.net” 2.自定义标签的的概念也能够进…

相关文章

发表评论

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

网站地图xml地图