JavaScript 브라우저 호환성 요약 및 일반적인 브라우저 호환성 분석_javascript 기술

이 기사는 IE, Firefox 등 일반적으로 사용되는 브라우저의 js 호환성 문제와 호환성 분석에 대해 Script House 편집자가 매일 편집한 것입니다. js 브라우저 호환성에 대한 지식에 관심이 있는 친구들은 함께 배워야 합니다!

1. 어린이와 어린이노드

IE에서 제공하는 childNode와 Firefox의 childNodes의 동작은 다릅니다. Firefox의 ChildNodes는 개행 문자와 공백 문자를 상위 노드의 하위 노드로 계산하지만 IE의 childNode와 하위는 그렇지 않습니다. 예:

<div id="dd">
<div>yizhu2000</div>
</div> 

d가 dd인 div는 IE에서 childNodes를 사용하여 볼 수 있지만 ff에서는 3개의 childNode가 있음을 알 수 있습니다. , "N"].

Firefox에서 어린이 속성을 시뮬레이션하려면 다음을 수행할 수 있습니다.

if (typeof(HTMLElement) != "undefined" && !window.opera) {
HTMLElement.prototype.__defineGetter__("children", function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
} 

2. 파이어폭스와 IE 사건

window.event는 IE에서만 사용할 수 있고, Firefox에서는 사용할 수 없습니다. 왜냐하면 Firefox의 이벤트는 이벤트가 발생한 장면에서만 사용할 수 있기 때문입니다. Firefox는 매개변수 전달을 위해 소스에서 이벤트를 추가해야 합니다. IE는 이 매개변수를 무시하고 window.event를 사용하여 이벤트를 읽습니다.

예를 들어 IE에서 마우스 위치를 가져오는 방법은 다음과 같습니다.

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script> 

을

으로 변경해야 합니다.

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script> 

두 브라우저 모두에서 사용할 수 있습니다

3.HTML 객체 획득 문제

FireFox 획득 방법 document.getElementById("idName")

즉, document.idname 또는 document.getElementById("idName")를 사용하세요

해결책: document.getElementById("idName")를 사용하세요.

4. const 문제

Firefox에서는 const 키워드나 var 키워드를 사용하여 상수를 정의할 수 있습니다.

IE에서는 var 키워드만 사용하여 상수를 정의할 수 있습니다.

해결책: var 키워드를 균일하게 사용하여 상수를 정의하세요.

5.프레임 문제

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

<frame src="xxx.html" id="frameId" name="frameName" /> 

a) 액세스 프레임 객체

IE: 이 프레임 개체에 액세스하려면 window.frameId 또는 window.frameName을 사용하세요.

Firefox: 이 프레임 개체는 window.frameName을 통해서만 액세스할 수 있습니다.

또한 window.document.getElementById("frameId")를 사용하여 IE와 Firefox 모두에서 이 프레임 개체에 액세스할 수 있습니다.

b) 프레임 내용 전환

IE와 Firefox 모두에서 작동

window.document.getElementById("testFrame").src = "xxx.html" 또는 window.frameName.location = "xxx.html"

프레임 내용을 전환하려면

프레임의 매개변수를 상위 창으로 다시 전달해야 하는 경우(오프너가 아니라 상위 창임에 유의) 프레임에서 상위 창을 사용하여 상위 창에 액세스할 수 있습니다. 예:

parent.document.form1.filename.value="아칭"

6. 신체 문제

Firefox의 본문은 브라우저에서 본문 태그를 완전히 읽은 후에 존재해야 하며, IE의 본문은 브라우저에서 본문 태그를 완전히 읽은 후에 존재해야 합니다.

7.firefox와 IE의 부모요소(parentElement)의 차이점

IE: obj.parentElement

firefox:obj.parentNode

해결책: Firefox와 IE는 모두 DOM을 지원하므로 모두 obj.parentNode를 사용합니다

8.InnerText 문제 innerText는 IE에서 정상적으로 작동하지만, FireFox에서는 innerText가 작동하지 않으므로 textContent를 사용해야 합니다.

해결책:

if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText = "my text";
} else {
document.getElementById('element').textContent = "my text";
} 

9. AJAX와 XMLHTTP의 차이점

var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 

참고: IE에서는 xmlhttp.send(content) 메소드의 내용이 비어 있을 수 있지만 Firefox에서는 null일 수 없습니다. Send("")를 사용해야 합니다. 그렇지 않으면 411 오류가 발생합니다.

이번 글에서 소개한 자바스크립트 브라우저 호환성 요약과 일반적인 브라우저 호환성 분석에 대해 편집자가 소개해 드리는 내용이 여러분께 도움이 되었으면 좋겠습니다!