注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

古城风~~~

竹密无妨溪水过,天高不碍白云飞。这天下总有一份是属于我古城的天地!

 
 
 

日志

 
 

FireFox不支持outerHTML  

2010-05-27 21:32:09|  分类: 网页特效/javascr |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

    最近的项目要求对同时支持IE和FireFox,为此深受其苦,尤其是对于我这个习惯了使用诸如:"event.srcElement"、"outerHTML"、"parentElement"的人来说。许多在IE中使用起来得心应手的对象和方法,在W3C标准面前碰壁,没办法,有问题就得解决,大部分替代方案都是我从CSDN的提问或博客园的博客中找到的。

    1. FireFox不支持outerHTML,怎么办?

    在使用outerHTML的js文件(或脚本块)中,添加一段DOM原型扩展方法:

    view plaincopy to clipboardprint?
if(typeof(HTMLElement)!="undefined" && !window.opera)   
{   
    HTMLElement.prototype.__defineGetter__("outerHTML",function()   
    {   
        var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)   
        if(a[i].specified)   
            str+=" "+a[i].name+'="'+a[i].value+'"';   
        if(!this.canHaveChildren)   
            return str+" />";   
        return str+">"+this.innerHTML+"</"+this.tagName+">";   
    });   
    HTMLElement.prototype.__defineSetter__("outerHTML",function(s)   
    {   
        var r = this.ownerDocument.createRange();   
        r.setStartBefore(this);   
        var df = r.createContextualFragment(s);   
        this.parentNode.replaceChild(df, this);   
        return s;   
    });   
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function()   
    {   
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());   
    });   
}  
if(typeof(HTMLElement)!="undefined" && !window.opera)
{
    HTMLElement.prototype.__defineGetter__("outerHTML",function()
    {
        var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
        if(a[i].specified)
            str+=" "+a[i].name+'="'+a[i].value+'"';
        if(!this.canHaveChildren)
            return str+" />";
        return str+">"+this.innerHTML+"</"+this.tagName+">";
    });
    HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
    {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df = r.createContextualFragment(s);
        this.parentNode.replaceChild(df, this);
        return s;
    });
    HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
    {
        return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
    });

    然后,就可以正常使用outerHTML对象了。

    2. FireFox不支持srcElement、parentElement,怎么办?

    我一般在这种情况下会使用到"srcElement、parentElement"对象:

    view plaincopy to clipboardprint?
function checkInput()  
{  
    var e = event.srcElement;  // 当前触发事件的控件  
    var td = e.parentElement;  // 控件所在表格的单元格  
    var tr = e.parentElement;  // 控件所在表格的行  
 
    // 拿到这三个对象我可以很方便的使用类似:"tr.cells[0]"方式,来访问表格的任何一个单元格  

function checkInput()
{
    var e = event.srcElement;  // 当前触发事件的控件
    var td = e.parentElement;  // 控件所在表格的单元格
    var tr = e.parentElement;  // 控件所在表格的行

    // 拿到这三个对象我可以很方便的使用类似:"tr.cells[0]"方式,来访问表格的任何一个单元格
}

    使用FireBug插件,断点查看这三个对象都是"undefined",怎么办呢?

    对于"event.srcElement"对象,我们完全可以使用"this"关键字来替换,即:在调用这个方法时候,传入参数使用this,而在方法定义中,就可以使用当前对象了。

    view plaincopy to clipboardprint?
<input type="text" id="t1" onblur="checkInput(this)" />  
........  
<mce:script type="text/javascript"><!--  
function checkInput(e)  
{  
    // e等同于IE中event.srcElement的对象了  
}  
// --></mce:script> 
<input type="text" id="t1" onblur="checkInput(this)" />
........
<mce:script type="text/javascript"><!--
function checkInput(e)
{
    // e等同于IE中event.srcElement的对象了
}
// --></mce:script>

    而对于"parentElement"对象,虽然FF不识别它,但FF识别"parentNode",因此可以使用以下方式,解决parentElement的问题:

    view plaincopy to clipboardprint?
function checkInput(e)  
{  
    var td = e.parentElement || e.parentNode;  
    var tr = td.parentElement || td.parentNode;  
 

function checkInput(e)
{
    var td = e.parentElement || e.parentNode;
    var tr = td.parentElement || td.parentNode;

}

    这是IE与FF区别的一部分总结,我想对于这些区别,不能视为洪水猛兽,望而兴叹,总会有替换方法的。

  评论这张
 
阅读(995)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017