Summary of Javascript compatibility between IE and Firefox [Recommended collection]_javascript skills

JavaScript compatibility has long been a major issue for web developers. Many developers struggle with the differences between formal specifications, de facto standards, and implementations. To this end, we mainly summarize the Javascript compatibility of IE and Firefox from the following aspects:

1. Differences in functions and methods; 2. Style access and settings; 3. DOM methods and objects Quote;
4. Event processing;
5. Compatible processing of other differences.


1. Differences between functions and methods
1. getYear() method
[Analysis explanation] First look at the following code:

Copy code The code is as follows:

var year= new Date().getYear();

document.write(year);


The date you get in IE is "2010", and the date you see in Firefox is "110", mainly because getYear in Firefox returns the value of "current year-1900" .

[Compatible processing]
　Add the judgment of the year, such as:

Copy the code The code is as follows:

var year= new Date().getYear();

year = (year<1900?(1900 year):year);
document.write(year);


It can also be called through getFullYear getUTCFullYear:

Copy code The code is as follows:

var year = new Date().getFullYear();

document.write(year);


2. eval() function

[Analysis description] In IE, You can use eval("idName") or getElementById("idName") to get the HTML object with the id idName; under Firefox, you can only use getElementById("idName") to get the HTML object with the id idName.
[Compatibility processing] Use getElementById("idName") uniformly to obtain the HTML object with the id idName.

3. const statement
[Analysis explanation] The const keyword cannot be used in IE. For example:
const constVar = 32;
This is a syntax error in IE.
[Compatibility processing] Do not use const and use var instead.

4. var
[Analysis instructions] Please see the following code:

Copy code The code is as follows:

echo=function(str){

document.write(str);
}


This function runs normally on IE, but not on Firefox An error was reported.

[Compatibility processing] It is normal to add var before echo. This is the purpose of us mentioning var.

5. const problem
[Analysis explanation] The const keyword cannot be used in IE. Such as const constVar = 32; This is a syntax error in IE.
【Solution】Do not use const and use var instead.


2. Style access and setting
1. CSS "float" attribute
[Analysis explanation] The most basic syntax for Javascript to access a given CSS value is: object .style.property, but some CSS properties have the same names as reserved words in Javascript, such as "float", "for", "class", etc. Different browsers have different writing methods. Write like this in IE:
document.getElementById("header").style.styleFloat = "left";
Write like this in Firefox:
document.getElementById("header"). style.cssFloat = "left";
[Compatibility processing] Add a judgment before writing to determine whether the browser is IE:
if(document.all){
　document.getElementById("header") .style.styleFloat = "left";
}
else{
　document.getElementById("header").style.cssFloat = "left";
}

2. Accessing "for" in the tag
[Analysis explanation] Just like the "float" attribute, you also need to use invisible syntax distinction to access "for" in the tag.
Write this in IE:

Copy the code The code is as follows:

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("htmlFor");


Write this in Firefox:

Copy code The code is as follows:

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute(" for");


[Compatibility Processing] The solution is to first determine the browser type.

3. Access and set the class attribute
[Analysis explanation] Also because class is a reserved word in Javascript, these two browsers use different JavaScript methods to obtain this attribute.
The writing method of all IE versions before IE8.0:

Copy the code The code is as follows:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

Applicable to IE8.0 and Firefox writing method:

Copy code The code is as follows:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

In addition, when using setAttribute() to set the Class attribute, the two browsers also have the same difference.
SetAttribute("className",value);
This writing method is applicable to all IE versions before IE8.0. Note: IE8.0 also does not support the "className" attribute.
SetAttribute("class",value); Applicable to IE8.0 and firefox.
[Compatibility processing]
Method one, write both:

Copy the code The code is as follows:

var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue") ;
//Set the header class to classValue

Method 2, both IE and FF support object.className, so you can write it like this:

Copy code The code is as follows:

var myObject = document.getElementById("header");
myObject.className="classValue";/ /Set the header class to classValue

Method three, first determine the browser type, and then use the corresponding writing method according to the browser type.

4. Object width and height assignment issues
[Analysis explanation] Statements like obj.style.height = imgObj.height in FireFox are invalid.
[Compatibility processing] Use obj.style.height = imgObj.height 'px';

3. DOM methods and object references
1. getElementById
[Analysis explanation] Let’s first look at a set of codes:

Copy the code The code is as follows:

< ;!-- input object access 1 -->
value="click me" ōnclick="alert(id.value)"/>

In Firefox, the button does not respond, but in IE, it is OK, because for IE, the ID of an HTML element can be used directly as a variable name in a script, while in Firefox Can't.
[Compatibility processing] Try to use the W3C DOM writing method. When accessing the object, use document.getElementById("id") to access the object by ID, and an ID must be unique in the page. Also use the tag name To access the object, use document.getElementsByTagName("div")[0]. This method is supported by many browsers.

Copy code The code is as follows: