Issues related to multiple browser compatibility

Following are the issuses that i faced while developing a multiple browser compatible application:

1. Web service call should be SOAP Request/Response.

var strMethodName = 'getCurrentPositionData' ;
var strSoapContent =
           '<counter4RouteID>' + count4WSCall + '</counter4RouteID>\n'
       +   '<countryName>' + strCountryName + '</countryName>\n'  ;



var soapAction = 'http://tempuri.org/' + strMethodName ;
var url = 'http://localhost/VEVistaMashUp/VEVistaMashUpService.asmx' ;
var data = '<?xml version=\'1.0\' encoding=\'utf-8\'?>\n'
       +'<soap:Envelope xmlns:xsi=\'http://www.w3.org/2001/XMLSchema-instance\'
               xmlns:xsd=\'http://www.w3.org/2001/XMLSchema\'  
               xmlns:soap=\'http://schemas.xmlsoap.org/soap/envelope/\'>\n'
       + '<soap:Body>\n'
       +       '<' + strMethodName + ' xmlns=\'http://tempuri.org/\'>\n'
       +                   strSoapContent
       +            '</' + strMethodName + '>\n'
       + '</soap:Body>\n'
       +'</soap:Envelope>' ;

2. To use SOAP Request/Response we have to create the xmlHttp object. In IE we use ActiveXObject while in Non-IE we use XMLHttpRequest ().

var xmlhttp ;
if(window.ActiveXObject)
{
    try
    {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
    catch (ex)
    {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
}
else if (window.XMLHttpRequest)
{
    xmlhttp = new XMLHttpRequest();
}

3. SOAP request should be Asynchronous in case of Mozilla while IE support both Synchronous and Asynchronous web service call.

xmlhttp.open('POST', url, true);
xmlhttp.onreadystatechange = processgetCurrentPositionData ;
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.setRequestHeader('SOAPAction', soapAction);
xmlhttp.send(data);

4. IE support both xmlHttpObject.responseXml and xmlHttpObject.responseText while Mozilla supports only xmlHttpObject.responseText.

xmlhttp .responseText

5. For using xmlDocument in JavaScript we have use Microsoft.xmlDom in IE and DomParser in case of Non-IE browser.

if (xmlhttp4CurrentPos.readyState == 4)
{
    if (xmlhttp4CurrentPos.status == 200) // only if "OK"
    {
        try
        {
            if (window.ActiveXObject)   // code for IE
            {
                doc = new ActiveXObject("Microsoft.XMLDOM");
                   
                doc.async="false";
                doc.loadXML(xmlhttp4CurrentPos.responseText);
            }
            else    // code for Mozilla, Firefox, Opera, etc.
            {
                var parser=new DOMParser();
                doc = parser.parseFromString(xmlhttp4CurrentPos.responseText,"text/xml");
            }

            var rootNode = doc.documentElement;    // documentElement always represents the root node
                       
            if( rootNode.childNodes[0].childNodes[0].childNodes[0].nodeName == "getCurrentPositionDataResult" )
            {
                getCurrentPositionData(rootNode) ;
            }
        }
        catch (ex)
        {
        }
    }
}

6. Mozilla require ‘px’ to every points while IE assume unit without any ‘px’ or ‘%’ as ‘px’.

objMenu.style.left = vLeft + 'px';
objMenu.style.top = vTop + 'px';

7. In IE ‘event ‘ is a global variable that always refer to the current event while in Mozilla you have to explicitly specified the event with method.

onmouseover="displayInfo(event);"

function displayInfo(evt)
{
    ......
    ......
    var e = (window.event) ? window.event : evt;
    ......
    ......
}

8. Mozilla don’t support document.all [‘tagID’], while document.getElementById (‘tagID’) is supported by every browser.

document.getElementById("flashObj")

9. Require to set the z-index in case of Opera to see the some object over another object.

z-index: 2

10. To insert some html as string during runtime requires '<div> …</div>’ tags in Non-IE while its work fine in IE. Also IE require some width of control. In case of button – it has some default height width but if your page consists of only DIV tag then we have to specify some height and width to it.

var strMediaPlayerContent = "<div>" ;

......
......

var objMediaPlayer = document.getElementById('div4MediaPlayer') ;
objMediaPlayer.innerHTML = strMediaPlayerContent + "</div>" ;

11. We have to create graphic object in case of Non-IE when we are using Virtual Earth APIs.

map = new VEMap( "USMap" );
          
if( typeof( window.innerWidth ) == 'number' )   //Non IE
Msn.Drawing.Graphic.CreateGraphic=function(f,b) { return new Msn.Drawing.SVGGraphic(f,b) }
              
map.LoadMap(new VELatLong(lat4USAirCraft, long4USAirCraft), 10 ,'h' ,true);

map.HideDashboard();

12. In JavaScript Debugger of Mozilla – after code execution cursor move to catch line (even if the code is correct).

13. In Mozilla use ‘\\’ instead of ‘/’ to specify file Path while using Query string.

"Videos\\Sample.MPG";

14. JavaScript debuggers in case of Mozilla are – Fire Bug, JavaScript Debugger and Error Console.