function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}
五、其他差异的兼容处理
1. XMLHttpRequest
【分析说明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，Firefox不支持，但支持XMLHttpRequest。
【兼容处理】
复制代码 代码如下:
function createXHR() {
var xhr=null;
if(window.XMLHttpRequest){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
try {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
catch() {
xhr=null;
}
}
if(!xhr)return;
return xhr;
}
2. 模态和非模态窗口
【分析说明】IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。
【解决办法】直接使用window.open(pageURL,name,parameters)方式打开新窗口。 如果需要传递参数，可以使用frame或者iframe。
3. input.type属性问题
IE下 input.type属性为只读，但是Firefox下可以修改
4. 对select元素的option操作
设置options，IE和Firefox写法不同：
Firefox:可直接设置
option.text = 'foooooooo';
IE:只能设置
option.innerHTML = 'fooooooo';
删除一个select的option的方法：
Firefox:可以
select.options.remove(selectedIndex);
IE7:可以用
select.options[i] = null;
IE6:需要写
select.options[i].outerHTML = null;
5. img对象alt和title的解析
【分析说明】img对象有alt和title两个属性，区别在于，alt：当照片不存在或者load错误时的提示。
title：照片的tip说明, 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用
在定义img对象时。
【兼容处理】最好将alt和title对象都写全，保证在各种浏览器中都能正常使用 。
6. img的src刷新问题
【分析说明】先看一下代码：
复制代码 代码如下:
<img onclick= "this.src= 'a.jpg'"
src="aa.jpg"/>
在IE 下，这段代码可以用来刷新图片，但在FireFox下不行。主要是缓存问题。
【兼容处理】在地址后面加个随机数就解决了:
复制代码 代码如下:
<img onclick= "javascript:this.src=this.src+'?'
+Math.random()"src="a.jpg"/>
总结
IE和Firefox的Javascript方面存在着不少的差异，要做到兼容，我觉得很有必要把一些常见的整理成一个js库，如DOM的操作，事件的处理，XMLHttpRequest请求等，或者也可以选择使用现有的一些库(如jQuery，YUI，ExtJs等)，不过我觉得还是有必要了解一下这些差异，这样对于我们参加兼容性和可用性代码很有帮助。
办法总比问题多，无论浏览器兼容如何折腾人，做前端开发的总能迎刃而解的！
您可能感兴趣的文章: