Sunday, May 27, 2007

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.


1 comment:

Selvakumar said...

great. thanks a lot.

Google