JavaScript browser compatibility summary and common browser compatibility analysis

1. children and childrenNodes

There is a difference in behaviors of children, childrenNodes and childrenNodes under firefox provided by IE. ChildrenNodes under firefox will count both line breaks and whitespace characters as children of the parent nodes, while childrenNodes and children of IE will not. for example:

<div >
<div>yizhu2000</div>
</div> 

DV with dd is viewed with childNodes under IE. The number of children is 1 and ff is three. We can see from the dom viewer of firefox that its childNodes are ["\n ", div, "\n"].

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

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

2. Firefox and ie events

It can only be used in IE, not in Firefox, because Firefox event can only be used in the scene where the event occurs. Firefox must add event from the source for parameter passing. IE ignores this parameter and uses it to read the event.

For example, the following method to obtain the mouse position under ie:

<button onclick="onClick()" >Obtain the mouse click horizontal axis</button>
<script type="text/javascript">
function onclick(){
alert();
}
</script> 

Need to be changed to

<button onclick="onClick(event)">getOuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || ;
alert();
}
</script> 

Only use it in both browsers

Object acquisition problem

FireFox acquisition method ("idName")

ie use or ("idName")

Solution: Use ("idName");

4. Const issue

In Firefox, you can use the const keyword or the var keyword to define constants;

In IE, you can only use the var keyword to define constants;

Solution: Use the var keyword to define constants uniformly.

question

The following frame is an example:

<frame src=""  name="frameName" /> 

a) Access frame object

IE: Use or access this frame object, frameId and frameName can have the same name;

Firefox: Only use this frame object to access;

In addition, both IE and Firefox can use ("frameId") to access this frame object;

b) Switch frame content

It is available in both IE and Firefox

("testFrame").src = "" or = ""

To switch the frame content;

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

.="Aqing";

6. Body Problem

Firefox's body exists before the body tag is fully read in by the browser; while IE's body must exist after the body tag is fully read in by the browser;

7. The difference between firefox and IE parent element (parentElement)

IE：

firefox：

Solution: Because both firefox and IE support DOM, all use

The problem

innerText works normally in IE, but innerText does not work in FireFox, textContent is required;

Solution:

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

The difference between getting XMLHTTP

var xmlhttp;
if () {
xmlhttp = new XMLHttpRequest();
} elseif () { // How to obtain IExmlhttp = new ActiveXObject("");
} 

Note: In IE, the content of the (content) method can be empty, while firefox cannot be null. Send("") should be used, otherwise a 411 error will occur.

Regarding the JavaScript browser compatibility summary and common browser compatibility analysis introduced to you in this article, I will introduce it to you here, hoping it will be helpful to you!