이번에는 브라우저 호환성 문제에 대한 웹 프런트엔드 솔루션을 가져왔습니다. 브라우저 호환성 문제를 해결하기 위한 웹 프런트엔드의 주의사항은 무엇인가요?
브라우저 호환성 문제라고 불리는 것은 브라우저마다 동일한 코드 조각에 대한 구문 분석이 다르기 때문에 페이지 표시 효과가 일관되지 않는 상황을 의미합니다. 대부분의 경우, 우리의 요구 사항은 사용자가 웹 사이트를 보거나 시스템에 로그인하기 위해 어떤 브라우저를 사용하든 통합된 디스플레이 효과가 있어야 한다는 것입니다. 따라서 브라우저 호환성 문제는 프런트 엔드 개발자가 자주 직면하고 해결해야 하는 문제입니다.
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에 대해 한 가지 주의할 점은 변수를 선언할 때 값을 할당해야 한다는 점이다. 그렇지 않으면 오류가 보고된다.
해결책: 이벤트가 발생하는 함수에 이벤트 매개변수를 추가하고, 함수 본문에 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)
...} 123456IE에서는 이벤트 개체에 x, y 속성이 있지만 pageX, pageY 속성은 없습니다.
Firefox에서는 , 이벤트 개체에 pageX, pageY 속성이 있지만 x, y 속성이 없습니다.
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. 본문 로딩 문제
[참고] 이 문제는 실제로 검증되지 않았으며 검증 후 수정될 예정입니다.
[참고] 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); 12.对于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中文网其它相关文章！
推荐阅读：
위 내용은 브라우저 호환성 문제에 대한 웹 프런트엔드 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
