兼容性处理-如何处理js浏览器兼容性问题(2)

事件监控

问题描述:

在事件监视和处理方面:

IE提供了两个接口，attachEvent和detachEvent，

Firefox提供了addEventListener和removeEventListener.

兼容处理:

最简单的兼容性处理就是封装这两套接口：function addEvent(elem, eventName, handler) {　　if (elem.attachEvent) {　　　　elem.attachEvent("on" + eventName, function(){　　　　　　　　　　　　　　　　　　　　handler.call(elem)}); 　　　　//此处使用回调函数call()，让this指向elem　　} else if (elem.addEventListener) {　　　　elem.addEventListener(eventName, handler, false);　　}}function removeEvent(elem, eventName, handler) {　　if (elem.detachEvent) {　　　　elem.detachEvent("on" + eventName, function(){　　　　　　　　　　　　　　　　　　　　handler.call(elem)}); 　　　　//此处使用回调函数call()，让this指向elem　　} else if (elem.removeEventListener) {　　　　elem.removeEventListener(eventName, handler, false);　　}}

它需要特别注意. 在Firefox中，事件处理程序函数中的此指针指向受监视的元素本身，而在IE中则不指向. 您可以使用回调函数调用使当前上下文指向受监视的元素.

鼠标位置

问题描述:

在IE中，即使对象具有x和y属性，但没有pageX和pageY属性；

在Firefox中，偶数对象具有pageX和pageY属性，但没有x和y属性.

兼容处理:

使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。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);}

6. Window.location.href问题

问题描述:

在IE或Firefox 2.0.x中，您可以使用window.location或window.location.href;. 在Firefox 1.5.x下，您只能使用window.location.

兼容处理:

使用window.location而不是window.location.href. 当然，您也可以考虑使用location.replace（）方法.

7. 事件委托方法

问题描述:

在IE中，使用document.body.onload = inject;在此之前已经实现了函数inject（）的地方；

在Firefox中，使用document.body.onload = inject（）;

兼容处理:

统一使用document.body.onload = new Function（“ inject（）”）；

或document.body.onload = function（）{/ *这是代码* /}

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;}

模态和非模态窗口

问题描述:

在IE中，您可以通过showModalDialog和showModelessDialog打开模式窗口和非模式窗口，但是Firefox不支持.

兼容处理:

使用window.open（pageURL，名称，参数）直接打开新窗口. 如果需要传递参数，则可以使用frame或iframe.

input.type属性有问题

IE下的input.type属性是只读的，但可以在Firefox下进行修改

对选择元素的选项操作

设置选项，IE和Firefox的编写方式不同:

Firefox:可直接设置：option.text = 'foooooooo';IE:只能设置：option.innerHTML = 'fooooooo';

删除所选选项的方法:

Firefox:可以select.options.remove(selectedIndex);IE7:可以用select.options[i] = null;IE6:需要写select.options[i].outerHTML = null;

img对象的alt和标题分析

问题描述:

img对象具有两个属性，alt和title. 区别在于alt: 当照片不存在或加载错误时出现提示.

标题: 照片的提示说明. 如果未在IE中定义标题，则也可以将alt用作img的提示，但在Firefox中，二者的使用都完全符合标准中的定义

兼容处理:

最好记下所有alt和title对象，以确保它们可以在各种浏览器中正常使用.

图片src刷新问题

问题描述:

<img id="pic" onclick= "this.src= 'a.jpg'"src="aa.jpg" />

在IE中js浏览器兼容问题，此代码可用于刷新图像，但在FireFox中不可用. 主要问题是缓存.

兼容处理:

在地址后添加一个随机数以解决该问题:

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-193044-2.html