web前端關於瀏覽器相容性問題的解決方案

這次帶給大家web前端關於瀏覽器相容性問題的解決方案，web前端解決瀏覽器相容性問題的注意事項有哪些，以下就是實戰案例，一起來看一下。

所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段程式碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者使用什麼瀏覽器來查看我們的網站或登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員常常會碰到、必須要解決的問題：

一、css3媒體查詢相容方案：Respond.js

GitHub網址：https://github.com/scottjehl/Respond 
（源自網路） 
IE8不支援CSS媒體查詢，對回應式設計大為不利。 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參數，在函數體內(假設形參為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中文网其它相关文章！

推荐阅读：

前端页面测试的方法

javascript中call与apply的应用

以上是web前端關於瀏覽器相容性問題的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！