最近用到的浏览器兼容javascript总结

最近做了一些javascript相关的工作,把收获和大家分享一下,感谢下meizz,他的框架jsframework给我提供了许多现成的工具

title这个元素比较特殊

如果title中有经过htmlencode的字符，通过document.title获得的内容将会自动解码,并且在ie中通过给title加上一个id然后用document.getElementById(titleid).innerHTML来获得其中内容也仍然是已经解码的，而firefox则不会

<html><head><titleid="tt"><iframe src="www.baidu.com"/&gt</title></head><body><divid="dd"><iframe src="www.baidu.com"/&gt</div>document.title:<inputid="disp1"/><br/>document.getElementById(titleid):<inputid="disp2"/><br/>document.getElementbyId(divid):<inputid="disp3"/><scripttype="text/javascript">document.getElementById("disp1").value=document.title;
document.getElementById("disp2").value=document.getElementById("tt").innerHTML;
document.getElementById("disp3").value=document.getElementById("dd").innerHTML;</script></body></html>

ie中的结果

firefox的结果

xhtml不支持document.body.scrollTop

当为html文档加上如下头以支持xhtml过渡标准时候，使用document.body.scrollTop值始终为0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-CN"lang="zh-CN">

这是document.body.scrollTop始终为0,这时需要用document.documentElement.scrollTop才能获得正确的值

而如果不加xhtml的申明,document.documentElement.scrollTop将为0

下面这个getScrollXY()方法可以包装这个变化

<html><body><divid="dd"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>scrollLeft:<inputid="disp1"/><br/>scrollTop:<inputid="disp2"/><br/><buttononclick="onClick()">获得scrollXY</button><scripttype="text/javascript">functiongetScrollXY(){varx,y;if(document.body.scrollTop){
  x=document.body.scrollLeft;
  y=document.body.scrollTop;
}else{
  x=document.documentElement.scrollLeft;
  y=document.documentElement.scrollTop;
}return{x:x,y:y};
}functiononClick(){
document.getElementById("disp1").value=getScrollXY().x;
document.getElementById("disp2").value=getScrollXY().y;
}</script></body></html>

firefox的outerHTML

firefox没有outerHTML这个很有用的属性,用下面这个方法可以让你的firefox也具有这个属性

if(typeof(HTMLElement)!="undefined"&&!window.opera){
HTMLElement.prototype.__defineGetter__("outerHTML",function()
{vara=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)returnstr+"/>";returnstr+">"+this.innerHTML+"</"+this.tagName+">";
});

HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
  {switch(this.tagName.toLowerCase())
    {case"area":case"base":case"basefont":case"col":case"frame":case"hr":case"img":case"br":case"input":case"link":case"meta":case"isindex":case"param":returnfalse;
    }returntrue;
  });
}

firefox和ie的事件

firefox和ie的事件对象稍微不同,比方说下面这个在ie下获得鼠标位置的方法

<buttononclick="onClick()">获得鼠标点击横坐标</button><scripttype="text/javascript">functiononclick(){

alert(event.clientX);

}</script>

需要改成

<button οnclick="onClick(event)">获得OuterHTML</button>

function onclick(event){

alert(event.clientX);

}

</script>

才能在两种浏览器下使用

children与childNodes

ie提供的children,childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而ie的childNodes和children不会

比如

<div id="dd">
<div>yizhu2000</div>
</div>

id为dd的div在ie下用childNodes查看,其子节点数为1,而ff下为三,我们可以从ff的dom查看器里面看到他的childNodes为["\n ", div, "\n"]

要在ff下模拟children的属性我们可以这样做

if(typeof(HTMLElement)!="undefined"&&!window.opera){

HTMLElement.prototype.__defineGetter__("children",function()
{for(vara=[],j=0,n,i=0; i<this.childNodes.length; i++){
n=this.childNodes[i];if(n.nodeType==1){a[j++]=n;if(n.name){if(!a[n.name])a[n.name]=[]; a[n.name][a[n.name].length]=n;}if(n.id) a[n.id]=n;}}returna;
});

}

几个有用的工具函数

在ff下模拟ie的insertAdjacentHTML

if(typeof(HTMLElement)!="undefined"&&!window.opera){

HTMLElement.prototype.insertAdjacentHTML=function(where, html)
{vare=this.ownerDocument.createRange();
   e.setStartBefore(this);
   e=e.createContextualFragment(html);switch(where)
   {case'beforeBegin':this.parentNode.insertBefore(e,this);break;case'afterBegin':this.insertBefore(e,this.firstChild);break;case'beforeEnd':this.appendChild(e);break;case'afterEnd':if(!this.nextSibling)this.parentNode.appendChild(e);elsethis.parentNode.insertBefore(e,this.nextSibling);break;
   }
};

}

模拟DotNet的string.format

String.prototype.format=function()
{if(arguments.length==0)returnthis;for(vars=this, i=0; i<arguments.length; i++)
s=s.replace(newRegExp("\\{"+i+"\\}","g"), arguments[i]);returns;
};

这样我们就可以在程序里使用诸如:

"username:{0} nickname {1}".format("yizhu2000","二毛五")

资源

meizz的blog http://blog.csdn.net/meizz/