web前端关于浏览器兼容性问题的解决方案

这次给你们带给web前端关于浏览器兼容性问题的解决方案，web前端解决浏览器兼容性问题的留意事项有什么，下面就是实战案例，一起来看一下。

所谓的浏览器兼容性问题，是指由于不同的浏览器对同一段代码有不同的解读，造成页面显示效果不统一的状况。在大多数情况下，我们的意愿是，无论客户用何种浏览器来查看我们的网页以及登录我们的平台，都必须是统一的显示效果。所以浏览器的兼容性问题是后端开发人员一直会遇到跟需要应解决的难题：

一、css3媒体查询兼容方案：Respond.js

GitHub地址：

（来源于网络）

IE8不支持CSS媒体查询js中浏览器兼容性问题，对响应式设计大大不利。Respond.js能帮助IE6-8兼容“min/max-width”媒体查询条件。

使用方式：在页面中所有css文件的引用位置以后引用Respond.js。而且Respond.js的引用得越早，用户发现页面闪烁的机会越小。

二、自定义属性问题

问题说明：IE下，可以使用获得常规属性的方式来获得自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。

解决办法：统一通过 getAttribute() 获取自定义属性。

三、变量名与HTML中id相同的问题

问题说明：IE下，HTML对象的ID可以成为 document 的下属对象数组名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。

解决方式：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以避免出错；在声明函数时，一律加上var关键字，以规避歧义。

四、const问题

问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。

解决办法：统一使用var关键字来定义常量。 对于const是ES6中let之后的一个定义函数的方式，其应注意的一点就是在声明变量的之后

一定要给其赋值，不然会报错。

五、window.event问题

问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事故出现的现场使用。

解决办法：在事故出现的变量上加上event参数js中浏览器兼容性问题，在变量体内(假设数组为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)

示例：

<input type="button" onclick="doSomething(event)"/> 
<script language="javascript"> 
function doSomething(evt) { 
    var myEvent = evt?evt:(window.event?window.event:null) 
    ...} 123456

六、event.x与event.y的问题

7、获取鼠标在页面上的位置

IE下,event对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法：

使用mX(mX = event.x ? event.x : event.pageX;)来替代IE下的event.x以及Firefox下的event.pageX.

七、对于frame问题

以以下的frame为例：

1.访问frame对象

IE：使用window.frameId或者window.frameName来访问这个frame对象；

Firefox：使用window.frameName来访问这个frame对象；

解决办法：统一使用 window.document.getElementById(”frameId”) 来访问这个frame对象；

2.切换frame内容

在IE和Firefox中都可以使用 window.document.getElementById(”frameId”).src = “webjx.com.html”或 window.frameName.location = “webjx.com.html”来切换frame的内容；

如果必须将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。

八、body载入问题

问题表明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则需要在body标签被浏览器完全写入期间才存在。

[注] 这个问题已经实际验证，待验证后再来修改。

[注] 经验证，IE6、Opera9或者FireFox2中不存在上述弊端，单纯的JS脚本可以访问在脚本之前已经载入的所有对象跟元素，即使这个元素还没有载入完成。

九、事件委托方式

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们作为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时也是获得了当前节点的位置，并不知道是哪个节点名称，这里我们用nodeName来获得准确是哪个标签名，这个返回的是一个大写的，我们必须转成小写再做相当（习惯问题）：

window.onload = function(){
   　　var oUl = document.getElementById("ul1");
   　　oUl.onclick = function(ev){
    　　　　var ev = ev || window.event;
        　　　　var target = ev.target || ev.srcElement;
       　　　　if(target.nodeName.toLowerCase() == 'li'){
       　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
    　　　　}
   　　}
}1234567891011

十、访问的父元素的区别

问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。

解决办法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父节点。

十一、innerText的问题.

问题说明：innerText在IE中可正常工作，但是innerText在FireFox中仍不行。

解决办法：在非IE浏览器中使用textContent代替innerText。

if(navigator.appName.indexOf("Explorer") >-1){ 
    document.getElementById('element').innerText = "my text"; 
} 
else{ 
    document.getElementById('element').textContent = ";my text"; 
}123456

十二、用setAttribute设置事件

var obj = document.getElementById('objId'); 
obj.setAttribute('onclick','funcitonname();');12

FIREFOX支持，IE不支持

解决办法：

IE中需要用点记法来引用所需的事件处理程序,并且应用赋予匿名函数

var obj = document.getElementById('objId'); 
obj.onclick=function(){fucntionname();};12

十三、设置类名

setAttribute(‘class’,’styleClass’)

FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)

解决方法如下：

setAttribute('class','styleClass') 
setAttribute('className','styleClass') 
//或者直接
 object.className='styleClass';123456

十四、绑定事件

在IE下我们一般使用attachEvent方法

var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 12345

可惜这个微软的私人方式,火狐和其它浏览器都不支持,幸运的是它们都支持W3C标准的addEventListener方法

var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false); 12345

顺变说一下这两个的使用方法：

addEventListener的使用方式

target.addEventListener(type,listener,useCapture);

target： 文档节点、document、window 或 XMLHttpRequest。

type： 字符串，不含“on”如“click”、“mouseover”、“keydown”等。

listener ：实现了 EventListener 接口以及是 JavaScript 中的函数。

useCapture ：是否使用捕捉，一般用 false 。

例如：

document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 1

2.对于attachEvent

target.attachEvent(type, listener);

target： 文档节点、document、window 或 XMLHttpRequest。

type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

listener ：实现了 EventListener 接口以及是 JavaScript 中的函数。

例如：

document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 1

但是它们都给出了事件的移除手段

removeEventListener(event,function,capture/bubble);

十五、ajax请求

对于ajax请求只要出现兼容性的方面就是创建对象之后的差别我们应考量IE6的状况,下面给出代码

   //设置IE6的情况，注意，在判断XMLHttpRequest是否存在时将其
    //设置为window.XMLHttpRequest，这样将其设置为属性，在检测时就不是未定义
    //而是undefine
    //1.创建Ajax对象
    if(window.XMLHttpRequest){        var oAjax=new XMLHttpRequest();
    }    else{        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

相信看了本文案例你终于掌握了技巧，更多精彩请关注php中文网其它相关文章！

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