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

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

title这个元素比较特殊

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

< html >
< head >
< title id ="tt" > &lt; iframesrc= &quot; www.baidu.com &quot; / &gt </ title >
</ head >
< body >
< div id ="dd" > &lt; iframesrc= &quot; www.baidu.com &quot; / &gt </ div >
document.title:
< input id ="disp1" />< br />
document.getElementById(titleid):
< input id ="disp2" />< br />
document.getElementbyId(divid):
< input id ="disp3" />
< script type ="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

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="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 >
< div id ="dd" > < br />< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />
< br />< br />< br />< br />< br />< br />< br />< br />< br />< br />
</ div >
scrollLeft:
< input id ="disp1" />< br />
scrollTop:
< input id ="disp2" />< br />
< button onclick ="onClick()" > 获得scrollXY </ button >
< script type ="text/javascript" >
function getScrollXY(){
var x,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};
}

function onClick(){
document.getElementById(
" disp1 " ).value = getScrollXY().x;
document.getElementById(
" disp2 " ).value = getScrollXY().y;
}
</ script >
</ body >
</ html >

scrollTop

firefox的outerHTML

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

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.__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 " : return false ;
}
return true ;
});
}

firefox和ie的事件

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

< button onclick ="onClick()" > 获得鼠标点击横坐标 </ button >

< script type ="text/javascript" >

function onclick(){

alert(event.clientX);

}

</ script >

需要改成

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

<script type="text/javascript">

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 ( var a = [],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;}} return a;
});

}

几个有用的工具函数

在ff下模拟ie的insertAdjacentHTML

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

HTMLElement.prototype.insertAdjacentHTML
= function (where,html)
{
var e = 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);
else this .parentNode.insertBefore(e, this .nextSibling); break ;
}
};

}

模拟DotNet的string.format

String.prototype.format = function ()
{
if (arguments.length == 0 ) return this ;
for ( var s = this ,i = 0 ;i < arguments.length;i ++ )
s
= s.replace( new RegExp( " \\{ " + i + " \\} " , " g " ),arguments[i]);
return s;
};

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

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

资源

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

你可能感兴趣的:(JavaScript,浏览器,prototype,IE,firefox)