JavaScript의 호환성 성능에 대한 자세한 분석

1. document.form.item 문제
문제:
코드에 FF에서 실행할 수 없는

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">document.formName.item("itemName")<br/></span>

와 같은 문이 있습니다. 해결 방법:
대신 를 사용하세요.

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">document.formName.elements["elementName"]<br/></span>

2. 컬렉션 클래스 객체 문제
문제:
코드의 많은 컬렉션 클래스 객체에 액세스할 때 ()를 사용합니다. IE는 이를 허용하지만
해결책:
아래 첨자 연산으로 대신 []를 사용합니다. , 예:

document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3.window.event
문제:
window.event를 사용하면 FF에서 실행할 수 없습니다. 해결 방법:
FF의 이벤트는 이벤트가 발생하는 장면에서만 사용할 수 있습니다. 아직 해결되지 않았습니다. 이 문제를 해결하려면 함수에 이벤트를 전달할 수 있습니다.

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">onMouseMove = "functionName(event)"<br/>function functionName (e) {<br/>    e = e || window.event;<br/>    ......<br/>}<br/></span>

4. HTML 객체의 ID를 객체 이름으로 사용하는 문제 문제:

In IE에서는 HTML 객체의 ID 문서의 하위 개체 변수 이름으로 직접 사용할 수 있습니다. FF해결 방법:

객체 변수 사용 시 모두 표준 getElementById("idName")를 사용합니다.5. 객체를 얻기 위한 idName 문자열
문제:


IE에서 eval("idName")을 사용하면 idName이 있는 HTML 객체를 얻을 수 있지만 FF솔루션:
에서는 사용할 수 없습니다.
getElementById("idName ") 대신 eval("idName")6. 변수 이름과 HTML 개체 ID와 동일한 문제
문제:


FF에서는 개체 ID가 HTML 개체의 이름으로 사용되지 않기 때문에 HTML 개체 ID와 동일한 변수 이름을 사용할 수 있지만 IE에서는 사용할 수 없습니다해결 방법:
변수 선언 시 모호함을 피하기 위해 항상
var를 추가해야 IE에서도 정상적으로 실행될 수 있습니다입니다. 오류를 줄이기 위해
HTML 개체 ID와 동일한 변수 이름을 사용하지 않는 것이 가장 좋습니다7. Event.x 및 event.y 문제
문제:

IE에서 이벤트 개체에는 x, y 속성이 있지만 FF.
해결책: 에서는 event.x에 해당하는 것이 event.pageX이지만 IE에는 event.pageX가 없습니다.

그래서 event.x 대신 event.clientX를 사용합니다. IEevent.clientX와 event.pageX의 이 변수는 미묘한 차이가 있습니다. 즉, 스크롤 막대는
완전히 동일해야 합니다. mX = event.x: event .pageX;
그런 다음
mX를 사용하여 event.x

8을 대체합니다. 프레임 문제에 관해:
window.testFrame을 사용하여
IE에서는 프레임을 얻을 수 있지만 FF
에서는 얻을 수 없습니다. 해결 방법:

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">window.top.document.getElementById("testFrame").src = &#39;xx.htm&#39;<br/>window.top.frameName.location = &#39;xx.htm&#39;<br/></span>

9. 요소의 속성을 가져옵니다

FF에서 정의한 속성은 getAttribute()
10으로 가져와야 합니다. FF에는 parentElement, parement.children이 없지만 parentNode, parentNode.childNodes가 있습니다. 질문: childNodes의 첨자의 의미는 IE와 FF에서 다릅니다. 빈 텍스트 노드는 FF
의 childNodes에 삽입됩니다. 해결책:

이 문제는
node.getElementsByTagName()
을 통해 피할 수 있습니다. 문제:
html의 노드가 누락된 경우 IE와 FF는 parentNode를 다르게 해석합니다. 예:

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;"><form><br/><table><br/><input/><br/></table><br/></form><br/></span>

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点
问题：
FF中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

11. const 问题
问题：
在IE中不能使用 const 关键字
解决方法：
以 var 代替

12. body 对象
FF的 body 在 body 标签没有被浏览器完全读入之前就存在，而IE则必须在 body 完全被读入之后才存在
这会产生在IE下，文档没有载入完时，在body上appendChild会出现空白页面的问题
解决方法：
一切在body上插入节点的动作，全部在onload后进行

13. url encoding
问题：
一般FF无法识别js中的&
解决方法：
在js中如果书写url就直接写&不要写&

14. nodeName 和 tagName 问题
问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空

15. 元素属性
IE下 input.type 属性为只读，但是FF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
问题：
在IE中，getElementsByName()、document.all[name] 均不能用来取得 p 元素
是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

17. 调用子框架或者其它框架中的元素的问题
在IE中，可以用如下方法来取得子元素中的值

document.getElementById("frameName").(document.)elementName
window.frames["frameName"].elementName

在FF中则需要改成如下形式来执行，与IE兼容：

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">window.frames["frameName"].contentWindow.document.elementName<br/>window.frames["frameName"].document.elementName<br/></span>

18. 对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">obj.style.height = imgObj.height + "px";<br/></span>

19. innerText的问题
问题：
innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText

20. event.srcElement和event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">var source = e.target || e.srcElement;<br/>var target = e.relatedTarget || e.toElement;<br/></span>

21. 禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: 

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">obj.onselectstart = function() {return false;}<br/></span>

FF: -moz-user-select:none;
22. 捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
IE:

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">obj.setCapture(); <br/>obj.releaseCapture();</span>

FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

<span style="font-family:&#39;微软雅黑&#39;, &#39;Microsoft YaHei&#39;;">window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/>if (!window.captureEvents) {<br/>       o.setCapture();<br/>}else {<br/>       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/>}<br/>if (!window.captureEvents) {<br/>       o.releaseCapture();<br/>}else {<br/>       window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);<br/>}</span>

위 내용은 JavaScript의 호환성 성능에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!