JavaScript solves browser compatibility issues

compatibility issues are caused by multiple browsers being present at the same time. These browsers sometimes behave differently when they are working on an identical page. This difference may be small, or even unnoticed, and may be large or even cause a browser to not navigate normally. We refer to the problem that causes these differences collectively as "browser compatibility issues." Let's look at Javascript 's approach to solving compatibility issues.

1. Document.form.item question

Problem:

A statement such as Document.formName.item ("ItemName") exists in the code and cannot be run under FF

Workaround:

Switch to document.formname.elements["ElementName"]

2. Collection Class object Ask

Problem:

Many collection class objects in the code use (), IE can accept, FF can not

Workaround:

Instead, use [] as the subscript operation, for example:

Document.getelementsbyname ("InputName") (1) Changed to Document.getelementsbyname ("InputName") [1]

3. window.event

Problem:

Unable to run on FF using window.event

Workaround:

The event in FF can only be used on the spot where the incident occurred, and this issue cannot be resolved temporarily. The event can be uploaded to the function to work around it:

 
  
  

  
   
   
OnMouseMove = "functionname (event)"
  
   
   
function functionname (e) {
  
   
   
e = e window.event;
  
   
   
......
  
   
   
}
  
   
   

 
  
  

4. The ID of an HTML object as an object name problem

Problem:

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

Workaround:

Use object variables all with standard getElementById ("Idname")

5. Obtaining an object with a idname string

Problem:

In IE, you can use eval ("Idname") to get an HTML object with an ID of idname, which in FF cannot be

Workaround:

Replace eval ("Idname") with getElementById ("Idname")

6. Variable name and an HTML object ID the same problem

Problem:

In FF, because the object ID is not the name of an HTML object, you can use the same variable name as the HTML object ID, ie cannot

Workaround:

In the declaration of variables, all add var to avoid ambiguity, so that in IE also normal operation

It is best not to take variable names that are the same as HTML object IDs to reduce errors

7. Event.x and EVENT.Y issues

Problem:

In IE, the event object has a X,y attribute, and there is nothing in FF

Workaround:

In FF, the equivalent to Event.x is Event.pagex, but Event.pagex ie does not

Therefore, the use of event.clientx instead of event.x, in IE also has this variable

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;

And then use MX instead of event.x.

8. About Frame

Problem:

In IE, you can use Window.testframe to get the frame,ff.

Workaround:

 
  
  

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

9. Get the attributes of the element

In FF, the attribute that you define must be getattribute () to obtain

10. No parentelement,parement.children in FF with Parentnode,parentnode.childnodes

Problem:

ChildNodes the meaning of the subscript is different in IE and FF, the childnodes of FF inserts a blank text node

Workaround:

You can avoid this problem by Node.getelementsbytagname ().

Problem:

When the nodes in HTML are missing, IE and FF have different explanations for parentnode, for example:

<form>

<table>

<input/>

</table>

</form>

The value of Input.parentnode in FF is form, and the value of Input.parentnode in IE is an empty node

Problem:

The node in FF itself has no Removenode method

Workaround:

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

The const question.

Problem:

You cannot use the const keyword in IE

Workaround:

Replace with Var

A. Body Object

The body of the FF body tag is not fully read by the browser before the existence, and IE must be completely read in the body after the existence of

This will occur in IE, when the document is not loaded, appendchild on the body will appear a blank page problem

Workaround:

Everything on the body insert the action of the node, all in the onload after the

URL encoding

Problem:

General FF does not recognize the & in JS

Workaround:

In JS if the write URL to write directly & do not write &

NodeName and TagName issues

Problem:

In FF, all nodes have nodename value, but Textnode has no tagName value, in IE, the use of nodename is problematic

Workaround:

Use TagName, but should detect whether it is empty

15. Element attributes

IE under the Input.type property is read-only, but can be modified under FF

Problems with Document.getelementsbyname () and Document.all[name]

Problem:

In IE, Getelementsbyname (), Document.all[name] cannot be used to obtain DIV elements

Whether there are other elements that cannot be taken is not known (the issue is debatable and is still under study)

17. Calling the elements in a child frame or other frame

In IE, you can use the following method to get the value in a child element

 
  
  

  
   
   
document.getElementById ("FrameName"). (document.) ElementName
  
   
   
window.frames["FrameName"].elementname
 
  
  

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

 
  
  

  
   
   
window.frames["FrameName"].contentwindow.document.elementname
  
   
   
window.frames["FrameName"].document.elementname
 
  
  

18. Object width and Height assignment problem

Problem:

Invalid statement in Firefox similar to obj.style.height = Imgobj.height

Workaround:

Unified use of Obj.style.height = Imgobj.height + "px";

Question of innertext

Problem:

InnerText in IE can work, but innertext in Firefox but not

Workaround:

Use textcontent instead of innertext in non-IE browsers

Event.srcelement and Event.toelement issues

Problem:

IE, the even object has a srcelement attribute, but no target attribute; Firefox, even object has target attribute, but no srcelement attribute

Workaround:

 
  
  

  
   
   
var Source = E.target E.srcelement;
  
   
   
var target = E.relatedtarget e.toelement;
 
  
  

21. Prohibit selection of Web page content

Problem:

FF need to use CSS prohibit, ie with JS prohibit

Workaround:

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

FF:-moz-user-select:none;

22. Capturing events

Problem:

FF no setcapture (), ReleaseCapture () method

Workaround:

Ie:

 
  
  

  
   
   
Obj.setcapture ();
  
   
   
Obj.releasecapture ();
 
  
  

Ff:

 
  
  

  
   
   
Window.captureevents (Event.MOUSEMOVEEvent.MOUSEUP);
  
   
   
Window.releaseevents (Event.MOUSEMOVEEvent.MOUSEUP);
  
   
   
if (!window.captureevents)
  
   
   
{
  
   
   
O.setcapture ();
  
   
   
}
  
   
   
Else
  
   
   
{
  
   
   
Window.captureevents (Event.MOUSEMOVEEvent.MOUSEUP);
  
   
   
}
  
   
   
if (!window.captureevents)
  
   
   
{
  
   
   
O.releasecapture ();
  
   
   
}
  
   
   
Else
  
   
   
{
  
   
   
Window.releaseevents (Event.MOUSEMOVEEvent.MOUSEUP);
  
   
   
}
 
  
  

This article is mainly about the compatibility issues in IE and FF two browsers. As browsers grow in variety, there are certainly more compatibility issues. The "resolution" of browser compatibility issues requires the efforts of browser developers, the consortium, and developers to achieve this.

"Edit Recommendation"

1. JS script compatibility Problem Solving solution
2. Parsing javascript compatibility Test browser Firefox usage
3. JS script compatibility Problem Solving solution
4. IE6, IE7, IE8 three browser compatibility comparison

"Responsible Editor: Qihappy TEL: (010) 68476606"