Front and Center: Detecting Browsers | Special Edition Using Microsoft Office FrontPage 2003

As you've seen in this chapter, not all Behaviors work in all browsers. However, that doesn't have to keep you from using a cool Behavior that you want to use on your Web site. Using the Check Browser Behavior, you can ensure that only people who are using a compatible browser get to your page.

The recommended method for using the Check Browser Behavior is to add it to the <body> tag and fire it with the OnLoad event. By specifying a different page to be displayed for specific browsers, you can be sure that the people viewing your Web page are properly equipped to view it with all of its features intact.

The OnLoad event of the <body> tag fires after the page has completed loading. If you use the Check Browser Behavior on a page to redirect according to the browser being used, by the time the Behavior is invoked, the page has already loaded and is already visible. Your Web site visitor will see the first page load briefly and will then be redirected to the correct page as per the settings configured in the Check Browser Behavior. This results in an unprofessional look, but it can be easily avoided.

There are two methods to avoid this problem. The first method is to use a blank page and configure the Check Browser Behavior on it. The second method is to edit the code added by the Check Browser Behavior. Either of these methods will prevent users from ever seeing a page that will not display properly in their browsers.

Creating a Blank Page for Redirecting

The first method of preventing the wrong page from being displayed to your Web site visitors is to add the Check Browser Behavior to a blank page. Using this method, the page that loads initially contains no content and is only used to redirect users to the correct page based on the browsers they are using.

Using this method, you will need to create three pages; one blank page that will contain the Check Browser Behavior, one page for users who are using a browser that supports the Behavior you are using, and one for users who are using all other browsers. When you insert the Check Browser Behavior, you will need to configure a separate page for your targeted browser and another URL for all other browsers, as seen in Figure 23.23.

Figure 23.23. The Check Browser Behavior configured with one page for browsers that support your Behavior and another page for all others.

graphics/23fig23.gif

Editing the Check Browser Code

The second method of preventing an unprofessional appearance when using the Check Browser Behavior involves editing the code that is inserted by the Behavior. Even though this method requires you to edit the code used by the Behavior, it involves less work than the blank page method, and it produces better results. To use this method, you first need to analyze the code that FrontPage inserts into your page when you use the Check Browser Behavior.

When you insert the Check Browser component, FrontPage inserts a JavaScript function called FP_checkBrowser that is used to determine which browser is being used to view the page. It also inserts a call to the FP_checkBrowser function in the OnLoad event of the <body> tag. The call to the FP_checkBrowser function is the code that needs to be moved.

When you insert the Check Browser Behavior, the <body> tag is rewritten to include the following function call:

[View full width]
 <body onload="FP_checkBrowser('Microsoft Internet Explorer', '4+', /*href*/'', /*href* /'static.htm')">

As mentioned earlier, because the call to the FP_checkBrowser function is in the OnLoad event of the <body> tag, the page will be displayed momentarily before being redirected. To correct that problem, you will need to move the function call so that it appears immediately after the function itself.

The following code is inserted at the beginning of the page when the Check Browser Behavior is being used:

[View full width]
 //Check version  loc=ver.search('\\+');v=parseInt(ver);if(loc>0){v=parseInt(ver);if(maj>=v)  vm=true;}else if(maj==v)vm=true;loc=ver.search("any");if(loc>=0)vm=true;  if(vm&&tm){ if(url1!='')location=url1;}else if(url2!='')location=url2; } // --> </script> </head> <body onload="FP_checkBrowser('Microsoft Internet Explorer', '4+', /*href*/'', /*href* /'static.htm')">

To alter the code so that users are redirected immediately before the page loads, remove the function call from the OnLoad event of the <body> tag and move it to the end of the <script> section of the page, as shown in the following code:

 //Check version  loc=ver.search('\\+');v=parseInt(ver);if(loc>0){v=parseInt(ver);if(maj>=v)  vm=true;}else if(maj==v)vm=true;loc=ver.search("any");if(loc>=0)vm=true;  if(vm&&tm){ if(url1!='')location=url1;}else if(url2!='')location=url2; } FP_checkBrowser('Microsoft Internet Explorer', '4+', /*href*/'', /*href*/'static.htm')" // --> </script> </head> <body>

Notice that the call to the FP_checkBrowser script has been moved from the <body> tag to the end of the <script> block. Because client-side script outside of a function runs when it is encountered, this change will cause the FP_checkBrowser function to be called before the page loads. The result will be an instantaneous redirect instead of a redirect after the page loads completely.

CAUTION

One word of warning: If you use the preceding method and edit the code that FrontPage inserts, the Check Browser Behavior will no longer be visible in the Behaviors task pane and you will not be able to remove the Behavior using the Behaviors task pane. To remove the Behavior, you will have to remove the code from Code view.