1. Les styles CSS sont compatibles avec différents navigateurs
Navigateur | préfixe |
chrome | -kit Web |
safari | -kit Web |
Firefox | -moz |
C'EST À DIRE | -MS |
opéra | -o |
/*代码示例*/
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
2. Compatibilité des différents navigateurs avec divers problèmes de scène courants js
1. Méthode compatible pour obtenir un objet événementiel
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
2. Méthodes compatibles de bouillonnement d’événements
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
3. Méthodes compatibles pour empêcher le comportement par défaut du navigateur
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
4. Méthodes compatibles pour définir et supprimer des événements d'écoute
// obj为dom对象 inci为事件名称 比如click back为回调函数
// attachEvent 是老版本浏览器使用的添加事件的方法,现在统一使用addEventListener
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
// obj为dom对象 inci为事件名称 比如click back为回调函数
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
5. Valeur clé de l'événement clavier
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
6. Format de l'heure
Utilisez autant que possible AAAA/MM/JJ HH:mm:ss
car le navigateur Safari ne prend en charge que le format AAAA/MM/JJ HH:mm:ss et ne prend pas en charge AAAA-MM-JJ HH:mm:ss.
"2016-06-10 12:00:00".split('-').join('/')
7. Obtenez la hauteur de la barre de défilement
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
8.Problèmes avec innerText
Description du problème : innerText fonctionne normalement dans IE, mais innerText ne fonctionne pas dans FireFox.
Solution : utilisez textContent au lieu de innerText dans les navigateurs non IE.
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
9. Essayez de ne pas utiliser setAttribute()
L'utilisation de setAttribute pour définir les attributs de style et onclick ne fonctionne pas dans IE. Afin d'assurer la compatibilité avec différents navigateurs, vous pouvez utiliser la notation par points pour définir les propriétés d'objet, les propriétés de collection et les propriétés d'événement d'Element.
const dom = document.getElementById('element');
dom.style.color = "#00f";
10.Définir le nom de la classe
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
Problèmes 11.event.x et event.y
Description du problème : Sous IE, l'objet pair a les attributs x et y, mais pas d'attributs pageX et pageY ; sous Firefox, l'objet pair a les attributs pageX et pageY, mais pas d'attributs x et y.
var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;
12. Obtenez l'élément parent dom
Sous IE, utilisez obj.parentElement ou obj.parentNode pour accéder au nœud parent d'obj ; sous Firefox, utilisez obj.parentNode pour accéder au nœud parent d'obj.
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
13. Accéder et définir les données dans le presse-papiers
Pour accéder aux données du presse-papiers, vous pouvez utiliser l'objet clipboardData : dans IE, cet objet est une propriété de l'objet window ; dans Firefox, Chrome et Safari, cet objet est une propriété de l'objet event.
const setClipboardText = function (event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
};
const getClipboardText = function (event) {
const clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
};