Javascript; Browser Detection and Page Redirection

Written by William J. Tolson


A recent project was developed using Internet Explorer 5.5 asrepparttar browser of choice. Aware of browser incompatibilities, viewingrepparttar 105598 web page using three other commonly used browsers, Internet Explorer 4.0, Netscape Navigator 6.1, and Netscape Navigator 4.7 revealed some 'distortions'. This was mainly due to whether or not a particular browser could interpret style sheets, and if so howrepparttar 105599 style sheets were interpreted.

It was apparent thatrepparttar 105600 page code either needed to be downgraded torepparttar 105601 'lowest common denominator' or alternative versions ofrepparttar 105602 web page were needed for Netscape 6.1, Netscape 4.7, and Internet Explorer 4.0. Therefore, a version optimized for Netscape 6.1 was created, as well as another version compatible for both Netscape 4.7 and Internet Explorer 4.0. (This was before Internet Explorer 6.0 and Netscape 6.2 were available.)

Review of several current web sites and textbooks on Javascript presented different approaches to writing script to first detect a user's browser, and then depending onrepparttar 105603 browser and version, to redirectrepparttar 105604 user to a specific page. In this particular case, none ofrepparttar 105605 recommendations or solutions were what was needed. After a good deal of testing and re-testing,repparttar 105606 following script examples were assembled.

Below are five different examples / variations of some Javascript that is to be placed on a page that is optimized for Internet Explorer 5.5. These scripts will then automatically detectrepparttar 105607 visitor's browser and version, and then automatically directrepparttar 105608 particular browser in one of three directions. They are;

If a visitor is using Internet Explorer 5.5, to remain onrepparttar 105609 current page.

If a visitor is using Netscape 6.1, to be redirected to a page that has been optimized for Netscape 6.1.

If a visitor is using Internet Explorer 4.0 or Netscape 4.7, to be redirected to a third page that has been written specifically for either of these browser versions.

Explanatory discussion followsrepparttar 105610 script examples.

#1 ---------------------------------------------------------------- #2 --------------------------------------------------------------- #3 --------------------------------------------------------------- #4 --------------------------------------------------------------- #5 ---------------------------------------------------------------

Any of these five different scripts can be utilized. These have been compiled after many attempts at using other suggested scripts that either were too limited, were not applicable to identifying version 5 and higher browsers, or just did not seem to work as anticipated.

All these scripts are a series of conditional statements, which are read byrepparttar 105611 visitor's browser whenrepparttar 105612 web page 'ie55.htm' is loaded.

1. The browser readsrepparttar 105613 first statement and if it is Netscape 6.1, it is redirected torepparttar 105614 page written specifically for Netscape 6.1. If not,

2. The browser readsrepparttar 105615 next statement and if it is Netscape 4.7, it is redirected torepparttar 105616 page written forrepparttar 105617 'number 4 version of either Internet Explorer or Netscape Navigator. If not,

Javascript Basics 01

Written by Lisa Spurlin


JavaScript adds simple or sophisticated interactivity to a Web site, enhancingrepparttar user's experience. Like any programming language, you need to understandrepparttar 105597 building blocks before you can start programming.

Start atrepparttar 105598 Beginning

Browsers know to interpret Web pages as HTML because ofrepparttar 105599 tags. Since JavaScript is contained inside an HTML document, it needs to be set apart withrepparttar 105600 tags.

TITLE< itle><p><script language="JavaScript"><!-- Comment from older browsers<p>YOUR SCRIPT HERE<p>// end commenting out --> </script> </head> <body><p>Don't forget that last </script> tag! Abrowser will try and interpret<IMG height=12 src="/the2.jpg" alt="repparttar 105601"> whole HTML page as JavaScript, until it comes to that closing tag. Without it,<IMG height=12 src="/the2.jpg" alt="repparttar 105602"> page will generate unsightly errors and not load properly.<p>Comment, Comment, Comment<p>Commenting code allows you, or someone else looking at it, to understand what's occuring in<IMG height=12 src="/the2.jpg" alt="repparttar 105603"> code. Commenting can be done in both single and multi-line variations:<p>// single line comments<p>/* multi-line comments */<p>But what about<IMG height=12 src="/the2.jpg" alt="repparttar 105604"> HTML comment <!-- --> inside<IMG height=12 src="/the2.jpg" alt="repparttar 105605"> script tags. That exists so older browsers that don't understand JavaScript won't try and interpret it. Otherwise,<IMG height=12 src="/the2.jpg" alt="repparttar 105606"> code will render<IMG height=12 src="/the2.jpg" alt="repparttar 105607"> page as HTML, resulting in<IMG height=12 src="/the2.jpg" alt="repparttar 105608"> page displaying incorrectly.<p>Defining Variables<p>JavaScript, like all programming languages, uses variables to store information. These variables can store numbers, strings, variables that have been previously defined, and objects. For example:<p>Numeric: var x = 0; String: var y = "hello"; Variables: var z = x + y; Object: var myImage = new Image(); <p>Strings MUST contain "" around<IMG height=12 src="/the2.jpg" alt="repparttar 105609"> word or phrase. Otherwise<IMG height=12 src="/the2.jpg" alt="repparttar 105610"> JavaScript will interpret it as a number. Numbers and previously defined variables, likewise, should not have "" unless you want that number to be treated as a string.<p>Ex: var x = hello ** wrong<p>Variables that store numbers and strings can be combined in a new variable. However, if anything is combined with a string, it is automatically be treated as a string. <p>Ex: var y = "1"; var z = "2"; var a = y + z;<p>The variable "a" in this instance is "12" not 3, since<IMG height=12 src="/the2.jpg" alt="repparttar 105611"> two strings were combined together as text, not added like numbers. This would be true even if y = 1.<p>Making a Statement<p>Notice<IMG height=12 src="/the2.jpg" alt="repparttar 105612"> semi-colons (;) at<IMG height=12 src="/the2.jpg" alt="repparttar 105613"> end of each line of code? The semi-colon denotes<IMG height=12 src="/the2.jpg" alt="repparttar 105614"> end of that particular statement. While JavaScript can sometimes be forgiving if you don't include<IMG height=12 src="/the2.jpg" alt="repparttar 105615"> semi-colon at<IMG height=12 src="/the2.jpg" alt="repparttar 105616"> end of each statement, it's good practice to remember to do so. Otherwise, you might not remember to put it there when you really need it.<p>Alert! Alert!<p>Alerts are one of<IMG height=12 src="/the2.jpg" alt="repparttar 105617"> greatest functions in JavaScript. They not only pass information on to visitors, but help you when you're trying to hunt down a bug in your code. <p>Examples of alerts<p>alert("this is a string"); creates an alert that will contain<IMG height=12 src="/the2.jpg" alt="repparttar 105618"> text"this is a string" <br><br></font></td><!-- google_ad_section_end --></tr><tr><td>Cont'd on page 2 ==<a class="mlink" href="2-Javascript;_Browser_Detection_and_Page_Redirection-5598.htm">></a></td></tr></table><script type="text/javascript"><!-- google_ad_client = "pub-5766870852072819"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_channel ="8831454965"; google_color_border = "CFB9A1"; google_color_bg = "CFB9A1"; google_color_link = "000000"; google_color_url = "431B02"; google_color_text = "431B02"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> </tr> </table> <table width="770" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> <tr> <td height="48" align="center" background="images/bg_nav_bottm.jpg"><span class="style3">ImproveHomeLife.com © 2005<br> <a href="terms.html" rel="nofollow">Terms of Use</a></span></td> </tr> </table></td> </tr> </table> <script type="text/javascript"> var HASH_ESCAPED="%23"; function TrackIt(adUnit){ if (window.status) { var adDomain = escape(window.status.substring(6)); var pyPage = document.location.pathname; var params = document.location.search; var hasAnchor = params.lastIndexOf(HASH_ESCAPED)!= -1; params = hasAnchor? (params.substring(0, params.lastIndexOf(HASH_ESCAPED))) : params; pyPage = escape(pyPage.substring(pyPage.lastIndexOf('/') + 1)); pyPage = pyPage + params; var curTime = new Date().valueOf(); var bug = new Image(); bug.src = '/track/adsenseTrack.php?pyPage=' + pyPage + '&adDomain=' + adDomain + '&adUnit=' + adUnit + "&time=" + curTime; } } function TrackIt0() {TrackIt(0); } function TrackIt1() {TrackIt(1); } function TrackIt2() {TrackIt(2); } var elements = document.getElementsByTagName("iframe"); for (var i = 0; i < elements.length; i++) { if(elements[i].src.indexOf('googlesyndication.com') > -1) { //elements[i].onfocus = TrackIt; if (i==0) elements[i].onfocus = TrackIt0; if (i==1) elements[i].onfocus = TrackIt1; if (i==2) elements[i].onfocus = TrackIt2; } } </script> <!--WEBBOT bot="HTMLMarkup" startspan ALT="Site Meter" --> <script type="text/javascript" language="JavaScript">var site="s19improve"</script> <script type="text/javascript" language="JavaScript1.2" src="http://s19.sitemeter.com/js/counter.js?site=s19improve"> </script> <noscript> <a href="http://s19.sitemeter.com/stats.asp?site=s19improve" target="_top"> <img src="http://s19.sitemeter.com/meter.asp?site=s19improve" alt="Site Meter" border=0></a> </noscript> <!-- Copyright (c)2002 Site Meter --> <!--WEBBOT bot="HTMLMarkup" Endspan --> </body> </html>