自定义标签在IE6-8的泥沼

2015/07/20 · 自定义标签在IE6,使用自定义标签的区别。HTML5 ·
IE,
自定义标签

原来的书文出处:
司徒正美   

可能以后前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。未来Web
Component还唯有webkit支持。但3个零件库,还需求三个独特的标识它们是一块的。不过这些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

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

好了,大家再判定一下是或不是为自定义标签,也许纯粹地说,这些节点是不是大家组件库中定义的自定义标签。某些景况下,3个页面能够存在多套组件库,包涵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=””
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”);
}

1.firefox和IE的自定义标签能够因而以下样式进行合并
<html XMLNS=””
XMLNS:TEST=”;
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”);
}

自定义标签类,自定义标签

选择标签能够替换jsp页面上的剧本,让页面特别简洁,维护特别便于,扩大程序安全性。

在javaee
api中有八个接口javax.servlet.jsp.tagext.JspTag,它是独具的价签的根接口。

在jsp2.0过后,定义了二个进一步简便易行的javax.servlet.jsp.tagext.SimpleTag,那么些接口就讲述了什么自定义标签。

标签的归类:

  • 价值观标签
  • 不难标签SimpleTag

SimpleTag体系

     SimpleTag有二个达成类SimpleTagSupport,自定义标签类一般会三番五次它。

概念1个标签的步骤:

关于SimpleTag接口的主意描述

  • doTag方法它的效益:描述标签的效益 (会被电动调用)
  • setJspContext:它的参数是JspContext,它的效率是将页面包车型地铁pageContext对象传递到标签类中。(一点都不小用处,用于获取其余八大对象)
  • setJspBody:将标签体的情节缓存到内部存款和储蓄器对象中,而参数JspFragment
    也正是标签体内容。
  • getParent  setParent 将标签的父标签引入。(基本不用)

 

你也许感兴趣的篇章:

  • 在asp.net(C#)中动用自定义标签和XML、XSL展现数据
  • jsp 自定义标签实例
  • JSP自定义标签Taglib达成进程重点总括
  • jsp自定义标签技术(完成原理与代码以及平台搭建步骤)
  • JSP自定义标签获取用户IP地址的法子
  • jsp简单自定义标签的forEach遍历及转义字符示例
  • ThinkPHP模板自定义标签使用办法
  • ThinkPHP分组下自定义标签库实例
  • JSP自定义标签rtexprvalue属性用法实例分析
  • JSP自定义标签基础知识学习

html XMLNS=””
XMLNS:TEST=”” 2.自定义标签的的定义也得以进…

上面是一个自定义标签类:(用于是二个反复打字与印刷标签体内容的 java 类)

package online.mytag;

import java.io.IOException;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.SimpleTagSupport;

public class PrintTag extends SimpleTagSupport {

    private int count;   //这里的字段,要在 .tld 文件中使用的话,就必须提供 get/set 方法

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }
    //打印
    @Override
    public void doTag() throws JspException, IOException {
        String str = getJspBody().toString();
        JspWriter out = getJspContext().getOut();
        for (int i = 0; i < count; i++) {
            out.write(str);
        }
    }
}
网站地图xml地图