Official ibm documents migrate applications from Internet Explorer to Mozilla page 1/2

When Netscape first developed the Mozilla browser, it was wise to decide to support W3C standards. Therefore, the legacy code of Mozilla, Netscape Navigator 4.x, and Microsoft Internet Explorer is not fully backward compatible.<layer>. Internet Explorer 4 These browsers created before the emergence of W3C standards inherit a lot of weirdness. This article will discuss Mozilla's special mode, which provides powerful HTML backward compatibility functions for Internet Explorer and other legacy browsers.

I will also discuss non-standard technologies supported by Mozilla, such as XMLHttpRequest and rich text editing, because W3C had no corresponding standards at the time. Including:

• HTML 4.01 and XHTML 1.0/1.1
• Cascading Style Sheets (CSS): CSS Level 1, CSS Level 2, and CSS Level 3.
• Document Object Model (DOM): DOM Level 1, DOM Level 2, and DOM Level 3
• Math markup language: MathML Version 2.0
• Extensible Markup Language (XML): XML 1.0, Namespaces in XML, Associating Style Sheets with XML Documents 1.0, Fragment Identifier for XML
• XSL conversion: XSLT 1.0
• XML Path: XML 1.0
• Resource Description Framework: RDF
• Simple Object Access Protocol: SOAP 1.1
• ECMA-262 Revision 3 (JavaScript 1.5): ECMA

Common cross-browser coding skills

Although there are Web standards, the behavior of different browsers is not exactly the same (in fact, the behavior of the same browser on different platforms is also different ). Many browsers, such as Internet Explorer, still support APIs earlier than W3C that have never been widely supported in W3C compliant browsers.

Before discussing the differences between Mozilla and Internet Explorer, we will first introduce some basic methods to make Web applications scalable so that new browsers can be added in the future.

Because different browsers sometimes use different APIs for the same function, we often see a lotif() else()Block to treat different browsers differently. The following code block is used for Internet Explorer:

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

The above code is not scalable. To support new browsers, you must modify all such code blocks in Web applications.

The simplest way to avoid re-encoding for a new browser is to abstract the function. Do not use layer-by-layer nestingif() else()And abstract general tasks into separate functions to improve efficiency. This not only makes the code easier to read, but also facilitates the support of new clients:

var elm = getElmById("myID"); function getElmById(aID){ var element = null; if (isMozilla || isIE5) ?element = document.getElementById(aID) else if (isNetscape4) element = document.layers[aID] else if (isIE4) element = document.all[aID]; return element; }

The above code still existsBrowser sniffingOr you can check the browser you are using. Browser sniffing is generally completed through a user agent, for example:

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

Although the user agent is used to sniff the detailed information of the browser used, the code for processing the user agent may fail when a new browser version appears, so you need to modify the code.

If the browser type is irrelevant (assuming that unsupported browsers are prohibited from accessing Web applications), it is best to sniff through the browser's own capabilities. Generally, you can test the required JavaScript function. For example, instead of using:

if (isMozilla || isIE5)

Better use:

if (document.getElementById)

In this way, other browsers that support this method, such as Opera or Safari, can work without any modification.

However, if the accuracy is very important, such as verifying whether the browser meets the Web application version requirements or trying to avoid a bug, you must use the user agent to sniff.

JavaScript also allows the use of nested condition statements to improve code readability:

var foo = (condition) ? conditionIsTrue : conditionIsFalse;

For example, to retrieve an element, use the following code:

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

Back to Top

Differences between Mozilla and Internet Explorer

First, we will discuss the differences between Mozilla and Internet Explorer in HTML behavior.

Tooltip

The legacy browser introduces a tooltip in HTML, which is displayed on the link.altAttribute as the content of the tooltip. The latest W3C HTML specification has been addedtitleAttribute, used to include detailed descriptions of links. Modern browsers should usetitleProperty display tooltip. Mozilla only supports this property display tooltip, but notaltAttribute.

Entity

HTML tags can contain multiple types of entities. W3 standard bodies are specifically defined. These entities can be referenced by numbers or character references. For example, you can use #160 or equivalent characters to reference To reference white space characters .

Some old browsers, such as Internet Explorer, have some strange things, such as allowing replacement of semicolons (;):

Foo    Foo

Mozilla will Rendered as a space, which violates W3C specifications. If more characters are followed, the browser cannot parse Such:

&nbsp12345

This code is invalid in Mozilla because it violates the W3 standard. In order to avoid the difference between browsers, we should stick to the correct form ( ).

Back to Top

DOM difference

The Document Object Model (DOM) is a tree structure containing document elements. You can use JavaScript APIs to manipulate it, which is a W3C standard. However, before W3C standardization, Netscape 4 and Internet Explorer 4 implemented this API in a similar way. Mozilla only implements those legacy APIs not supported by W3C standards.

Access Element

Reference of elements not retrieved in cross-browser mode should be useddocument.getElementById(aID)This method can be used in Internet Explorer 5.5 + and Mozilla, and is part of the DOM Level 1 specification.

Mozilla does not supportdocument.elementNameYou can even access an element by element name. Internet Explorer supports this method (also knownGlobal namespace pollution). Mozilla does not support Netscape 4 either.document.layersMethod and Internet Explorerdocument.allMethod. Besidesdocument.getElementByIdYou can also search for elements.document.layersAnddocument.allObtain a list Of all document elements with a specific tag name, such as all<div>Element.

W3C DOM Level 1 usagegetElementsByTagName()Method To obtain references to all elements with the same tag name. This method returns an array in JavaScript and can be useddocumentIt can also be used by other nodes to retrieve only the corresponding subtree. To obtain a list of all elements in the DOM tree, you can usegetElementsByTagName(*).

Table 1 lists the DOM Level 1 methods, most of which are used to move elements to a specific location or switch their visibility (menus, animations ). Use Netscape 4<layer>Tags (not supported by Mozilla) are HTML elements that can be located at will. In Mozilla<div>Tag positioning element, which is also used by Internet Explorer and also included in the HTML specification.

Table 1. Methods used to access elements

Method	Description
Document. getElementById (aId)	Returns a reference to an element with the specified ID.
Document. getElementsByTagName (aTagName)	Returns an array of elements with the specified name in the document.

Traverse DOM

Mozilla uses JavaScript to support W3C DOM APIs that traverse the DOM tree (as shown in table 2 ). Each node in this document can use these API methods to traverse the tree in any direction. Internet Explorer also supports these APIs and APIs used to traverse the DOM tree, suchchildrenAttribute.

Table 2. Methods used to traverse the DOM

Attribute/Method	Description
ChildNodes	Returns an array of all child nodes of an element.
FirstChild	Returns the first subnode of an element.
GetAttribute (aAttributeName)	Returns the value of the specified property.
HasAttribute (aAttributeName)	Returns a Boolean value indicating whether the current node contains the attribute of the specified name.
HasChildNodes ()	Returns a Boolean indicating whether the current node has a subnode.
LastChild	Returns the last subnode of an element.
NextSibling	Returns the node that follows the current node.
NodeName	Returns the name of the current node using a string.
NodeType	Returns the type of the current node. Value Description 1 Element Node 2 Attribute node 3 Text Node 4 CDATA Node Selection 5 Entity reference node 6 Entity Node 7 Processing Command Node 8 Comment nodes 9 Document Node 10 Document Type Node 11 Document segment Node 12 Symbol Node
NodeValue	Returns the value of the current node. Return the string value of a node that contains text, such as text and comment. Attribute values are returned for Attribute nodes. Other node returnnull.
OwnerDocument	ReturnsdocumentObject.
ParentNode	Returns the parent node of the current node.
Previussibling	Returns the adjacent node before the current node.
RemoveAttribute (aName)	Deletes a specified attribute from the current node.
SetAttribute (aName, aValue)	Set the value of the specified attribute.

Internet Explorer has a non-standard special behavior. Many of these Apis SKIP (for example,) blank text nodes generated by new line characters. Mozilla does not skip, So you sometimes need to differentiate these nodes. Each node hasnodeTypeThe Property specifies the node type. For example, the element node type is 1, the text node is 3, and the comment node is 8. The best way to process only element nodes is to traverse all child nodes and then process those nodes whose nodeType is 1:

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

Generate and manipulate content

Mozilla supports the legacy Method for dynamically adding content to DOM, as shown in figuredocument.write,document.openAnddocument.close. Mozilla also supportsInnerHTMLMethod, which can be basically used on any node. But not supportedOuterHTML(Adding a tag around the element does not have an equivalent method in the standard) andinnerText(Set the node text value, which can be used in MozillatextContent).

Internet Explorer has some non-standard content operation methods not supported by Mozilla, including retrieving values, inserting text, and inserting elements near a node, suchgetAdjacentElementAndinsertAdjacentHTML. Table 3 describes W3C standards and how Mozilla operates content. These methods apply to any DOM node.

Table 3. Mozilla content manipulation

Method	Description
AppendChild (aNode)	Create a new subnode. Returns the reference of the new subnode.
CloneNode (aDeep)	Create a copy of the call node and return it. If aDeep is true, the entire subtree of the node is copied.
CreateElement (aTagName)	Create and return a parent-less DOM node of the specified type of aTagName.
CreateTextNode (aTextValue)	Create and return a new non-parent DOM text node. The value is specified by aTextValue.
InsertBefore (aNewNode, aChildNode)	Insert aNewNode before aChildNode. The former must be a subnode of the current node.
RemoveChild (aChildNode)	Delete aChildNode and return a reference to it.
ReplaceChild (aNewNode, aChildNode)	Replace aChildNode with aNewNode and return the reference of the deleted node.

Document snippets

For performance reasons, you can create a document in memory instead of processing the DOM of an existing document. DOM Level 1 Core introduces document snippets, a subset of a lightweight document that contains common document interfaces. For example, nogetElementByIdHoweverappendChild. It is easy to add document fragments to existing documents.

Use Mozilladocument.createDocumentFragment()Create a document clip. This method returns an empty document clip.

However, the implementation of document fragments in Internet Explorer does not follow W3C standards, and only common documents are returned.

Back to Top

JavaScript differences

Most of the differences between Mozilla and Internet Explorer are related to JavaScript. However, the problem is usually caused by APIs exposed by browsers to JavaScript, such as DOM hooks. The two browsers have little difference in the core JavaScript, and the problem is usually related to time.

JavaScript date difference

DateThe only difference is thatgetYearMethod. According to the ECMAScript specification (this is the specification followed by JavaScript), this method did not solve the millennium problem and was run in 2004.new Date().getYear()104 is returned ". According to ECMAScript specifications,getYearThe returned year minus 1900 is initially returned for "98" on January 1, 1998 ". ECMAScript Version 3 abolishedgetYear, UsegetFullYear(). Internet Explorer modifiedgetYear()Make it andgetFullYear()Similarly, the millennium issue was eliminated, while Mozilla insisted on adopting standard behavior patterns.

Differences in JavaScript Execution

Different browsers execute JavaScript in different ways. For example, the following code assumesscriptWhen the block is executeddivThe node already exists in the DOM:

... <div id="foo">Loading...</div> <script> document.getElementById("foo").innerHTML = "Done."; </script>

However, this cannot be guaranteed. To ensure that all elements already exist<body>Element usageonloadEvent Handler:

<body onload="doFinish()"> <div id="foo">Loading...</div> <script> function doFinish() { var element = document.getElementById("foo"); element.innerHTML = "Done."; } </script> ...

These time-related problems are also related to hardware. Slow systems may find Bugs hidden by fast systems. A specific example is:window.open, Which opens a new window:

<script> function doOpenWindow(){ var myWindow = window.open("about:blank"); myWindow.location.href = "http://www.ibm.com"; } </script>

The problem with this Code is thatwindow.openIt is asynchronous. JavaScript execution is not blocked before the window is opened. Therefore,window.openThe following rows may be executed before the new window is opened. You canonloadSolve the problem in the handler, and then open its window through the callback (Usewindow.opener).

Differences between JavaScript-based HTML generation

JavaScript can usedocument.writeGenerate HTML with strings in real time. The main problem is that if embedded in an HTML document (<script>The HTML generated by JavaScript contains<script>Label. If the document adopts the strict rendering mode</script>Interpreted as outer layer<script>. The following code demonstrates this well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... <script> document.write("<script>alert("Hello")</script>") </script>

Because the page adopts the strict mode, the Mozilla parser will see the first<script>And parse it until the first end tag is found, that is, the first end tag.</script>. This is because the parser does not know when JavaScript (or any other language) uses the strict mode. In special mode, the parser analyzes JavaScript During the parsing process (thus reducing the speed ). Internet Explorer always adopts special mode, so it does not really support XHTML. To use the strict mode in Mozilla, You need to split the string into two parts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... <script> document.write("<script>alert("Hello")</" + "script>") </script>

Debug JavaScript

Mozilla provides multiple methods to debug JavaScript-related issues in Applications created for Internet Explorer. The first tool is the built-in JavaScript console, as shown in 1, which records error and warning information. SelectTools-> Web Development-> JavaScript ConsoleOr selectTools-> JavaScript ConsoleYou can open it.

Figure 1. JavaScript Console

The JavaScript console displays the complete log list, errors, warnings, and messages. The error message in Figure 1 indicates that the variable is_ns70 accessed by row aol.com 95th does not exist. Click this link to open the Mozilla internal view source code window, highlighting the error line.

The console also allows you to evaluate JavaScript. To calculate the input JavaScript syntax, enter it in the input field1+1Then pressEvaluate, As shown in result 2.

Figure 2. Evaluate the JavaScript Console

Mozilla's JavaScript engine has built-in debugging support, which provides JavaScript developers with powerful tools. As shown in figure 3, Venkman is a powerful cross-platform JavaScript debugger that is integrated with Mozilla. It is usually bundled with the Mozilla release package. You can selectTools-> Web Development-> JavaScript DebuggerOpen it. Firefox does not bind this debugger, but you can download the installation from the http://www.mozilla.org/projects/venkman. You can also find the relevant tutorials on the Development page, the Development page URL is http://www.hacksrus.com /~ Ginda/venkman /.

Figure 3. Mozilla JavaScript Debugger

The JavaScript debugger can debug JavaScript running in the Mozilla browser window. It supports standard debugging features such as breakpoint management, viewing call stacks, and checking variables/objects. All features can be accessed through the user interface or the interactive console of the debugger. Through the console, You can execute any JavaScript code in the same scope as the JavaScript code for debugging.