Omnis Technical Note TNWE0003

How to redirect an HTML page depending on the browser and the platform

For Omnis Studio
By Rudolf Bargholz

The following tech note will be useful for those who use the Omnis Web Client and have to redirect their Web Form page depending on the browser the client is using.

Problem
When using the Omnis Web Client, you have to embed a reference to the web client object code in an HTML page. As the object code for Netscape and Internet Explorer object differs, one is normally forced to create two HTML pages for one web form, one that uses the Netscape object code format and one that uses the format for Internet Explorer. To complicate matters, the Internet Explorer on the Mac needs to use the Netscape object code format. What would be ideal is, if one opens an HTML page in the browser, the browser recognizes what browser the client is using, Netscape or Internet Explorer, what platform the browser is running on, and then redirects the window's HTML location to the required HTML page. Another issue is to open the browser window with no toolbar or menu items visible

Solution
For the browser to be able to recognise the browser type and the platform, one has to embed JavaScript in one's HTML page:

<HTML>
<HEAD>
<TITLE>JavaScript demo that chooses the correct HTML page for the web client Client
<SCRIPT LANGUAGE="JavaScript">

// Rudolf Bargholz - OMNIS Software - 6 Dec. 1999

// navigator.appName will return either "Microsoft Internet Explorer" or "Netscape"

// navigator.appVersion will return a lot of information about the browser, e.g.
// 4.0 (compatible; MSIE 5.0; Windows NT; DigExt)
// 4.0 (compatible; MSIE 5.0; Windows 98; DigExt)
// 4.0 (compatible; MSIE 5.0; Windows 95; DigExt)
// 4.0 (compatible; MSIE 4.5; Macintosh; I; PPC)
// 4.51 [en] (X11; Linux 2.2.5-15 i386))
// 4.0 (compatible; MSIE 5.01; Windows NT 5.0)
// etc.
// important here is the use of the "indexOf" function.
// Note also that you only have to set the URL in the next two lines.

function getPage()
{
var BrowserName = getBrowser();
var PlatformName = getPlatform();
var NetscapeURL = "netscape.htm"; // enter your Netscape URL here
var ExplorerURL = "explorer.htm"; // enter your Internet Explorer URL here

if (BrowserName == "IE" && PlatformName == "W")
{
var URLAddress = ExplorerURL;
}
else if (BrowserName == "IE" && PlatformName == "M")
{
var URLAddress = NetscapeURL;
}
else if (BrowserName == "NS" && PlatformName == "W")
{
var URLAddress = NetscapeURL;
}
else if (BrowserName == "NS" && PlatformName == "M")
{
var URLAddress = NetscapeURL;
}
else if (BrowserName == "NS" && PlatformName == "L")
var URLAddress = NetscapeURL;
}
else
{
var URLAddress = "ERROR";
}
return URLAddress;
}

function getBrowser()
{
if (navigator.appName.indexOf("Explorer") != -1)
{
var BrowserName = "IE";
}
if (navigator.appName.indexOf("Netscape") != -1)
{
var BrowserName = "NS";
}
|return BrowserName;
}

function getPlatform()
{
if (navigator.appVersion.indexOf("Macintosh") != -1)
{
var PlatformName = "M";
}
if ((navigator.appVersion.indexOf("Windows 95") != -1) || (navigator.appVersion.indexOf("Windows 98") != -1) || (navigator.appVersion.indexOf("Windows NT") != -1) || (navigator.appVersion.indexOf("Win95") != -1) || (navigator.appVersion.indexOf("Win98") != -1) || (navigator.appVersion.indexOf("WinNT") != -1))
{
var PlatformName = "W";
}
if (navigator.appVersion.indexOf("Linux") != -1)
{
var PlatformName = "L";
}
return PlatformName;
}

function customOpen() { var address = getPage(); var op_tool = 0; var op_loc_box = 0; var op_dir = 0; var op_stat = 0; var op_menu = 0; var op_scroll = 0; var op_resize = 0; var op_wid = 740; var op_heigh = 520; var option = "toolbar=" + op_tool + ",location=" + op_loc_box + ",directories=" + op_dir + ",status=" + op_stat + ",menubar=" + op_menu + ",scrollbars=" + op_scroll + ",resizable=" + op_resize + ",width=" + op_wid + ",height=" + op_heigh; var new_win = window.open(address, "NewWindow", option ); }

</SCRIPT
</HEAD>
< BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="Javascript">
var BrowserPlatformURL = getPage();
if (BrowserPlatformURL == "ERROR")
{
document.write("This is not a supported browser or a supported platform")
}
else
{
// document.location(BrowserPlatformURL); // uncomment this line by deleting the preceding "//"
document.write(BrowserPlatformURL); // the following "document.write" lines can be deleted
document.write("<p>");
document.write(navigator.appName);
document.write("<p>");
document.write(navigator.appVersion);
document.write("<p>");
document.write(getBrowser());
document.write("<p>");
document.write(getPlatform());
}
</SCRIPT>

// The following line will call the JavaScript function defined above: customOpen() // A new browser window will be opened with either the web page for Netscape or // that for Internet explorer. The browser window will only have a title bar. No // buttons or menu items will be visible.

</BODY>
</HTML>

A couple of points regarding the example code

1) In a JavaScript section, a line is commented out using a preceding "//".
If one removes the preceding "//", e.g. in the line

// document.location(BrowserPlatformURL);

to

document.location(BrowserPlatformURL);

one effectively removes the comment and the line will be executed.

2) For debug purposes I have used the following code in the BODY section of the HTML:

document.write("<p>");
document.write(navigator.appName);
document.write("<p>");
document.write(navigator.appVersion);
document.write("<p>"); document.write(getBrowser());
document.write("<p>");
document.write(getPlatform());

All these lines of code do is write text to the browser. The text written is determined by calling JavaScript functions embedded in the HTML, e.g. "getBrowser()", or by referencing JavaScript variables, e.g. "navigator.appName". These lines can be deleted from the HTML text when deploying the code. When deploying the code, one has to uncomment the line BODY section

// document.location(BrowserPlatformURL);
to
document.location(BrowserPlatformURL);

The JavaScript function "document.location(BrowserPlatformURL);" will open the URL stored in the variable "BrowserPlatformURL".

3) The variable "BrowserPlatformURL" is filled with the following line

var BrowserPlatformURL = getPage();

where "getPage()" is a JavaScript function that returns the correct URL depending on the browser and the platform.

4) The JavaScript function "getPage()" has four variables defined

var BrowserName = getBrowser();
var PlatformName = getPlatform();
var NetscapeURL = "netscape.htm"; // enter your Netscape URL here
var ExplorerURL = "explorer.htm"; // enter your IE URL here

The variable "BrowserName" is filled by calling a function called "getBrowser()". This function will return "IE" for the Internet Explorer or "NS" for Netscape.

The variable "PlatformName " is filled by calling a function called "getPlatform()". This function will return "M" for the Mac platform, "W" for the Windows platform or "L" for Linux platform.

The variables "NetscapeURL" and "ExplorerURL" can be used to store the URL of the respective Netscape or Internet Explorer Omnis Web Client HTML pages, e.g.

var NetscapeURL = "http://www.mytest.com/IE.htm"; // enter your Netscape URL here
var ExplorerURL = "http://www.mytest.com/NS.htm"; // enter your IE URL here

The function "getPage()" will either return

"http://www.mytest.com/IE.htm" or
"http://www.mytest.com/NS.htm" or
the text "ERROR" if an unsupported browser is used or the platform is not supported.

If a URL is returned, the function
document.location(BrowserPlatformURL);
will open that URL in the current browser.

5) If one does not want the new browser window that opens to have a menu bar or a toolbar, one can use the JavaScript function

window.open(address, "NewWindow", option )

a) 'address'is the URL to be opened
b) ' "NewWindow" ' tells the command to open a new window
c) 'option' is a list of parameters that are to be passed to the to be opened window, telling it what it is to display and what not to

The JavaScript 'window.open(address, "NewWindow", option )' can be found in the HTML above in the JavaScript function

function customOpen()
{ ....
} The function can be called via an HREF, e.g. ...

<BODY>
...
<A href="javascript:customOpen()"> Press here to open the correct web page </A>
...
</BODY>


For more information on JavaScript see the following links:
www.javascript.com
www.searchscript.com
www.easyjavascript.com/javascript.html
www.websitesetup.org