Web-Frontend-Lösungen für Browserkompatibilitätsprobleme

Dieses Mal werde ich Ihnen die Web-Front-End-Lösung für das Browser-Kompatibilitätsproblem vorstellen. Was sind die Vorsichtsmaßnahmen für das Web-Front-End, um das Browser-Kompatibilitätsproblem zu lösen? . Werfen wir einen Blick darauf.

Das sogenannte Browserkompatibilitätsproblem bezieht sich auf die Situation, in der verschiedene Browser denselben Codeabschnitt unterschiedlich interpretieren, was zu inkonsistenten Seitenanzeigeeffekten führt. In den meisten Fällen besteht unsere Anforderung darin, dass unabhängig davon, welchen Browser der Benutzer zum Anzeigen unserer Website oder zum Anmelden bei unserem System verwendet, ein einheitlicher Anzeigeeffekt erzielt werden sollte. Daher sind Browser-Kompatibilitätsprobleme Probleme, auf die Front-End-Entwickler häufig stoßen und die gelöst werden müssen:

1. css3MedienabfrageKompatibilitätslösung: Respond.js

GitHub-Adresse: https://github.com/scottjehl/Respond
(aus dem Internet)
IE8 unterstützt keine CSS-Medienabfragen, was sich stark nachteilig auf das responsive Design auswirkt. Respond.js kann dazu beitragen, dass IE6-8 mit den Medienabfragebedingungen „Mindest-/Höchstbreite“ kompatibel ist.

Verwendung: Verweisen Sie auf Respond.js nach dem Referenzspeicherort aller CSS-Dateien auf der Seite. Und je früher auf Respond.js verwiesen wird, desto geringer ist die Wahrscheinlichkeit, dass der Benutzer ein Flackern der Seite sieht.

2. Probleme mit benutzerdefinierten Attributen

Problembeschreibung: Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, oder Sie können getAttribute() verwenden, um benutzerdefinierte Attribute abzurufen In Firefox können benutzerdefinierte Attribute nur mit getAttribute() abgerufen werden.
Lösung: Benutzerdefinierte Attribute über getAttribute() abrufen.

3. Das Problem, dass der Variablenname mit der ID in HTML übereinstimmt

Problembeschreibung: Unter IE kann die ID des HTML-Objekts direkt als Variablenname verwendet werden Untergeordnetes Objekt des Dokuments, jedoch nicht unter Firefox. Unter IE können Sie denselben Variablennamen wie die HTML-Objekt-ID verwenden, jedoch nicht unter IE.
Lösung: Verwenden Sie document.getElementById("idName") anstelle von document.idName. Es ist am besten, Variablennamen nicht mit derselben HTML-Objekt-ID zu verwenden, um Fehler beim Deklarieren von Variablen zu vermeiden. Fügen Sie immer das Schlüsselwort var hinzu, um Mehrdeutigkeiten zu vermeiden.

4. Const-Problem

Problembeschreibung: Unter Firefox können Sie das const-Schlüsselwort oder das var-Schlüsselwort verwenden, um Konstanten zu definieren; unter IE können Sie nur das verwenden Schlüsselwort var zum Definieren von Konstanten.
Lösung: Verwenden Sie das Schlüsselwort var einheitlich, um Konstanten zu definieren. In Bezug auf const, eine Methode zum Definieren von Variablen nach let in ES6, ist zu beachten, dass Sie beim Deklarieren einer Variablen ihr einen Wert zuweisen müssen, andernfalls wird ein Fehler gemeldet.

5. Window.event-Problem

Problembeschreibung: window.event kann nur unter IE ausgeführt werden, nicht jedoch unter Firefox. Dies liegt daran, dass das Ereignis von Firefox nur ausgeführt werden kann, wenn das Ereignis auftritt. Für den Einsatz vor Ort.

Lösung: Fügen Sie den Ereignisparameter zu der Funktion hinzu, in der das Ereignis auftritt, und verwenden Sie var myEvent = evt?evt:(window.event?window.event:null) im Funktionskörper (vorausgesetzt, der formale Parameter ist evt)
Beispiel:

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

6. Probleme mit event.x und event.y

7. Ermitteln Sie die Position der Maus auf der Seite

Unter IE das Ereignisobjekt hat x-, y-Attribute, aber es gibt keine pageX-, pageY-Attribute; >Verwenden Sie mX (mX = event. x ? event.x : event.pageX;), um event.x unter IE oder event.pageX unter Firefox zu ersetzen.

Bezüglich des Frame-Problems

Nehmen Sie den folgenden Frame als Beispiel:

1. Greifen Sie auf das Frame-Objekt zu

IE: Verwenden Sie window.frameId oder window.frameName, um auf das Frame-Objekt zuzugreifen.

Firefox: Verwenden Sie window.frameName, um auf den Frame zuzugreifen Objekt;

Lösung: Vereinheitlichung Verwenden Sie window.document.getElementById("frameId"), um auf dieses Frame-Objekt zuzugreifen

Sie können window.document.getElementById("frameId") verwenden. src = „webjx.com.html“ oder window.frameName.location = „webjx.com.html“, um den Inhalt des Frames zu ändern;

Wenn Sie die Parameter im Frame zurück an das übergeordnete Fenster übergeben müssen, Sie können
parent im Frame-Schlüsselwort
verwenden, um auf das übergeordnete Fenster zuzugreifen.

8. Problem beim Laden des Bodys

Problembeschreibung: Das Body-Objekt von Firefox existiert, bevor das Body-Tag vollständig vom Browser gelesen wird erst dann vorhanden, wenn der Browser sie vollständig gelesen hat.
[Hinweis] Dieses Problem wurde nicht tatsächlich überprüft und wird nach der Überprüfung geändert. [Hinweis] Es wurde bestätigt, dass das obige Problem in IE6, Opera9 und FireFox2 nicht auftritt. Ein einfaches JS-Skript kann auf alle Objekte und Elemente zugreifen, die vor dem Skript geladen wurden, auch wenn das Element nicht geladen wurde noch.

9. Ereignisdelegationsmethode

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的应用

Das obige ist der detaillierte Inhalt vonWeb-Frontend-Lösungen für Browserkompatibilitätsprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!