브라우저 호환성 문제에 대한 웹 프런트엔드 솔루션

이번에는 브라우저 호환성 문제에 대한 웹 프런트엔드 솔루션을 가져왔습니다. 브라우저 호환성 문제를 해결하기 위한 웹 프런트엔드의 주의사항은 무엇인가요?

브라우저 호환성 문제라고 불리는 것은 브라우저마다 동일한 코드 조각에 대한 구문 분석이 다르기 때문에 페이지 표시 효과가 일관되지 않는 상황을 의미합니다. 대부분의 경우, 우리의 요구 사항은 사용자가 웹 사이트를 보거나 시스템에 로그인하기 위해 어떤 브라우저를 사용하든 통합된 디스플레이 효과가 있어야 한다는 것입니다. 따라서 브라우저 호환성 문제는 프런트 엔드 개발자가 자주 직면하고 해결해야 하는 문제입니다.

1. css3미디어 쿼리호환성 솔루션: Respond.js

GitHub 주소: https://github.com/scottjehl/Respond
(인터넷에서)
IE8은 CSS 미디어 쿼리를 지원하지 않으며 이는 반응형 디자인에 크게 해롭습니다. Respond.js는 IE6-8이 "최소/최대 너비" 미디어 쿼리 조건과 호환되도록 도울 수 있습니다.

사용방법: 페이지 내 모든 CSS 파일의 참조 위치 다음에 Respond.js를 참조하세요. 그리고 이전에 Respond.js를 참조할수록 사용자가 페이지 깜박임을 볼 가능성이 줄어듭니다.

2. 사용자 정의 속성 문제

문제 설명: IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 얻을 수 있고, Firefox에서는 getAttribute()를 사용하여 사용자 정의 속성을 가져올 수 있습니다. ) 사용자 정의 속성을 가져옵니다.
해결책: getAttribute()를 통해 사용자 정의 속성을 가져옵니다.

3. 변수 이름이 HTML의 ID와 일치하는 문제

문제 설명: IE에서는 HTML 개체의 ID를 문서의 하위 개체의 변수 이름으로 직접 사용할 수 있지만 사용할 수는 없습니다. Firefox에서는 HTML 개체의 ID를 사용할 수 있습니다. IE에서는 동일한 변수 이름을 사용할 수 없습니다.
해결책: document.idName 대신 document.getElementById("idName")를 사용하세요. 오류를 줄이려면 동일한 HTML 객체 ID를 가진 변수 이름을 사용하지 않는 것이 가장 좋습니다. 변수를 선언할 때 모호함을 피하기 위해 항상 var 키워드를 추가하세요.

4. Const 문제

문제 설명: Firefox에서는 const 키워드 또는 var 키워드를 사용하여 상수를 정의할 수 있지만 IE에서는 var 키워드만 사용하여 상수를 정의할 수 있습니다.
해결책: 상수를 정의하려면 var 키워드를 균일하게 사용하세요. ES6에서 let 이후에 변수를 정의하는 방식인 const에 대해 한 가지 주의할 점은 변수를 선언할 때 값을 할당해야 한다는 점이다. 그렇지 않으면 오류가 보고된다.

5.Window.event 문제

문제 설명: window.event는 IE에서만 실행 가능하고 Firefox에서는 실행이 불가능합니다. 이는 Firefox의 이벤트가 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다.

해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고, 함수 본문에 var myEvent = evt?evt:(window.event?window.event:null)을 사용합니다(형식 매개변수가 evt라고 가정).
예:

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

6. event.x 및 event.y 관련 문제

7. 페이지에서 마우스 위치 가져오기

IE에서는 이벤트 개체에 x, y 속성이 있지만 pageX, pageY 속성은 없습니다.
Firefox에서는 , 이벤트 개체에 pageX, pageY 속성이 있지만 x, y 속성이 없습니다.

해결책:

IE에서 event.x 대신 mX(mX = event.x ? event.x : event.pageX;)를 사용하세요. 또는 Firefox의 event.pageX.

7. 프레임 문제에 관해

다음 프레임을 예로 들어 보겠습니다.

1. 프레임 개체에 액세스합니다.
IE: 이 프레임 개체에 액세스하려면 window.frameId 또는 window.frameName을 사용합니다. Firefox: 이 프레임 개체에 액세스하려면 window.frameName을 사용하세요.
해결책: 이 프레임 개체에 액세스하려면 window.document.getElementById("frameId")를 동일하게 사용하세요.
Window.document.getElementById("frameId") IE와 Firefox 모두에서 사용할 수 있습니다. .src = "webjx.com.html" 또는 window.frameName.location = "webjx.com.html" 프레임의 내용을 전환합니다.
에서 매개변수를 전달해야 하는 경우; 프레임을 상위 창으로 다시 가져오려면 프레임 키워드
에서
parent를 사용하여 상위 창에 액세스할 수 있습니다.
8. 본문 로딩 문제

문제 설명: 브라우저가 본문 태그를 완전히 읽기 전에 Firefox의 본문 개체가 존재하지만, 브라우저가 본문 태그를 완전히 읽은 후에 IE의 본문 개체가 존재해야 합니다.

[참고] 이 문제는 실제로 검증되지 않았으며 검증 후 수정될 예정입니다.

[참고] IE6, Opera9, FireFox2에서는 위의 문제가 없는 것으로 확인되었습니다. 요소가 로드되지 않은 경우에도 스크립트 이전에 로드된 모든 개체 및 요소에 간단한 JS 스크립트로 액세스할 수 있습니다.

9. 이벤트 위임 방법

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

위 내용은 브라우저 호환성 문제에 대한 웹 프런트엔드 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!