IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다.

PHP中文网

May 16, 2016 pm 07:05 PM

cssjavascript

Netscape는 Mozilla 브라우저를 처음 개발했을 때 현명하게도 W3C 표준을 지원하기로 결정했습니다. 따라서 Mozilla는 Netscape Navigator 4.x 및 Microsoft Internet Explorer 레거시 코드와 완전히 역호환되지 않습니다. 예를 들어 나중에 언급한 것처럼 Mozilla는 을 지원하지 않습니다. Internet Explorer 4 W3C 표준 개념이 존재하기 전에 구축된 이 브라우저는 많은 특징을 물려받았습니다. 이 기사에서는 Internet Explorer 및 기타 레거시 브라우저에 대한 강력한 HTML 이전 버전과의 호환성 기능을 제공하는 Mozilla의 특수 모드에 대해 설명합니다.

당시 W3C에는 해당 표준이 없기 때문에 XMLHttpRequest 및 서식 있는 텍스트 편집과 같은 Mozilla가 지원하는 비표준 기술에 대해서도 논의하겠습니다. 여기에는

HTML 4.01 및 XHTML 1.0/1.1
캐스케이딩 스타일 시트(CSS):
CSS 레벨 1, CSS 레벨 2 및 CSS 레벨 3 부분.
문서 객체 모델(DOM):
DOM 레벨 1, DOM 레벨 2 DOM 레벨 3의 일부
Math Markup 언어:
MathML 버전 2.0
확장 가능 마크업 언어(XML):
XML 1.0, XML의 네임스페이스, XML 문서 1.0과 스타일 시트 연결、XML용 조각 식별자
:
XSLT 1.0
XML 경로 언어:
>리소스 설명 프레임워크:
RDF
Simple Object Access Protocol:
SOAP 1.1
ECMA-262 개정 3(JavaScript 1.5):
ECMA
일반적인 크로스 브라우저 코딩 팁

웹 표준이 존재하더라도 서로 다른 브라우저는 정확히 동일하게 동작하지 않습니다(사실 동일한 브라우저라도 서로 다른 플랫폼에서의 동작도 다릅니다). Internet Explorer와 같은 많은 브라우저는 W3C 호환 브라우저에서 널리 지원되지 않은 W3C 이전 API를 여전히 지원합니다. IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. Mozilla와 Internet Explorer의 차이점을 살펴보기 전에 먼저 향후 새 브라우저에 대한 지원을 추가할 수 있도록 웹 애플리케이션을 확장 가능하게 만드는 몇 가지 기본 방법을 살펴보겠습니다.

동일한 기능을 위해 브라우저마다 서로 다른 API를 사용하는 경우가 있기 때문에 코드에 if() else가 많이 표시되는 경우가 많습니다() 다른 브라우저를 다르게 처리하려면 차단하세요. 다음 코드 블록은 Internet Explorer용입니다.

if() else()

위 코드는 확장이 불가능합니다. 새 브라우저를 지원해야 하는 경우 웹 애플리케이션의 모든 항목을 수정해야 합니다. .코드 블록은 다음과 같습니다.

 . . . 

var elm; 

if (ns4) 
 elm = document.layers["myID"]; 
else if (ie4) 
 elm = document.all["myID"];

새 브라우저에서 코딩을 방지하는 가장 쉬운 방법은 기능을 추상화하는 것입니다. 중첩된 if() else()  블록을 사용하지 마세요. 일반적인 작업을 별도의 함수로 추상화하면 효율성이 향상될 수 있습니다. 이렇게 하면 코드를 더 쉽게 읽을 수 있을 뿐만 아니라 새 클라이언트 지원을 추가하기도 더 쉬워집니다.

上述代码仍然存在浏览器嗅探 或者检测用户使用何种浏览器的问题。浏览器嗅探一般通过用户代理完成，比如：

 
 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016

虽然使用用户代理来嗅探浏览器提供了所用浏览器的详细信息，但是出现新的浏览器版本时处理用户代理的代码可能出错，因而需要修改代码。

如果浏览器的类型无关紧要（假设禁止不支持的浏览器访问 Web 应用程序），最好通过浏览器本身的能力来嗅探。一般可以通过测试需要的 JavaScript 功能来完成。比如，与其使用：

 
 if (isMozilla || isIE5)

不如用：

 
 if (document.getElementById)

这样不用任何修改，在其他支持该方法的浏览器如 Opera 或 Safari 上也能工作。

但是如果准确性很重要，比如要验证浏览器是否满足 Web 应用程序的版本要求或者尝试避免某个 bug，则必须使用用户代理嗅探。

JavaScript 还允许使用内嵌条件语句，有助于提高代码的可读性：

 
 var foo = (condition) ? conditionIsTrue : conditionIsFalse;

比如，要检索一个元素，可以用如下代码：

 function getElement(aID){ 
 return (document.getElementById) ? document.getElementById(aID)
          : document.all[aID];
}

回页首

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. Mozilla 和 Internet Explorer 的区别

首先讨论 Mozilla 和 Internet Explorer 在 HTML 行为方式上的区别。

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. 工具提示

遗留浏览器在 HTML 中引入了工具提示，在链接上显示 alt 属性作为工具提示的内容。最新的 W3C HTML 规范增加了 title 属性，用于包含链接的详细说明。现代浏览器应该使用 title 属性显示工具提示，Mozilla 仅支持用该属性显示工具提示而不能用 alt 属性。

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. 实体

HTML 标记可以包含多种实体，W3 标准体专门作了规定。可以通过数字或者字符引用来引用这些实体。比如，可以用 #160 或者等价的字符引用   来引用空白字符  。

一些旧式浏览器，如 Internet Explorer，有一些怪异的地方，比如允许用正常文本内容替换实体后面的分号（;）：

 
 &nbsp Foo 
 &nbsp&nbsp Foo

Mozilla 将把上面的 &nbsp 呈现为空格，虽然违反了 W3C 规范。如果后面紧跟着更多字符，浏览器就不能解析 &nbsp，如：

 
 &nbsp12345

这样的代码在 Mozilla 中无效，因为违反了 W3 标准。为了避免浏览器的差异，应坚持使用正确的形式（ ）。

回页首

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. DOM 차이점

DOM(문서 객체 모델)은 문서 요소를 포함하는 트리형 구조입니다. 이는 W3C의 표준이 있는 JavaScript API를 통해 조작할 수 있습니다. 그러나 W3C 표준화 이전에는 Netscape 4와 Internet Explorer 4에서도 비슷한 방식으로 이 API를 구현했습니다. Mozilla는 W3C 표준에서 지원하지 않는 레거시 API만 구현합니다.

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. 요소 액세스

요소 참조는 브라우저 간 방식으로 검색되지 않으며 document.getElementById(aID)document.getElementById(aID)를 사용하면 이 메서드는 Internet Explorer 5.5, Mozilla에서 사용할 수 있으며 DOM 수준의 일부입니다. 1개 사양.

Mozilla는 document.elementName<code>document.elementName 또는 요소 이름을 통한 요소 액세스를 지원하지 않지만 Internet Explorer는 메서드( 글로벌 네임스페이스 오염이라고도 함). Mozilla는 Netscape 4의 document.layers<code>document.layers 메서드와 Internet Explorer의 document.all<code>document.all 메소드. 요소를 검색하기 위한 document.getElementById<code>document.getElementById 외에도 document.layers <code>document.layers 및 document.all<code>document.all은 특정 태그 이름을 가진 모든 문서 요소 목록을 가져옵니다. code>

<code> 

요소.

W3C DOM 레벨 1 getElementsByTagName()<code>getElementsByTagName() 메소드를 사용하여 동일한 태그 이름 인용. 이 메소드는 document<code>document 요소에 사용할 수 있는 JavaScript 배열을 반환하며, 다른 노드에서도 사용할 수 있습니다. 해당 하위 트리. DOM 트리의 모든 요소 목록을 얻으려면 getElementsByTagName(*)<code>getElementsByTagName(*)을 사용하세요.

DOM 레벨 1 메소드는 표 1에 나열되어 있으며, 대부분은 요소를 특정 위치로 이동하거나 가시성(메뉴, 애니메이션)을 전환하는 데 사용됩니다. Netscape 4는  태그(Mozilla에서는 지원되지 않음)를 임의로 위치 지정 가능한 HTML 요소로 사용합니다. Mozilla에서는 

<code> 

태그 위치를 사용하세요. 요소는 Internet Explorer에서도 사용되며 HTML 사양에 포함되어 있습니다.

표 1. 요소에 액세스하는 데 사용되는 메서드

方法	说明
document.getElementById( aId )	返回具有指定 ID 的元素的引用。
document.getElementsByTagName( aTagName )	返回文档中具有指定名称的元素数组。

메서드

설명

document.getElementById( aId )

지정된 요소를 반환합니다. ID 요소에 대한 참조입니다.

document.getElementsByTagName( aTagName )

문서에서 지정된 이름을 가진 요소의 배열을 반환합니다.

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. 遍历 DOM

Mozilla 通过 JavaScript 支持遍历 DOM 树的 W3C DOM API（如表 2 所示）。文档中每个节点都可使用这些 API 方法，可以在任何方向上遍历树。Internet Explorer 也支持这些 API，还支持原来用于遍历 DOM 树的 API，比如 children 属性。

表 2. 用于遍历 DOM 的方法

属性/方法	说明
childNodes	返回元素所有子节点的数组。
firstChild	返回元素的第一个子节点。
getAttribute( aAttributeName )	返回指定属性的值。
hasAttribute( aAttributeName )	返回一个 Boolean 值表明当前节点是否包含指定名称的属性。
hasChildNodes()	返回一个布尔指表明当前节点是否有子节点。
lastChild	返回元素的最后一个子节点。
nextSibling	返回紧接于当前节点之后的节点。
nodeName	用字符串返回当前节点的名称。
nodeType	返回当前节点的类型。值说明1元素节点2属性节点3文本节点4CDATA 选择节点5实体引用节点6实体节点7处理指令节点8注释节点9文档节点10文档类型节点11文档片断节点12符号节点
nodeValue	返回当前节点的值。对于包含文本的节点，如文本和注释节点返回其字符串值。对于属性节点返回属性值。其他节点返回 `<span style="font-family:NSimsun">null</span>`。
ownerDocument	返回包含当前节点的 `<span style="font-family:NSimsun">document</span>` 对象。
parentNode	返回当前节点的父节点。
previousSibling	返回当前节点之前的相邻节点。
removeAttribute( aName )	从当前节点中删除指定的属性。
setAttribute( aName, aValue )	设置指定属性的值。

Internet Explorer 有一种非标准的特殊行为，这些 API 很多跳过（比如）新行字符生成的空白文本节点。Mozilla 则不跳过，因此有时候需要区分这些节点。每个节点都有一个 nodeType 属性指定了节点类型。比如，元素节点类型是 1，文本节点是 3，而注释节点是 8。仅处理元素节点最好的办法是遍历所有子节点，然后处理那些 nodeType 为 1 的节点：

 
 HTML:Test 
 cJavaScript: 
 var myDiv = document.getElementById("foo"); 
 var myChildren = myXMLDoc.childNodes; 
 for (var i = 0; i < myChildren.length; i++) { 
  if (myChildren[i].nodeType == 1){ 
  // element node
  }
 }

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. 콘텐츠 생성 및 조작

Mozilla는 document.write<code>document.write, document.open과 같은 DOM 레거시 메서드 <code>document.open 및 document.close<code>document.close. Mozilla는 기본적으로 모든 노드에서 작동하는 Internet Explorer의 InnerHTML<code>InnerHTML 메서드도 지원합니다. 그러나 OuterHTML<code>OuterHTML(요소 주위에 태그를 추가하고 표준에는 이에 상응하는 방법이 없음) 및 innerText<code>innerText (노드의 텍스트 값을 설정합니다. Mozilla에서는 textContent). textContent

Internet Explorer에는 값 검색, 텍스트 삽입, 노드에 인접한 요소 삽입 등 Mozilla에서 지원하지 않는 일부 비표준 콘텐츠 조작 방법이 있습니다(예: getAdjacentElement 및 insertAdjacentHTML<code>getAdjacentElement. 표 3은 모든 DOM 노드에 적용되는 콘텐츠를 조작하기 위한 W3C 표준과 Mozilla 방법을 보여줍니다. insertAdjacentHTML

표 3. 콘텐츠 조작을 위한 Mozilla 방법

방법

方法	说明
appendChild( aNode )	创建新的子节点。返回新建子节点的引用。
cloneNode( aDeep )	创建调用节点的副本并返回。如果 aDeep 为 true，则复制该节点的整个子树。
createElement( aTagName )	创建并返回一个 aTagName 指定类型的无父 DOM 节点。
createTextNode( aTextValue )	创建并返回一个新的无父 DOM 文本节点，值由 aTextValue 指定。
insertBefore( aNewNode, aChildNode )	在 aChildNode 前插入 aNewNode，前者必须是当前节点的子节点。
removeChild( aChildNode )	删除 aChildNode 并返回对它的引用。
replaceChild( aNewNode, aChildNode )	用 aNewNode 替换 aChildNode 并返回被删除节点的引用。

설명

appendChild( aNode )

새 하위 노드를 생성합니다. 새로 생성된 하위 노드에 대한 참조를 반환합니다.

cloneNode( aDeep )

호출 노드의 복사본을 생성하고 반환합니다. aDeep이 true이면 노드의 전체 하위 트리가 복사됩니다.

createElement( aTagName )

aTagName으로 지정된 유형의 부모 없는 DOM 노드를 생성하고 반환합니다.

createTextNode( aTextValue )

aTextValue로 지정된 값을 사용하여 새로운 부모 없는 DOM 텍스트 노드를 생성하고 반환합니다.

insertBefore( aNewNode, aChildNode )

aChildNode 앞에 NewNode를 삽입합니다. 전자는 현재 노드의 하위 노드여야 합니다.

removeChild( aChildNode )

aChildNode를 제거하고 이에 대한 참조를 반환합니다.

replaceChild( aNewNode, aChildNode )

aChildNode를 aNewNode로 바꾸고 삭제된 노드에 대한 참조를 반환합니다.

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. 문서 조각

getElementByIdappendChild성능상의 이유로 기존 문서의 DOM을 처리하는 대신 메모리에 문서를 생성하는 것이 가능합니다. DOM 레벨 1 Core는 일반 문서 인터페이스의 하위 집합을 포함하는 경량 문서인 문서 조각을 도입합니다. 예를 들어 getElementById

는 없지만 appendChild . 기존 문서에 문서 조각을 쉽게 추가할 수 있습니다.

document.createDocumentFragment()Mozilla는 document.createDocumentFragment()

를 사용하여 문서 조각을 생성합니다. 이 메서드는 빈 문서 조각을 반환합니다.

그러나 Internet Explorer의 문서 조각 구현은 W3C 표준을 따르지 않으며 일반 문서만 반환합니다.

回页首

뒤로 페이지 상단

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. JavaScript 差异

Mozilla 和 Internet Explorer 的多数差异都和 JavaScript 有关。但问题通常源自浏览器向 JavaScript 公开的 API，比如 DOM 钩子。两种浏览器在核心 JavaScript 上区别不大，遇到的问题通常和时间有关。

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. JavaScript date 差异

Date 惟一的区别是 getYear 方法。根据 ECMAScript 规范（这是 JavaScript 所遵循的规范），该方法没有解决千年问题，在 2004 年运行 new Date().getYear() 将返回“104”。根据 ECMAScript 规范，getYear 返回的年份减去 1900 最初是为了在 1998 年返回“98”。ECMAScript Version 3 废止了 getYear，用 getFullYear() 代替。Internet Explorer 修改了 getYear() 使其和 getFullYear() 类似，消除了千年问题，而 Mozilla 坚持采用标准的行为方式。

IBM 공식 정보는 Internet Explorer에서 Mozilla로 애플리케이션을 마이그레이션합니다. JavaScript 执行差异

不同的浏览器执行 JavaScript 的方式是不同的。比如，下列代码假设 script 块执行的时候 p 节点已经存在于 DOM 中：