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

或许未来前端组件化之路都是自定义标签，但这东西早在20年前，JSTL已在搞了。现在Web Component还只有webkit支持。但一个组件库，还需要一个特殊的标识它们是一块的。不过这个XML已经帮我们搞定了，使用scopeName，如"<xxx:dialog>"。在我继续往下想如何处理如何为这个标签绑定数据，与其他组件通信，管理生命周期，等等大事之前，我还有一个不得不面对的问题，就是如何兼容IE6-8！

比如以下一个页面：

在chrome, firefox, IE11, IE11的IE6兼容模式分别如下：

我们会发现IE6下实际是多出许多标签，它是把闭标签也变成一个独立的元素节点

这个AA:DIV标签被开膛破肚，里面子节点全部暴出来，成为其兄弟节点了。因此想兼容它，就要费点劲。有个两个情况需要考虑，1是用户已经将它写在页面上，情况同上；2是用户是将它放在字符串模版中，这个用正则搞定。不过正则要是碰上复杂的属性名，还是会晕掉。因此我还是打算使用原生的HTML parser。换言之，字符串，我还是会将它变成节点。这么办呢？！我想了许多办法，后来还是使用VML的命名空间法搞定！

我们将上面的页面改复杂点，再看看效果！

可以看到其套嵌关系现在完全正确，并且标签名不会大写化，也不会生成多余节点！

好了，我们再判定一下是否为自定义标签，或者准确地说，这个节点是否我们组件库中定义的自定义标签。某些情况下，一个页面可以存在多套组件库，包括avalon的，ploymer的，或者是直接用Web Component写的。

avalon的组件库将使用命名空间，这样就好区别开。在IE6-9中，判定element.scopeName是否为aa(这是组件库的命名空间，你可以改个更高大上的名字)，在其他浏览器判定此元素的localName是否以aa:开头就行了！

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

这个难题解决后，我们就可以开搞基于自定义标签的UI库了！

时间： 2024-10-27 14:20:05

自定义标签在IE6-8的困境的相关文章

HTML自定义标签与标签自定义属性

大部分浏览器支持自定义HTML标签和为标准标签自定义属性,而且很多浏览器对这两种自定义行为的支持都很直接了当. 自定义HTML标签 在firefox.chrome这种现代浏览器里,自定义标签很简单,就像标准的标签那样写就可以了,而且CSS和JavaScript存取自定义标签和标准标签并无二致. 1 2 3 4 5 6 7 8 9 <foo id="idFoo" style="color:red" data-bar="bar">foo

JSP自定义标签

假设 向浏览器输出当前客户的IP地址 ,我们现在可以这样写 <% //获取当前用户的IP地址 String ip=request.getRemoteHost(); out.print("当前用户的IP地址是:"+ip); %> 但我们现在为了要在jsp页面尽量减少java代码,这个时候我们可以向前面学标签一样,自己来定义一个标签,通过调用标签来达到实现显示客户端的ip地址. 首先第一步我们要创建一个普通的java类,继承SimpleTagSupport类,叫标签处理器类(用

Javaweb学习笔记6—EL表达式与JSTL及自定义标签

 前几天博客被黑了,导致博客登陆不上,把前几天应该发的东西的东西重新发一遍 今天来讲javaweb的第六阶段学习. EL表达式与JSTL及自定义标签是对上篇文章介绍的JSP的扩展,不能说是很重要的东西,但是也要了解. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思维是用的xMind画的,如果你对我的思维导图感兴趣并且想看到你们跟详细的备注信息,请点击下载 另外:如果图看不清的话请右击---在新窗口中打开会清楚很多. 一.EL表达式 1,EL简介 Expression Lan

JSP自定义标签渲染时报Illegal to flush错误

javax.servlet.ServletException:Illegal to flush within a custom tag 此错误是因为在JSP页面中的某一个自定义标签的doStartTag或doEndTag中用了out.flush,而其他的自定义标签没有导致.可以去掉out.flush. JSP自定义标签渲染时报Illegal to flush错误,布布扣,bubuko.com

java jsp自定义标签

自定义标签开发步骤 1)编写一个普通的java类,继承SimpleTagSupport类,叫标签处理器类 package gz.itcast; import java.io.IOException; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.SimpleTagSupport; public class iftag extends SimpleTagSupport { private boolean

zTree更新自定义标签&gt;&gt;&gt;

zTree>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> x 本来想自己敲一个zTree的例子的>>> 但是一想zTree文档做的这么好,直接拷贝过来一个得了... 哈哈>>> <!DOCTYPE html> <html> <head> <

自定义标签

1 如果在jsp页面中写java代码 是很不合适的 而且坏处很多像这样: <%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@page import="com.atguigu.javaweb.Customer"%><%@ page language="java" contentType=&q

自定义标签-自定义注解

首先是4个自定义注解类StaticResourceType.java public enum StaticResourceType { LESS,CSS,JS} StaticResource.java @Target({ElementType.FIELD})@Retention(RetentionPolicy.RUNTIME)public @interface StaticResource { StaticResourceType type(); String path(); Dependenc

讲解JSP自定义标签

一.基本概念 1.标签(Tag) 标签是一种XML元素,通过标签可以使JSP网页变得简洁并且易于维护,还可以方便地实现同一个JSP文件支持多种语言版本.由于标签是XML元素,所以它的名称和属性都是大小写敏感的. 2.标签库(Tag library) 由一系列功能相似.逻辑上互相联系的标签构成的集合称为标签库. 3.标签库描述文件(Tag Library Descriptor) 标签库描述文件是一个XML文件,这个文件提供了标签库中类和JSP中对标签引用的映射关系.它是一个配置文件,和web.xm