Common JavaScript compatibility issues and related solutions (chrome/IE/firefox)

Common JavaScript compatibility issues and related solutions (chrome/IE/firefox)_javascript skills

WBOY

Release： 2016-05-16 17:05:57

Original

972 people have browsed it

First of all, let me declare here that the version of the browser I tested is chrome15.0.874.121 Firefox 8.01 IE9 IETester

The following code is about statement

1: The situation of getting the scroll bar

Copy the code The code is as follows:

function getScroll(){
 var t, l, w, h;

 if (document.documentElement && document.documentElement.scrollTop) {
 t = document.documentElement.scrollTop ;//The top of the scroll bar
 l = document.documentElement.scrollLeft;//The left end of the scroll bar
 w = document.documentElement.scrollWidth;//The width of the scroll bar, that is, the width of the page
 h = document.documentElement.scrollHeight;//The height of the scroll bar l = document. body.scrollLeft;
 w = document.body.scrollWidth;
 h = document.body.scrollHeight;
 }
 return {
 t: t,
 l: l,
                 w: w,
                                                                                                                                                                                                                                                                          ​>


Copy code


 The code is as follows:

function getPageWidth(){
var pageWidth = window.innerWidth; if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") { pageWidth = document.documentElement.clientWidth;

} else { pageWidth = document.body.clientWidth; . .innerHeight; if (typeof pageWindth != "number") { else { = document.body.clientHeight;

. >

Copy code

The code is as follows:

function(){
 var Sys = {};
 var ua = navigator.userAgent.toLowerCase();
 var s;
 (s = ua.match(// msie ([d.] )/)) ? Sys.ie = s[1] : (s = ua.match(/firefox/([d.] )/)) ? Sys.firefox = s[1] : ( s = ua.match(/chrome/([d.] )/)) ? Sys.chrome = s[1] : (s = ua.match(/opera.([d.] )/)) ? Sys. opera = s[1] : (s = ua.match(/version/([d.] ).*safari/)) ? Sys.safari = s[1] : 0;

 if (Sys .ie != null) {
                                                                                                                                                                                                                          return ("firefox:" Sys.firefox);//Determine the firefox browser and version number
 }
 if (Sys.chrome != null) {
 return ("chrome:" Sys.chrome) ; // Judge the Chrome browser and version number 
} 
 if (sys.opera! = Null) {
 Return ("Opera:" sys.opra); 
 }
 if (Sys.safari != null) {
 return ("safari:" Sys.safari);//Determine the safari browser and version number 
 }
 }



4: Event monitoring

Copy code The code is as follows:function(element, type, handler){

If (element.addEventListener) {

 element.addEventListener(type, handler, false);
 }
 else 
 if (element.attachEvent) {
                                                                                                               }
 }



5: Event removal

Copy code
The code is as follows:

function(element, type, handler){ if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else

if (element.detachEvent) element["on" type] = null;

 }
 }

6: When event is obtained, when Firefox events are continuously dispatched, problems will occur in the first event. 

Copy code

The code is as follows:

function(event){

 event = (event ? event : window.event);
 if (event == null) {
 var $E = function() {
 var c = $E.caller;
 while (c.caller) 
 c = c.caller;
 return c.arguments[0]
        };
              __defineGetter__( "event", $E);
                                                                                                 Return event; >

Copy code

The code is as follows:
function(event){

preventDefault(); } else { event.returnValue = false; } }

8: Do not continue to propagate events

Copy code

The code is as follows:

function(event){ if (event .stopPropagation) {

>9: Get the target of the event

Copy the code

 The code is as follows:

function( event){
 return event.target || event.srcElement;
 }

10: document.doctype supports inconsistent

E: If a document type description exists, it will be incorrectly interpreted as a comment and treated as a Comment node. The value of document.doctype is always null. Firefox: If a document type description exists, it will be used as the first child node of the document. document.doctype is a DocumentType node. The same node can also be accessed through firstChild or childNodes[0]. Safari, Chrome, Opera: If a document type description exists, it will be used as an explanation, but will not be used as a child node of the document and will not appear in childNodes.

11: Find elements 

Sometimes, I really don’t understand what IE is always doing and always trying to be new and different. If the system does not allow its own browser, I dare say that IE's share will be even smaller. 

If the id and name are the same, he will also be returned

Copy code

The code is as follows:

In IE, the results change.

The same is IE, the Id is case-insensitive

Copy the code The code is as follows:

Sorry, his results have changed again.

12: If it is a custom attribute, item.myattributs cannot get the correct result in non-IE browsers.

Copy code The code is as follows:

function(item,myatt){
 return item.attributes[myatt].value;
 }

Similarly, you should know how to set attributes, which is to assign values.

Copy code The code is as follows:

function(item,myatt,value){
 item.attributes[myatt].value=value;
 }

13: The number of child nodes of the element

Copy code The code is as follows:

 
first

second

third

IE result is 3, other browsers are 7. The blank characters between

Nodes are text nodes in other browsers, and the result is 7. If it becomes like this,

Copy the code The code is as follows:

first
second
third

This way everyone’s results are 3 already.
14: Creation node problem

Copy code The code is as follows:

//Dynamicly add Element, all browsers can implement it
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth ";
//This can also be achieved in IE
var newnode= document.createElement("");

15: When shielding the right click, Firefox is different from others in the oncontextmenu event.

16: When adding style and script dynamically, IE is different from other browsers. Check specifically.

17: For DOM2 and DOM3, the situation is more complicated.