Now a days, there are four major web browsers: Microsoft Internet Explorer, Mozilla Firefox, Safari, and Opera. But they have the different features not compatible with other browsers. So programmers should pay attention when implement javascript application.
Here's the javascript based browser capability check application. This will be very helpful if you are trying to develop global services. <script type="text/javascript">
var modern = Boolean((( !!document.all === true && !!!document.getElementById ) ? 0 : 1 ));
var xCapabilities = ( function( e ) {
var e = (( e ) ? eval( e ) : window.event );
var xTable = 0;
var count = 1;
var xElem = null;
var xCell = null;
var xDivID = "showCapabilities";
var xDiv = (( modern ) ? document.getElementsByTagName( "div" )[ xDivID ] : document.all.tags( "div" )[ xDivID ] );
tableX = (( modern ) ? xDiv.getElementsByTagName( "table" ) : xDiv.all.tags("table").item( 0 ));
(( tableX[ 0 ] ) ? xDiv.removeChild( tableX[ 0 ] ) : tableX );
delete tableX;
if ( "createElement" in document )
{
xCell = ( function( row, text )
{
var xCel = row.insertCell( -1 );
return xCel.appendChild( document.createTextNode( text ));
} );
xElem = ( function( element )
{
return document.createElement( element );
} );
xTable = xElem( "table" );
var xTHead = xTable.createTHead();
var xRow = xTHead.insertRow( -1 );
var xLabel = [ "#", "Property", "Value", "Type" ];
var xLen = xLabel.length;
for ( i = 0; i < xLen; i++ )
{
xCell( xRow, xLabel[ i ] );
}
delete i;
var xTBody = xElem( "tbody" );
xTable.appendChild( xTBody );
for ( prop in e )
{
xRow = xTBody.insertRow( -1 );
xCell( xRow, count );
xCell( xRow, prop );
xCell( xRow, e[ prop ] );
xCell( xRow, typeof( e[ prop ] ));
xRow.lastChild.style.textAlign = "center";
++count;
}
delete prop;
xDiv.appendChild( xTable );
return;
}
alert( "Your browser is not capable of handling this type of script! You'll need to wait for my next version. - essential", "http://www.strcpy.com" );
return false;
} );
window.onload = function( event )
{
var xSel = (( modern ) ? document.getElementById( "browser" ) : document.all.browser );
xSel.onchange = ( function( event )
{
xCapabilities( this.value );
} );
xCapabilities( event );
}
// ]]>
</script>
<body>
<div id="content">
<div id="main">
<div class="tube" style="border-bottom : none; clear: both;">
<select id="browser" name="browser" size="1">
<option value="event" selected="selected">- EVENT Objects -</option>
<option value="window">- WINDOW Objects -</option>
<option value="document">- DOCUMENT Objects -</option>
<option value="navigator">- NAVIGATOR Objects -</option></select>
</div>
<div class="tube" id="showCapabilities"></div>
</div>
</div>
</body>
Tags: AJAX Application Client-side application HTML Javascript Javascript query parser Opera Safari iframe auto resize
|