做 BS 开发就难免会用到 javascript ,而每个浏览器对 javascript 的支持有不同。这就需要我们程序员去兼容他们
下面是兼容 IE 和 FF 的 js 脚本做法和分解(部分选自网上,经本人整理),希望对大家有帮助。
/* 以下以 IE 代替 Internet Explorer ,以 MF/FF 代替 Mozzila Firefox */
//window.event
IE :有 window.event 对象
FF :没有 window.event 对象。可以通过给函数的参数传递 event 对象。如 οnmοusemοve=doMouseMove(event)
解决方法: var event = event || window.event;
example:
<script>
function test(event) {
var event = event || window.event;
//do Something
}
</script>
<input type="button" value="click" οnclick="test(event)"/>
// 鼠标当前坐标
IE : event.x 和 event.y 。
FF : event.pageX 和 event.pageY 。
通用:两者都有 event.clientX 和 event.clientY 属性。
// 鼠标当前坐标 ( 加上滚动条滚过的距离 )
IE : event.offsetX 和 event.offsetY 。
FF : event.layerX 和 event.layerY 。
解决方法:
<script>
function test(event) {
var event = event || window.event;
//or var event = event ? event : window.event;// 这 2 中都可以,也可以用 if else (这简写)
var x = event.offsetX || event.layerX;
var y = event.offsetY || event.layerY;
//do Something
}
</script>
<div οnmοusedοwn="test(event)"></div>
/** 其他的兼容的解决方法类似,不再一一举例 **/
//event.srcElement 问题
说明 :IE 下 ,event 对象有 srcElement 属性 , 但是没有 target 属性 ;Firefox 下 ,even 对象有 target 属性 ,
但是没有 srcElement 属性 .
解决方法 : 使用 obj(obj = event.srcElement ? event.srcElement : event.target;)
来代替 IE 下的 event.srcElement 或者
Firefox 下的 event.target. 请同时注意 event 的兼容性问题。
//event.toElement 问题
问题:
IE 下, even 对象有 srcElement 属性,但是没有 target 属性;
Firefox 下, even 对象有 target 属性,但是没有 srcElement 属性
解决方法:
var target = e.relatedTarget || e.toElement;
// 标签的 x 和 y 的坐标位置: style.posLeft 和 style.posTop
IE :有。
FF :没有。
通用: object.offsetLeft 和 object.offsetTop 。
// 窗体的高度和宽度
IE : document.body.offsetWidth 和 document.body.offsetHeight 。注意:此时页面一定要有 body 标签。
FF : window.innerWidth 和 window.innerHegiht ,
以及 document.documentElement.clientWidth 和 document.documentElement.clientHeight 。
通用: document.body.clientWidth 和 document.body.clientHeight 。
// 添加事件
IE : element.attachEvent("onclick", function ); 。
FF : element.addEventListener("click", function , true ) 。
通 用: element.οnclick= function 。虽然都可以使用 onclick 事件,但是 onclick 和上面两种方法的效果是不一样的,
onclick 只有执行一个过程,而 attachEvent 和 addEventListener 执行的是一个过程列表,也就是多个过程。
例如: element.attachEvent("onclick", func1);
element.attachEvent("onclick", func2) 这样 func1 和 func2 都会被执行。
// 标签的自定义属性
IE :如果给标签 div1 定义了一个属性 value ,可以 div1.value 和 div1["value"] 取得该值。
FF :不能用 div1.value 和 div1["value"] 取。
通用: div1.getAttribute("value") 。
//document.form.item 问题
IE: 现有问题:现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行
FF/IE: document.formName.elements["elementName"]
// 集合 / 数组类对象问题
(1) 现有问题:
现有代码中许多集合类对象取用时使用 () , IE 能接受, MF 不能。
(2) 解决方法:
改用 [] 作为下标运算。如: document.forms("formName") 改为 document.forms["formName"] 。
又如: document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
//HTML 对象的 id 作为对象名的问题
(1) 现有问题
在 IE 中, HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2) 解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用
// 用 idName 字符串取得对象的问题
(1) 现有问题
在 IE 中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在 MF 中不能。
(2) 解决方法
用 getElementById(idName) 代替 eval(idName) 。
// 变量名与某 HTML 对象 id 相同的问题
(1) 现有问题
在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名, IE 中不能。
(2) 解决方法
在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
//document.getElementsByName() 和 document.all[name] 的问题
现有问题:在 IE 中, getElementsByName() 、 document.all[name] 均不能用来取得 div 元素
(是否还有其它不能取的元素还不知道)。
//document.all
Firefox 可以兼容 document.all , 但会生成一条警告。可以用 getElementById("*")
或者 getElementByTagName("*") 来代替
不过对于 document.all.length 等属性,则完全不兼容
//input.type 属性问题
说明 :IE 下 input.type 属性为只读 ; 但是 Firefox 下 input.type 属性为读写
//window.location.href 问题
说明 :IE 或者 Firefox2.0.x 下 , 可以使用 window.location 或 window.location.href;Firefox1.5.x 下 ,
只能使用 window.location
解决方法 : 使用 window.location 来代替 window.location.href
// 模态和非模态窗口问题
说明 :IE 下 , 可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口 ;Firefox 下则不能
解决方法 : 直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口 , 可以在子窗口中使用 window.opener 来访问父窗口 .
例如: var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
//frame 问题
以下面的 frame 为例:
<frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" />
(1) 访问 frame 对象 :
IE: 使用 window.frameId 或者 window.frameName 来访问这个 frame 对象 . frameId 和 frameName 可以同名。
FF: 只能使用 window.frameName 来访问这个 frame 对象 .
另外,在 IE 和 Firefox 中都可以使用 window.document.getElementById("frameId") 来访问这个 frame 对象 .
(2) 切换 frame 内容 :
在 IE 和 Firefox 中都可以使用 window.document.getElementById("testFrame").src = "xxx.html"
或 window.frameName.location = "xxx.html" 来切换 frame 的内容 .
如果需要将 frame 中的参数传回父窗口 ( 注意不是 opener, 而是 parent frame) ,可以在 frme 中使用 parent 来访问父窗口。
例如: window.parent.document.form1.filename.value="Aqing";
//body 问题
Firefox 的 body 在 body 标签没有被浏览器完全读入之前就存在;而 IE 的 body 则必须在 body 标签被浏览器完全读入之后才存在
// 事件委托方法
IE : document.body.onload = inject; //Function inject() 在这之前已被实现
FF : document.body.onload = inject();
//firefox 与 IE 的父元素 (parentElement) 的区别
IE : obj.parentElement
FF : obj.parentNode
解决方法 : 因为 FF 与 IE 都支持 DOM, 因此使用 obj.parentNode 是不错选择
//innerText 在 IE 中能正常工作,但是 innerText 在 FireFox 中却不行 . 需用 textContent
//FireFox 中设置 HTML 标签的 style 时,所有位置性和字体尺寸的值必须后跟 px 。这个 ie 也是支持的
// 父节点、子节点和删除节点
IE : parentElement 、 parement.children , element.romoveNode( true ) 。
FF : parentNode 、 parentNode.childNodes , node.parentNode.removeChild(node) 。
// 对 select 的 options 集合操作
枚举元素除了 [] 外, SelectName.options.item() 也是可以的 , 另外 SelectName.options.length,
SelectName.options.add/remove 都可以在两种浏览器上使用。
注意在 add 后赋值元素,否则会失败
动态删除 select 中的所有 options :
document.getElementById("ddlResourceType").options.length=0;
动态删除 select 中的某一项 option :
document.getElementById("ddlResourceType").options.remove(indx);
动态添加 select 中的项 option:
document.getElementById("ddlResourceType").options.add( new Option(text,value));
IE FF 动态删除通用方法:
document.getElementById("ddlResourceType").options[indx] = null ;
// 捕获事件
问题:
FF 没有 setCapture() 、 releaseCapture() 方法
解决方法:
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
} else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
} else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
// 禁止选取网页内容
问题:
FF 需要用 CSS 禁止, IE 用 JS 禁止
解决方法:
IE: obj.onselectstart = function () { return false ;}
FF: -moz-user-select:none;
// 画图
IE : VML 。
FF : SVG 。
//CSS :透明
IE : filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60) 。
FF : opacity:0.6 。
//CSS :圆角
IE :不支持圆角。
FF : -moz-border-radius:4px ,或者 -moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px; 。
//CSS :双线凹凸边框
IE : border:2px outset; 。
FF : -moz- border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080; 。
本文来自 CSDN 博客,转载请标明出处: http: //blog.csdn.net/IBM_hoojo/archive/2010/07/02/5708440.aspx