来自 澳门威尼斯人平台 2019-12-29 05:22 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

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

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

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:自定义标签在IE6-8的困境

关键词: