JavaScript Browser compatibility Summary and common browser compatibility analysis _javascript tips

This article is the cloud Habitat Small series of daily finishing some of the JS compatibility issues, and IE and Firefox, and other common browser compatibility analysis, JS browser compatibility related knowledge of interested friends to study together!

1. Children and ChildNodes

IE provided by the children, ChildNodes and Firefox under the childnodes behavior is different, Firefox under ChildNodes will be line and white space characters are counted as the parent node of the child node, And the childnodes and children of IE will not. Like what:

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

D for DD div under IE with childnodes view, its child nodes are 1, and FF under three, we can see from the Firefox Dom viewer inside his childnodes as ["\ n", Div, "\ n"].

To simulate the properties of children under Firefox we can do this:

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.childnode S[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. Firefox and IE events

Window.event can only be used under IE, but not in Firefox, because Firefox event can only be used on the spot where events occur. Firefox must add an event as a parameter pass from the source. IE ignores this parameter and uses window.event to read the event.

Let's say this is the way to get the mouse position under IE:

<button onclick= "onclick ()" > get mouse click Horizontal coordinate </button>
<script type= "Text/javascript" >
function onclick () {
alert (event.clientx);
}

Need to be changed into

<button onclick= "onclick (event)" > Get outerhtml</button>
<script type= "Text/javascript" >
function onclick (event) {
event = Event | | window.event;
alert (EVENT.CLIENTX);
}

To use in both browsers

3.HTML Object Acquisition Problem

Firefox access mode document.getElementById ("Idname")

ie use document.idname or document.getElementById ("Idname")

Solution: Unified Use of document.getElementById ("Idname");

4. The question of the const

Under Firefox, you can use the Const keyword or the var keyword to define constants;

ie, only the var keyword can be used to define constants;

Workaround: Use the var keyword uniformly to define constants.

5.frame problem

Take the following frame as an example:

A) access to the Frame object

IE: Use Window.frameid or window.framename to access this frame object, Frameid and FrameName can have the same name;

Firefox: Only use Window.framename to access this frame object;

In addition, in IE and Firefox can use Window.document.getElementById ("Frameid") to access this frame object;

B Switch Frame contents

Can be used in both IE and Firefox

Window.document.getElementById ("Testframe"). src = "xxx.html" or window.frameName.location = "xxx.html"

To toggle the contents of the frame;

If you need to pass parameters in a frame back to the parent window (note that it is not opener, but parent), you can use parent in the frame to access the parent window. For example:

Parent.document.form1.filename.value= "Aqing";

6. Body Problem

The body of the Firefox body tag is not fully read by the browser before the presence of the body of IE must be in the body tag is fully read into the browser after the existence;

7. The difference between Firefox and IE's parent element (parentelement)

IE:obj.parentElement

Firefox:obj.parentNode

Workaround: Because both Firefox and IE support DOM, all use Obj.parentnode

8.innerText problem

InnerText in IE can work, but innertext in Firefox but not, needs textcontent;

Workaround:

if (Navigator.appName.indexOf ("explorer") >-1) {
document.getElementById (' element '). innertext = "my text";
} else {
document.getElementById (' element '). Textcontent = "my text";

9.AJAX get the difference of XMLHTTP

var xmlhttp;
if (window. XMLHttpRequest) {
xmlhttp = new XMLHttpRequest ();
} elseif (window. ActiveXObject) {//IE access mode
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");

Note: In IE, the content of the Xmlhttp.send (content) method can be empty, and Firefox is not NULL, you should use Send (""), or there will be 411 errors.

About this article to introduce you to the JavaScript Browser compatibility summary and common browser compatibility analysis, small series to introduce to everyone here, hope to help everyone!