Javascript solves browser compatibility issues

CompatibilityThe problem is that multiple browsers exist at the same time. These browsers sometimes behave differently when processing the same page. This difference may be very small, not even noticed; it may also be very large, or even cause failure to browse normally in a browser. We collectively refer to the problems that cause these differences as "browser compatibility problems ". Let's take a look at it.JavascriptSolutions to compatibility issues.

1. document. form. item Problems

Problem:

The Code contains statements such as document. formName. item ("itemName") and cannot be run in FF.

Solution:

Use document. formName. elements ["elementName"]

2. Collection class Object question

Problem:

Many collection class objects in the Code are used (), which is acceptable to IE and cannot be used by FF.

Solution:

Use [] as the subscript, for example:

Document. getElementsByName ("inputName") (1) changed to document. getElementsByName ("inputName") [1]

3. window. event

Problem:

Windows. event cannot be run on FF.

Solution:

FF event can only be used in the event. This problem cannot be solved. You can transfer the event to the function to solve the problem:

 
 

  
  
onMouseMove = "functionName(event)" 
  
  
function functionName (e) {  
  
  
e = e || window.event;  
  
  
......  
  
  
}  
  
  
 
 
 
 

4. Question about the id of an HTML object as the object name

Problem:

In IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of the document, but cannot be used in FF.

Solution:

Standard getElementById ("idName") is used when object variables are used ")

5. The problem of getting an object using the idName string

Problem:

In IE, eval ("idName") can be used to obtain the HTML object with id as idName. In FF

Solution:

Use getElementById ("idName") to replace eval ("idName ")

6. The variable name is the same as the id of an HTML object.

Problem:

In FF, because the Object id is not the name of the HTML object, you can use the same variable name as the HTML Object id.

Solution:

When declaring variables, add var to avoid ambiguity, so that it can run normally in IE.

It is best not to use the same variable name as the HTML Object id to reduce errors.

7. event. x and event. y

Problem:

In IE, the event object has the x, y attributes, and FF does not exist.

Solution:

In FF, event. x is equivalent to event. pageX, but event. pageX IE does not

Therefore, event. clientX is used to replace event. x. This variable is also available in IE.

The subtle difference between event. clientX and event. pageX is the scroll bar.

To be exactly the same, you can do this:

MX = event. x? Event. x: event. pageX;

Use mX instead of event. x

8. About frame

Problem:

In IE, the frame can be obtained using window. testFrame, but not in FF.

Solution:

 
 

  
  
window.top.document.getElementById("testFrame").src = 'xx.htm' 
  
  
window.top.frameName.location = 'xx.htm' 
 
 

9. Get element attributes

In FF, the defined attributes must be obtained by getAttribute ().

10. In FF, parentElement and parement. children are not included, but parentNode and parentNode. childNodes are used.

Problem:

The subtopics of childNodes are different in IE and FF. blank text nodes are inserted in childNodes of FF.

Solution:

You can use node. getElementsByTagName () to avoid this problem.

Problem:

When a node in html is missing, IE and FF have different interpretations of parentNode, for example:

<Form>

<Table>

<Input/>

</Table>

</Form>

In FF, the value of input. parentNode is form, while that of input. parentNode in IE is empty.

Problem:

The node in FF does not have the removeNode method.

Solution:

You must use the following method: node. parentNode. removeChild (node)

11. const Problems

Problem:

You cannot use the const keyword in IE.

Solution:

Replace with var

12. body object

FF's body exists before the body tag is fully read by the browser, While IE exists only after the body is fully read.

This will occur in IE. when the document is not loaded, the appendChild on the body will have a blank page.

Solution:

All actions to insert nodes to the body are performed after onload.

13. url encoding

Problem:

Generally, FF cannot identify &

Solution:

Write the url directly in js. Do not write it &

14. nodeName and tagName Problems

Problem:

In FF, all nodes have a nodeName value, but textNode does not have a tagName value. In IE, nodeName usage is incorrect.

Solution:

Use tagName, but check whether it is empty

15. Element attributes

The input. type attribute in IE is read-only, but can be modified in FF.

16. document. getElementsByName () and document. all [name] Problems

Problem:

In IE, neither getElementsByName () nor document. all [name] can be used to obtain the div element.

Whether there are other elements that cannot be retrieved is unknown. This issue is still controversial and is still under study)

17. Questions about calling sub-frameworks or elements in other frameworks

In IE, you can use the following method to obtain values in sub-elements:

 
 

  
  
document.getElementById("frameName").(document.)elementName  
  
  
window.frames["frameName"].elementName 
 
 

In FF, it needs to be executed in the following format, which is compatible with IE:

 
 

  
  
window.frames["frameName"].contentWindow.document.elementName  
  
  
window.frames["frameName"].document.elementName 
 
 

18. Assignment of object width and height

Problem:

The statement similar to obj. style. height = imgObj. height in FireFox is invalid.

Solution:

Use obj. style. height = imgObj. height + "px ";

19. innerText Problems

Problem:

InnerText works normally in IE, but innerText does not work in FireFox

Solution:

Use textContent instead of innerText in non-ie browsers

20. event. srcElement and event. toElement

Problem:

In IE, the even object has the srcElement attribute, but does not have the target attribute. In Firefox, the even object has the target attribute, but does not have the srcElement attribute.

Solution:

 
 

  
  
var source = e.target || e.srcElement;  
  
  
var target = e.relatedTarget || e.toElement; 
 
 

21. Prohibit the selection of webpage content

Problem:

FF is forbidden by CSS, whereas IE is forbidden by JS.

Solution:

IE: obj. onselectstart = function () {return false ;}

FF:-moz-user-select: none;

22. Capture events

Problem:

FF has no setCapture () or releaseCapture () Methods

Solution:

IE:

 
 

  
  
obj.setCapture();   
  
  
obj.releaseCapture(); 
 
 

FF:

 
 

  
  
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
  
  
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
  
  
if (!window.captureEvents)   
  
  
{  
  
  
o.setCapture();  
  
  
}  
  
  
else   
  
  
{  
  
  
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
  
  
}  
  
  
if (!window.captureEvents)   
  
  
{  
  
  
o.releaseCapture();  
  
  
}  
  
  
else   
  
  
{  
  
  
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);  
  
  
}  
 
 

This article mainly introduces the compatibility between IE and FF browsers. As the number of browser types increases, there must be more and more compatibility problems. The solution to browser compatibility issues requires the joint efforts of browser developers, W3C, and developers.