The Browser and Environment Client-Side JavaScript Sniff and Divide Scripts System, version 3.1

What’s it all about?

The script will sniff for old and dated or generally incapable browsers and see to it that these won't be broken by too complex script or hyper text markup code, but instead that the clients be diverted to an appropriate message on a simplified web page, or relocated to an alternative section of the site, or be given a simpler script code to interpret. Probably you would like to use fresh technologies, but at the same time not lose visitors, just because not everybody updated their browsers or computers in a while. All this can be accomplished seamlessly by the use of client-side JavaScript, and all appropriate functions utilized are highly adjustable with this script. It should preferably be allowed to form part of the site's overall structure, since it's a great utility for redirecting traffic on any site, and for webmasters not being able to use server scripts, it is even more precious.

Preparations

For the script to work as intended, a few things need to be prepared.

The Entry Page and NOSCRIPT section

A client will enter your site (or a section of it) at an entry point. This is where you should expect any browser to come stumbling in. The page at this primary location in the site's structure must cater for anything. Here's where you need the script, because it finds out all relevant features about old and new browsers alike. On this page a part of the script is put, which should not break any browser in any way. Ten year old impossible applications like Netscape Navigator 2 or Internet Explorer 3 is instantly be taken care of and nicely turned away from the site towards the FallBackUponURL, while all other browsers are handled the way you decide.

Note that there is one limitation though; the Sniff and Divide Script knows nothing about the circa 5-10% of browsers out there going about the web without JavaScript made available. Therefore you'd need to prepare the Entry page with a NOSCRIPT section, as elaborate as you think necessary and appropriate. If you can read "MyNextLocation" as a heading on the next line, than your browser skipped the contents between the NOSCRIPT tags just below, and that is enough proof, this browser is script enabled.

MyNextLocation

Since the Entry page is accustomed to all sorts of browsers, standards and non-standards alike, it should be kept simple and the technically advanced stuff reserved for subsections of the site. The script is utilizing methods to deal with the relocation of diverse technologies to specific subsections of the site. By default the script would let specific, competent browsers make the current location change to another location in a subdirectory (optionally keeping the name of the original file) or simply go on to another file in the same directory.

The script doesn't make the relocation compulsory, though. It lets itself be configured to deal with customized script code, and yet let the client remain at the current location. Then we say the script is in ScriptAction rather than a Relocation mode. More about that later.

MyFallBackUponURL

Before beginning to customize the script code, you should know the location for and having prepared an HTML 3.2 web page for dated technologies. That web page is (for convenience) advised to be one and the same for the whole site. As an example, please check this fall-back page.

uasniff.js and uaenvir.js

The script depends on two external script source files:

The first of these source files will possibly contain some script code you generate yourself below. For more information about the script files, go to the Demonstration page.

Customize and Test the Script Source Code

Now is the time to choose a particular script (mode) and (optionally) generate the script code to add to the uasniff.js file. Further down this page, you could click a button to have the script code generated already this very minute, but of course you should adapt it to your site's particular needs. This is quickly accomplished by doing some clicking in this section. The code that you then will generate, should either be copied and pasted into the uasniff.js file, or put on the Entry page

Please note that any green field is an indication to you and a recommendation to do adjustments to the code, while the yellow fields are only for minor adjustments, and can be dealt with later, if at all.

Deciding on a particular Script Mode

The default script mode is the Sniff and Simply Divert mode, moving the surfing client forward to another location, if only the browser meets some basic requirements. However, the Sniff and Divide Scripts come with several options, adapting the script code to the needs of your site. Below is a list of the three main script options. Click the radio button to choose it, and (if anything else than the first alternative is chosen) also the green field anchor to make further choices.

¬ Sniff and Simply Divert (default)

With the Sniff and Simply Divert mode, the ready-made script function Relocate will bring the accepted browsers onward to MyNextLocation. Applying the default settings, the result will be as stated in the table.

Gecko IE6 IE5.5 IE5 IE4 NC4 Opera7.5 Opera4 NN3 NN2 Lynx
Next Next Next Next Fall-Back Fall-Back Next Fall-Back Fall-Back Fall-Back Anchor

Having opted for this mode, you could move down on this page to optionally customize the site entries settings (thereby disregarding the remaining options in the list).

¬ Sniff and Execute My Code

With any one of the Sniff and Execute My Code modes, the script function ScriptAction will apply a script code of your own making. Applying the default settings, the result will be as stated in the table.

Gecko IE6 IE5.5 IE5 IE4 NC4 Opera7.5 Opera4 NN3 NN2 Lynx
My Code My Code My Code My Code Fall-Back Fall-Back My Code Fall-Back Fall-Back Fall-Back NOSCRIPT

You should insert your own custom-made script commands in the "EDITABLE SECTION" of the then already generated script code (see further down this page). By default, script commands conformant with ECMAScript, i.e. at least JavaScript language 1.3 or JScript version 3.0, is presupposed.

You are encouraged to customize the settings — click to open a new field

Script language restriction

With the default settings, you could use safe script commands only, but the choices below would bring you the option to use JavaScript 1.5 or JScript 5.5, which are conformant with ECMAScript, 3rd edition. Browsers not compliant with this script (core) language will, with the first optional mode below (Mixed), get MyOtherLocation, and with the second optional mode below (Double), get an alternative script code of your own making. Applying one of these modes, the result will be as stated in the table.

Gecko IE6 IE5.5 IE5 (Win) IE4 NC4 Opera7.5 Opera4 NN3 NN2 Lynx
Mixed My Code My Code My Code Other Page Other Page Other Page My Code Other Page Other Page Fall-Back NOSCRIPT
Double My Code My Code My Code My Other Code My Other Code My Other Code My Code My Other Code My Other Code Fall-Back NOSCRIPT
Execute or Divide (Mixed) mode — check the box (unchecked by default) to apply it
(This option is enabled only with "Sniff and Execute My Code".)

With the Execute or Divide mode, the diverting of browsers will work depending on ECMAScript, 3rd edition compliance (rather than the 1st edition). The checked option would hide your custom-made script code (My Code) from browsers not implementing the additions made in the third edition, e.g. tighter definition of errors or formatting for numeric output. Those browsers would instead be brought onwards to MyOtherLocation.

Execute or Execute (Double) mode — check the box (unchecked by default) to apply it
(This option is enabled only with "Sniff and Execute My Code".)

With the Execute or Execute mode, the script function ScriptAction should contain two custom-made script codes of your own making, the simpler code for JavaScript language versions 1.1-1.3 and JScript versions 3.0-5.0, and the regular code depending on ECMAScript, 3rd edition compliance (rather than the 1st edition). The checked option would hide your regular script code (My Code) from browsers not implementing the additions made in the third edition, e.g. tighter definition of errors or formatting for numeric output. Those browsers would instead be exposed to the simpler code (My Other Code).

Show advanced options incl. the way to replace the ECMAScript requirement with a specified DOM

In accordance with the settings above, the script requirement for executing the regular custom-made script (My Code) will be as stated here. You may replace it with another requirement listed in the drop-down box. The table explains how the sniffer script decides on the DOM options.

"w3cdom" W3C industry DOM standard using document.getElementById and also applying document.getElementsByTagName and document.createElement
"domelementstyle" W3C industry DOM standard (as above) and applying element.style on an element created by document.createElement
"domcreateevent" W3C industry DOM standard (as before) and applying document.createEvent
Note that this option will exclude all versions of Internet Explorer.

Current value of the requirement variable restrictScript =

Having opted for one of the ScriptAction modes, you could move down on this page to optionally customize the site entries settings (thereby disregarding the remaining options in the list).

¬ Sniff and Divide Location

With the Sniff and Divide Location mode, the ready-made script function Relocate will bring the accepted browsers onward to either MyOtherLocation or MyNextLocation.

By default DHTML browsers will be targeted to MyOtherLocation, i.e. the alternative section of the site, but HTML4 standards compliant browsers, like Internet Explorer from version 5 on Mac, version 6 on Windows, Opera from version 7 and Netscape from version 6 and other Gecko based browsers like Firefox, as well as Safari, will all instead be targeted to MyNextLocation, i.e. a section of the site intended for recent or especially capable technologies. Applying the default settings, the result will be as stated in the table.

Gecko IE6 IE5.5 IE5 (Win) IE4 NC4 Opera7.5 Opera4 NN3 NN2 Lynx
Next Next Other Other Fall-Back Fall-Back Next Fall-Back Fall-Back Fall-Back Anchors

You are encouraged to customize the settings — click to open a new field

Settings for the Next location in the Sniff and Divide Location mode

Modify the condition for getting MyNextLocation (as seen in the combo boxes). With the first box you lay the basis for the division. By default it is required for a browser to be able to present a web page in standards compliance mode. You may loosen the requirement to include other browsers as well, but you may also strengthen the requirement by aid of the second combo box.

   envir.

The relocation condition for being targeted to MyNextLocation will be the following:
var level2Option = "" as a result of the option above. Browsers and/or computer environments not complying will be targeted to MyOtherLocation.

Particular operating system If MyNextLocation requires the use of a particular operating system, you should state that requirement in the combo box below.
&& envir.

The relocation condition for being targeted to MyNextLocation will also be the following:
var level2AddOS = "" as a result of the option above. Computer operating systems not complying will be targeted to MyOtherLocation.

[ Make sure there is a dot in the appropriate radio button to the left of the ¬ sign, before you proceed. ]

Controlling the Technologies that should have Access to the Site

Applying the above settings, access to your site would now be safely controlled and predictable. However, there are of course some options regarding the access to your site.

Site Entries Settings

Controlling the Admittance for Dated Browser Products

Dependent on the script mode options done before, the current and recommended value of the requirement variable exclusionOption =

You may alternatively choose a permissive or a DHTML or a restrictive approach by selecting the adequate option above. The permissive approach is effectively allowing all browsers access to your site except very old ones like Internet Explorer 3 and Netscape Navigator 2. The table shows the details:

NS6.2 NS6.1 IE5.5 IE5.01 IE4 NC4 Opera7 Opera4 NN3 NN2
3 Permissive Allow Allow Allow Allow Allow Allow Allow Allow Allow Fall-Back
4 DHTML Allow Allow Allow Allow Allow Allow Allow Fall-Back Fall-Back Fall-Back
5 Restrictive Allow Fall-Back Allow Allow Fall-Back Fall-Back Allow Fall-Back Fall-Back Fall-Back

Show advanced options — click to open a new field

You may fine-tune the admittance settings specifically for the Trident and Gecko products.

The current value of the requirement variable restrictTrident =

The current value of the requirement variable restrictGecko =

Controlling the Admittance for Limited Rendering Capabilities

Now you could move down on this page to test and generate the contained code. Before doing so, you may add access restrictions on the basis of rendering capabilities. By default the script implements no such limits.

Check this box (unchecked by default), if screens smaller than 800x600 pixels should be diverted to MyFallBackUponURL. (This option might be disabled if a ScriptAction mode is being applied.)

Show advanced options

The screen size requirement for entering the site will be as stated here.
Current value of the requirement variable restrictScreenSize =

Check this box (unchecked by default), if screens less than 256 colours should be diverted to MyFallBackUponURL. (This option might be disabled if a ScriptAction mode is being applied.)

Show advanced options

The screen colour requirement for entering the site will be as stated here.
Current value of the requirement variable restrictScreenColor =

Check this box (unchecked by default), if browsers not complying with CSS1, e.g. Netscape Communicator (version 4.x), should be diverted to MyFallBackUponURL. (This option might be disabled if a ScriptAction mode is being applied.)

Show advanced options

The estimated CSS1 requirement for entering the site will be as stated here.
Current value of the requirement variable restrictStyle =

Testing and Generating the Code

Simulate a common browser

Select a browser and environment from the drop-down menu and generate the code by pressing "Generate simulated values". Then test the code by pressing the red button below the textarea.

» » »

Generating the code portion for the optional addition to uasniff.js

When you're finished doing some testings above, you may choose to generate the real code, and save it to the alloted space right at the beginning of the file named uasniff.js. You could optionally save it under a different name. This file is called in the HEAD and may be placed anywhere in the directory structure.

However, if you'd rather prefer to keep the entire generated code with the Entry page, you should move down on this page (and don't mind the buttons below).

| | | | | 

Uncheck this box (will be checked when code is generated above) if you do not intend to add to uasniff.js, i.e. rather have all customized code contained with the Entry page than parts of the script code in an external script source file.

Adjust and Generate the HTML Code

The paths on your site

Parts of the Sniff and Divide Scripts code must be put in the actual HTML document, and not only because of the call of the script source file(s), but also because some dated browsers cannot read external script files. In this section you will customize the code to put in the head of the document.

The custom source file

Right-click and download the most recent edition of uasniff.js.

If you generated code for this file, then open it by use of an editor and paste generated code according to the directions at the beginning of the file. If there will be no addition to the file, it should be published as it is at a location you state below.

Type the relative path on your server to the uasniff.js (cp. above). Type both the directory path and the possibly changed file name. Leave the left field blank if the file is placed in the same directory as the Entry page:
[../]

The ready-made source file

Type the relative path on your server to where the ready-made script source file is, but note that the file name is added. Leave the field blank if the file is placed in the same directory as the Entry page:
[../]

Then right-click and save the most recent edition of this file at the stated location. The code version number must not be lower than 3.1.0 for it to function properly:

Stating MyFallBackUponURL

As a consequence of the settings decided on in the former section, some simple browser or computer technologies won't meet any requirements of your site. The location below is where the fall-back document resides.

Type a full URL or a relative location path. The default is a path relative to the current location:
http://some.server.domain/[../]

Stating the path to MyNextLocation (disabled if not applicable)

Except for a couple of cases with the Sniff and Execute My Code modes, particularly fit browser clients will be relocated from the entry page to a so-called custom site location. The location below is where the custom target document resides.

Type an absolute path, or a relative path like /MySiteRoot/MyTargetDirectory/, or like ../MyTargetDirectory/. The script will assume the file name to be the same as the original name of the relocated file.

If you like to use another file name, you should type it next to the path to make it a complete URL. The default is a relative path to the file demo.html located in a sub directory:
http://some.server.domain/[../]

Stating the path to MyOtherLocation (disabled if not applicable)

Except for a couple of cases with the Sniff and Execute My Code modes and never with the Sniff and Simply Divert mode, the browser client might be relocated from the entry page to another, alternative site location. The location below is where the alternative target document resides.

Type an absolute path, or a relative path like /MySiteRoot/MyTargetDirectory/, or like ../MyTargetDirectory/. The script will assume the file name to be the same as the original name of the relocated file.

If you like to use another file name, you should type it next to the path to make it a complete URL. The default is a relative path to the file demo.html located in a sub directory:
http://some.server.domain/[../]

Divert option

The excluded browsers are relocated to MyFallBackUponURL assigned in the document HEAD script. There you'll also find the essential Relocate function, which is at the heart of the script, irrespective of the so-called script mode. By default the script applies the location = "SomeURL" method, if diverting the client to another location, thereby marking another entry into the history sequence.

Check this box (unchecked initially) if you'd like the script to try (not always possible) to apply the location.replace("SomeURL") method instead, thereby causing no extra entry into the history sequence. This would be useful in the case of initiating the script on an onLoad event, then saving the functionality of the Back button.

Generating the script code portion for the Entry page

The textarea above will contain the script code to be placed in the HEAD section of the Entry page. You may choose to have it surrounded by HTML or XHTML tags.

¬ Generating valid HTML (default)
¬ Generating valid XHTML

| No. I'll start all over:

Having selected and pasted the generated code (see above) in the HEAD section of the entry page, there is only a couple of things still to do. Next you need to customize the code to put in the body of the document.

Calling uaenvir.js

The source file uaenvir.js must not be called by browsers utilising old script language versions (before 1.2). Therefore an extra script code should be placed in the body of the document to conditionally call this file. Select the already generated code below by pressing the button and copy/paste it right below the starting body tag:


Initiating the script

The script should be initiated by the use of an event handler, such as onLoad or onClick. The function to call is "Init", e.g. 

 <body onload="Init()">

...or... 

<!-- Initiating the script -->
<p><a onmouseover="window.status=''; return true" onclick="Init(); return false" 
  href="MyOptionalNoscriptURL.html">Calling Init()</a></p>

Here is a demonstration of the code snippet above: Calling Init()

If JavaScript is disabled

For the case the script will do nothing, i.e. JavaScript is not enabled or the browser hasn't implemented the script language, you would need to provide the web page content within NOSCRIPT tags:

<!-- If JavaScript is disabled -->
 <noscript><div>
    your Web Page Content For Browsers Not <cite>JavaScript</cite> Enabled
                        </div></noscript>
 
 That's it!

© 2001-2008 lars.pm All rights reserved
The script is FREE to be used but NOT to be traded in. International conventions prescribe that author info MUST ALWAYS be provided.

Disclaimer: Please, notice that although the script code is believed to work with all current and correctly working JavaScript browsers, it should be applied with care. There is NO WARRANTY of its proper behaviour, and it is offered to the public AS IS, the author refraining from admitting ANY RESPONSIBILITY WHATSOEVER for unexpected results when use is made of it, EVEN IF USED AS INTENDED. The author would REJECT ANY CLAIM for financial or any other loss supposedly because of it.

(last modified 2008-02-08) top of page