Javascript multi browser compatibility summary of practical experience
- 2020-03-26 21:47:35
- OfStack
Document.formname. item(" itemName ") problem
Problem description: Internet explorer, you can use the document. The formName. Item (" itemName ") or the document. The formName. Elements (" elementName "); Firefox, can only use the document. The formName. Elements (" elementName ").
Solution: use unified document. FormName. Elements (" elementName ").
Two, set class object problem
Under IE, you can use () or [] to get the collection class object; Under Firefox, you can only use [] to get collection class objects.
Solution: uniformly use [] to get collection class objects.
Three, the custom attribute problem
Problem description: under IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes. Under Firefox, you can only get custom attributes using getAttribute().
Solution: get custom attributes uniformly through getAttribute().
Eval (" idName ") problem
Under IE, you can use eval(" idName ") or getElementById(" idName ") to get an HTML object with an id of idName. Under Firefox, you can only use getElementById(" idName ") to get an HTML object with an id of idName.
Solution: use getElementById(" idName ") to get HTML objects with id idName.
The problem that the variable name is the same as an HTML object ID
Problem description: under IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document, but not under Firefox. Under Firefox, you can use the same variable name as the HTML object ID, but not under IE.
Solution: use document.getelementbyid (" idName ") instead of document.idname. It is best not to take the same HTML object ID variable name, in order to reduce errors; When declaring variables, always add the var keyword to avoid ambiguity.
Vi. Const problem
In Firefox, you can use the const keyword or var keyword to define constants. Under IE, you can only use the var keyword to define constants.
Solution: use the var keyword to define constants uniformly.
Vii. Input.type attribute problem
Problem description: the input.type attribute under IE is read-only; But the input.type property under Firefox is read and write.
Solution: do not modify the input.type property. If you have to change it, you can hide the original input and insert a new input element in the same place.
window.event
Window.event can only run under IE, not Firefox, because Firefox's events can only be used in the event scene.
Solution: add the event parameter to the function where the event happened, and use var myEvent = evt? Evt: (window. The event? Window. The event: null)
Example:
9. Event.x and event.y
Under IE, the even object has x and y attributes, but no pageX and pageY attributes. Under Firefox, the even object has pageX and pageY properties, but no x or y properties.
Solution: var myX = event.x? Event. X: event. PageX; So var myY is equal to event.y? Event. Y: event. PageY;
If you consider item 8, use myEvent instead of event.
X. event.srcelement
Under IE, the even object has a srcElement attribute, but no target attribute. Under Firefox, the even object has a target attribute, but no srcElement attribute.
Solution: use srcObj = event.srcelement? Event. SrcElement: event. The target;
If you consider item 8, use myEvent instead of event.
Window.location.href problem
In IE or firefox 2.0.x, you can use window.location or window.location.href; In firefox 1.5.x, you can only use window.location.
Solution: use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method.
Modal and modeless window problems
Under IE, the modal and non-modal Windows can be opened through showModalDialog and showModelessDialog. Firefox does not.
Solution: directly use window.open(pageURL,name,parameters) to open a new window.
If you need to pass arguments from the child window back to the parent window, you can use window.opener in the child window to access the parent window. If you want the parent window to control the child window, use varsubWindow = window.open(pageURL,name,parameters); To get the newly opened window object.
Frame and iframe issues
The following frame is an example:
(1) access the frame object
IE: use window.frameid or window.framename to access the frame object;
Firefox: use window.framename to access the frame object;
Solution: use unified window. The document. The getElementById (" frameId ") to access the object frame;
(2) switch the frame content
Can be used in Internet explorer and Firefox window. The document. The getElementById (" frameId "). The SRC = "webjx.com.html" or window. FrameName. Location = "webjx.com.html" to change the content of the frame;
If you need to pass arguments from the frame back to the parent window, you can access the parent window in the frame using the parent keyword.
14. Body loading
Note: Firefox's body object exists before the body tag is fully read by the browser. IE's body object does not exist until the body tag has been read by the browser.
[note] this problem has not been actually verified and will be modified after verification.
Note: it is verified that IE6, Opera9, and FireFox2 do not have the above problems, and a simple JS script can access all the objects and elements that have been loaded before the script, even if the element has not been loaded yet.
Fifteen, the event delegate method
Under IE, use document.body.onload = inject; Function inject() has been implemented before; Under Firefox, use document.body.onload = inject();
Document.body.onload =new Function('inject()'); Document.body.onload = function(){}
Note the difference between a Function and a Function
The difference between the parent element being accessed
Problem description: under IE, use obj. ParentElement or obj. ParentNode to access obj's parent; Under firefox, obj.parentNode is used to access obj's parent.
Solution: because both firefox and IE support DOM, they use obj.parentNode to access obj's parents.
Seventeen, the innerText question
Note: innerText works fine in IE, but not in FireFox.
Solution: use textContent instead of innerText in non-internet explorer browsers.
Example:
InnerHTML is also supported by Internet explorer, firefox, and other browsers. OuterHTML, for example, is supported by Internet explorer, but not by Internet explorer.
18. Table operation problem
Note: ie, firefox, and other browsers all operate differently on the table TAB. The innerHTML of the table and tr are not allowed in ie, and the appendChild method does not work when adding a tr with js. Document.appendchild supports FIREFOX when inserting rows into a table, IE does not
Solution: insert rows into the TBODY, not directly into the table
Solutions:
// append a blank line to the table:
Var row = otable. InsertRow (1);
Var cell = document. The createElement method (" td ");
Cell. The innerHTML = "";
Cell. The className = "XXXX";
Row. The appendChild (cell);
It is recommended to use JS framesets to manipulate tables, such as JQuery.
19. Assignment of object width and height
Note: an invalid statement like obj. style-height = imgobj.height in FireFox.
Solution: use obj.style.height = imgobj.height + 'px';
Twenty, setAttribute (' style ', 'color: red; ')
FIREFOX supports it (all browsers now support it except IE), IE does not
Solution: no setAttribute('style','color:red')
Object. Style. CssText = 'color:red; '(there are exceptions to this)
The best way is to use all of the above methods, foolproof
One, class name Settings
The setAttribute (' class ', 'styleClass)
FIREFOX supports it, IE does not (specify the attribute name class, IE does not set the class attribute of the element, instead, IE automatically recognizes the CLASSNAME attribute when using setAttribute)
Solutions:
The setAttribute (' class ', 'styleClass)
The setAttribute (' className ', 'styleClass)
Or object. ClassName ='styleClass';
Both IE and FF support object.classname.
Set events with setAttribute
Var obj = document. GetElementById (" objId ");
Obj. SetAttribute (' onclick ', 'funcitonname (); ');
FIREFOX supports it, IE does not
Solutions:
In IE, you must use dot notation to refer to the required event handlers, and you must use the given anonymous function
As follows:
Var obj = document. GetElementById (" objId ");
Obj. Onclick = function () {fucntionname (); };
This approach is supported by all browsers
Two, three, establish radio button
Browsers other than IE
Solutions:
This is a little different from the previous one. This time it's completely different, so there's no common solution, so it's just if-else
Luckily, IE can recognize the document's uniqueID attribute, which no other browser can. Problem solving.
Problem description: Internet explorer, you can use the document. The formName. Item (" itemName ") or the document. The formName. Elements (" elementName "); Firefox, can only use the document. The formName. Elements (" elementName ").
Solution: use unified document. FormName. Elements (" elementName ").
Two, set class object problem
Under IE, you can use () or [] to get the collection class object; Under Firefox, you can only use [] to get collection class objects.
Solution: uniformly use [] to get collection class objects.
Three, the custom attribute problem
Problem description: under IE, you can use the method of obtaining general attributes to obtain custom attributes, or you can use getAttribute() to obtain custom attributes. Under Firefox, you can only get custom attributes using getAttribute().
Solution: get custom attributes uniformly through getAttribute().
Eval (" idName ") problem
Under IE, you can use eval(" idName ") or getElementById(" idName ") to get an HTML object with an id of idName. Under Firefox, you can only use getElementById(" idName ") to get an HTML object with an id of idName.
Solution: use getElementById(" idName ") to get HTML objects with id idName.
The problem that the variable name is the same as an HTML object ID
Problem description: under IE, the ID of the HTML object can be directly used as the variable name of the subordinate object of the document, but not under Firefox. Under Firefox, you can use the same variable name as the HTML object ID, but not under IE.
Solution: use document.getelementbyid (" idName ") instead of document.idname. It is best not to take the same HTML object ID variable name, in order to reduce errors; When declaring variables, always add the var keyword to avoid ambiguity.
Vi. Const problem
In Firefox, you can use the const keyword or var keyword to define constants. Under IE, you can only use the var keyword to define constants.
Solution: use the var keyword to define constants uniformly.
Vii. Input.type attribute problem
Problem description: the input.type attribute under IE is read-only; But the input.type property under Firefox is read and write.
Solution: do not modify the input.type property. If you have to change it, you can hide the original input and insert a new input element in the same place.
window.event
Window.event can only run under IE, not Firefox, because Firefox's events can only be used in the event scene.
Solution: add the event parameter to the function where the event happened, and use var myEvent = evt? Evt: (window. The event? Window. The event: null)
Example:
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...
}
9. Event.x and event.y
Under IE, the even object has x and y attributes, but no pageX and pageY attributes. Under Firefox, the even object has pageX and pageY properties, but no x or y properties.
Solution: var myX = event.x? Event. X: event. PageX; So var myY is equal to event.y? Event. Y: event. PageY;
If you consider item 8, use myEvent instead of event.
X. event.srcelement
Under IE, the even object has a srcElement attribute, but no target attribute. Under Firefox, the even object has a target attribute, but no srcElement attribute.
Solution: use srcObj = event.srcelement? Event. SrcElement: event. The target;
If you consider item 8, use myEvent instead of event.
Window.location.href problem
In IE or firefox 2.0.x, you can use window.location or window.location.href; In firefox 1.5.x, you can only use window.location.
Solution: use window.location instead of window.location.href. Of course, you can also consider using the location.replace() method.
Modal and modeless window problems
Under IE, the modal and non-modal Windows can be opened through showModalDialog and showModelessDialog. Firefox does not.
Solution: directly use window.open(pageURL,name,parameters) to open a new window.
If you need to pass arguments from the child window back to the parent window, you can use window.opener in the child window to access the parent window. If you want the parent window to control the child window, use varsubWindow = window.open(pageURL,name,parameters); To get the newly opened window object.
Frame and iframe issues
The following frame is an example:
(1) access the frame object
IE: use window.frameid or window.framename to access the frame object;
Firefox: use window.framename to access the frame object;
Solution: use unified window. The document. The getElementById (" frameId ") to access the object frame;
(2) switch the frame content
Can be used in Internet explorer and Firefox window. The document. The getElementById (" frameId "). The SRC = "webjx.com.html" or window. FrameName. Location = "webjx.com.html" to change the content of the frame;
If you need to pass arguments from the frame back to the parent window, you can access the parent window in the frame using the parent keyword.
14. Body loading
Note: Firefox's body object exists before the body tag is fully read by the browser. IE's body object does not exist until the body tag has been read by the browser.
[note] this problem has not been actually verified and will be modified after verification.
Note: it is verified that IE6, Opera9, and FireFox2 do not have the above problems, and a simple JS script can access all the objects and elements that have been loaded before the script, even if the element has not been loaded yet.
Fifteen, the event delegate method
Under IE, use document.body.onload = inject; Function inject() has been implemented before; Under Firefox, use document.body.onload = inject();
Document.body.onload =new Function('inject()'); Document.body.onload = function(){}
Note the difference between a Function and a Function
The difference between the parent element being accessed
Problem description: under IE, use obj. ParentElement or obj. ParentNode to access obj's parent; Under firefox, obj.parentNode is used to access obj's parent.
Solution: because both firefox and IE support DOM, they use obj.parentNode to access obj's parents.
Seventeen, the innerText question
Note: innerText works fine in IE, but not in FireFox.
Solution: use textContent instead of innerText in non-internet explorer browsers.
Example:
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = ";my text";
}
InnerHTML is also supported by Internet explorer, firefox, and other browsers. OuterHTML, for example, is supported by Internet explorer, but not by Internet explorer.
18. Table operation problem
Note: ie, firefox, and other browsers all operate differently on the table TAB. The innerHTML of the table and tr are not allowed in ie, and the appendChild method does not work when adding a tr with js. Document.appendchild supports FIREFOX when inserting rows into a table, IE does not
Solution: insert rows into the TBODY, not directly into the table
Solutions:
// append a blank line to the table:
Var row = otable. InsertRow (1);
Var cell = document. The createElement method (" td ");
Cell. The innerHTML = "";
Cell. The className = "XXXX";
Row. The appendChild (cell);
It is recommended to use JS framesets to manipulate tables, such as JQuery.
19. Assignment of object width and height
Note: an invalid statement like obj. style-height = imgobj.height in FireFox.
Solution: use obj.style.height = imgobj.height + 'px';
Twenty, setAttribute (' style ', 'color: red; ')
FIREFOX supports it (all browsers now support it except IE), IE does not
Solution: no setAttribute('style','color:red')
Object. Style. CssText = 'color:red; '(there are exceptions to this)
The best way is to use all of the above methods, foolproof
One, class name Settings
The setAttribute (' class ', 'styleClass)
FIREFOX supports it, IE does not (specify the attribute name class, IE does not set the class attribute of the element, instead, IE automatically recognizes the CLASSNAME attribute when using setAttribute)
Solutions:
The setAttribute (' class ', 'styleClass)
The setAttribute (' className ', 'styleClass)
Or object. ClassName ='styleClass';
Both IE and FF support object.classname.
Set events with setAttribute
Var obj = document. GetElementById (" objId ");
Obj. SetAttribute (' onclick ', 'funcitonname (); ');
FIREFOX supports it, IE does not
Solutions:
In IE, you must use dot notation to refer to the required event handlers, and you must use the given anonymous function
As follows:
Var obj = document. GetElementById (" objId ");
Obj. Onclick = function () {fucntionname (); };
This approach is supported by all browsers
Two, three, establish radio button
Browsers other than IE
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');
IE:
var rdo =document.createElement( " <input name= " radiobtn " type= " radio " value= " checked " /> " );
Solutions:
This is a little different from the previous one. This time it's completely different, so there's no common solution, so it's just if-else
Luckily, IE can recognize the document's uniqueID attribute, which no other browser can. Problem solving.