自定义标签在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=””
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”);
}

自定义标签 怎么着 嵌套自定义标签
[size=large]自定义标签如何嵌套自定义标签吗?

<定义标签>
<定义标签>
<定义标签/>
</定义标签>
</定义标签>
这种样式该怎么落实呢?
怎么着在标签中拿到子标签?多谢 我们了[/size]

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

使用标签可以轮换jsp页面上的台本,让页面越发简明,维护特别有益,扩展程序安全性。

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

在jsp2.0随后,定义了三个越来越简便易行的javax.servlet.jsp.tagext.SimpleTag,这几个接口就陈说了哪些自定义标签。

标签的分类:

  • 理念标签
  • 简单易行标签SimpleTag

SimpleTag体系

     SimpleTag有叁个完结类SimpleTagSupport,自定义标签类平日会一连它。

概念一个标签的步骤:

有关SimpleTag接口的格局描述

  • doTag方法它的职能:描述标签的效用 (会被电动调用)
  • setJspContext:它的参数是JspContext,它的效果是将页面包车型地铁pageContext对象传递到标签类中。(非常的大用场,用于获取此外八大对象)
  • setJspBody:将标签体的内容缓存到内部存款和储蓄器对象中,而参数JspFragment
    也就是标签体内容。
  • getParent  setParent 将标签的父标签引进。(基本不用)

 

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);
        }
    }
}

上面是叁个自定义标签类:(用于获取浏览器端的 ip 地址)

package online.mytag;

import java.io.IOException;

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


public class IpTag extends SimpleTagSupport {

    /**
     * 向浏览器输出浏览器的ip
     */
    @Override
    public void doTag() throws JspException, IOException {
        String  ip = (String)((PageContext)(getJspContext())).getRequest().getRemoteAddr();
        getJspContext().getOut().write(ip);
    }
}

上边五个标签实现类对应的 .tld 文件:

<?xml version="1.0" encoding="UTF-8" ?>

<taglib xmlns="http://java.sun.com/xml/ns/j2ee" 
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
        http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
        version="2.0">
    <short-name>my</short-name>    //这里是使用该标签时taglib的refer属性值:<%@taglib uri="online.mytag.IpTag" prefix="my"%>
    <uri>http://java.sun.com/jsp/jstl/mytag</uri>   //这里是使用该标签时taglib的uri属性
    <tag>    //这里的每一个<tag>都指定一个标签java类
        <description>输出浏览器端的ip</description>  //一些描述,也就是注释
        <name>getIp</name>          //使用该标签类时的标签名
        <tag-class>online.mytag.IpTag</tag-class>     //标签类的全类名
        <body-content>empty</body-content>       //这个属性说明是否有标签体
    </tag>

    <tag>
        <description>根据标签属性值循环输出标签体</description>
        <name>print</name>
        <tag-class>online.mytag.PrintTag</tag-class>
        <attribute>         //指的是标签类中的字段,有几个字段,就有几个attribute标签
            <description>循环的次数</description>
            <name>count</name>         //使用该标签时,标签中的属性名
            <required>true</required>     //指明该属性是否是必需的
            <rtexprvalue>true</rtexprvalue>    //指明该属性是否支持el表达式
        </attribute>
    </tag>
</taglib>

在jsp页面中选拔自定义标签:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="online.mytag.IpTag" prefix="my"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <my:getIp/>

    <my:print count="2">
        hello tag
    </my:print>
</body>
</html>

画个图表达下tag标签下的子标签:(注意:attribute对应的字段必须在标签类中提供相应的get/set方法)

 


小结下自定义标签:

     
大家运用的是大约标签,也正是因此落到实处SimpleTag或三番五次SimpleTagSupport来兑现自定义标签。

骨干步骤:

1.制造标签类 implements SimpleTag   extends SimpleTagSupport类

  • JspContext 它就意味着的是jsp页面上的pageContext对象
  • JspFragment
    它就意味着的是标签体中的内容,通过它的invoke方法能够将标签体的内容指定到invoke方法参数的出口流输出,假诺为null,私下认可是当前jsp页面关联的out对象。

2.在WEB-INF/创造一个tld文件

  • 采取<tag>来描述标签
  • 动用<tag>下的<name>来定义标签字称
  • 应用<tag>下的<tag-class>来定义标签类
  • 行使<tag>下的<body-content>来陈诉标签体中是还是不是有内容,可以动用的值有四个
  • empty  scriptless
  • 利用<tag>下的<attribute>来描述属性,不过必得在标签类中提供相应的get/set方法
  • 动用<attribute>下的<name>来声称属性名称
  • 利用<attribute>下的<required>来声称属性是还是不是必得存在
  • 行使<attribute>下的<rtexprvalue>来声称属性是不是足以选择el表明式

注意:

  • 在tld文件创造时,要选用2.0以上版本,並且tld文件创立后有难题,须要手动将schemaLocation中率先个值复制一份放到xsd文件前

(xsi:schemaLocation=”

3.在jsp页面上利用taglib导入标签

  • 利用标签必需使用taglib发轫入标签技能用。

使用标签可以轮换jsp页面上的脚本,让页面特别简洁,维护尤其低价,扩充程序安全性。
在javaee api中有二个接…

发表评论

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

网站地图xml地图