Solutions frontales Web aux problèmes de compatibilité des navigateurs

Cette fois, je vous apporte la solution du front-end web au problème de compatibilité du navigateur. Quelles sont les précautions pour le front-end web pour résoudre le problème de compatibilité du navigateur. Voici les cas pratiques. jetez un oeil.

Le soi-disant problème de compatibilité des navigateurs fait référence à la situation dans laquelle différents navigateurs ont des interprétations différentes du même morceau de code, ce qui entraîne des effets d'affichage de page incohérents. Dans la plupart des cas, notre exigence est que quel que soit le navigateur utilisé par l'utilisateur pour consulter notre site Web ou se connecter à notre système, il doit y avoir un effet d'affichage unifié. Par conséquent, les problèmes de compatibilité des navigateurs sont des problèmes que les développeurs front-end rencontrent souvent et doivent résoudre :

1 css3media querySolution de compatibilité : Respond.js

Adresse GitHub : https://github.com/scottjehl/Respond
(depuis Internet)
IE8 ne prend pas en charge les requêtes multimédias CSS, ce qui nuit grandement au design réactif. Respond.js peut aider IE6-8 à être compatible avec les conditions de requête multimédia « min/max-width ».

Utilisation : référencez Respond.js après l'emplacement de référence de tous les fichiers CSS dans la page. Et plus Respond.js est référencé tôt, moins l'utilisateur a de chances de voir la page scintiller.

2. Problèmes d'attributs personnalisés

Description du problème : sous IE, vous pouvez utiliser la méthode d'obtention d'attributs normaux pour obtenir des attributs personnalisés, ou vous pouvez utiliser getAttribute() pour obtenir des attributs personnalisés sous ; Firefox, les attributs personnalisés ne peuvent être obtenus qu'en utilisant getAttribute().
Solution : obtenez des attributs personnalisés via getAttribute().

3. Le problème que le nom de la variable est le même que l'ID en HTML

Description du problème : Sous IE, l'ID de l'objet HTML peut être utilisé directement comme nom de variable du objet subordonné du document, mais pas sous Firefox ; Firefox Sous IE, vous pouvez utiliser le même nom de variable que l'ID de l'objet HTML, mais pas sous IE.
Solution : utilisez document.getElementById("idName") au lieu de document.idName. Il est préférable de ne pas utiliser de noms de variables avec le même ID d'objet HTML pour réduire les erreurs ; lors de la déclaration des variables, ajoutez toujours le mot-clé var pour éviter toute ambiguïté.

4. Problème Const

Description du problème : Sous Firefox, vous pouvez utiliser le mot-clé const ou le mot-clé var pour définir des constantes sous IE, vous ne pouvez utiliser que le mot-clé const. Mot-clé var pour définir des constantes.
Solution : utilisez le mot-clé var uniformément pour définir des constantes. Concernant const, qui est une méthode de définition de variables après let dans ES6, une chose à noter est que lors de la déclaration d'une variable, vous devez lui attribuer une valeur, sinon une erreur sera signalée.

5. Problème Window.event

Description du problème : window.event ne peut être exécuté que sous IE, mais pas sous Firefox En effet, l'événement de Firefox ne peut être exécuté que lorsque l'événement se produit. Pour une utilisation sur site.

Solution : ajoutez le paramètre d'événement à la fonction où l'événement se produit et utilisez var myEvent = evt?evt:(window.event?window.event:null) dans le corps de la fonction (en supposant que le paramètre formel est evt)
Exemple :

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

6. Problèmes avec event.x et event.y

7 Récupérer la position de la souris sur la page

Sous IE, l'objet événement. a des attributs x, y. Mais il n'y a pas d'attributs pageX, pageY ;
Sous Firefox, l'objet événement a des attributs pageX, pageY, mais pas d'attributs x, y.

Solution :

Utilisez mX (mX = event. x ? event.x : event.pageX;) pour remplacer event.x sous IE ou event.pageX sous Firefox.

Concernant le problème de frame

Prenons le cadre suivant comme exemple :

1. Accédez à l'objet frame

IE : utilisez window.frameId ou window.frameName pour accéder à l'objet frame
Firefox : utilisez window.frameName pour accéder au frame ; object;
Solution : Unification Utilisez window.document.getElementById("frameId") pour accéder à cet objet cadre ;
2. Changer le contenu du cadre
Vous pouvez utiliser window.document.getElementById("frameId"). src = " webjx.com.html" ou window.frameName.location = "webjx.com.html" pour changer le contenu du cadre
Si vous devez transmettre les paramètres du cadre à la fenêtre parent ; vous pouvez utiliser
parent dans le mot-clé du cadre
pour accéder à la fenêtre parent. 8. Problème de chargement du corps

Description du problème : l'objet body de Firefox existe avant que la balise body ne soit entièrement lue par le navigateur, alors que l'objet body d'IE doit l'être avant que la balise body ne soit lue. n'existe pas tant que le navigateur ne l'a pas complètement lu.

[Note] Ce problème n'a pas été réellement vérifié et sera modifié après vérification.

[Note] Il a été vérifié que le problème ci-dessus n'existe pas dans IE6, Opera9 et FireFox2. Un simple script JS peut accéder à tous les objets et éléments qui ont été chargés avant le script, même si l'élément n'a pas été chargé. encore.

9. Méthode de délégation d'événement

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!