Normally, the visitor needs to click the browser's Refresh button to reload the current Web page. But there's an easy way for you, the designer, to build an automatic refresh cycle into your page, so that the browser reloads the current document without the visitor's interaction. This trick comes in handy if your page contains time-sensitive or real-time information, like the current weather conditions, stock quotes, or inventory levels.
Say you have a Web page that generates and displays lucky-number lottery picks for your visitors, as in Figure 75.1. A simple JavaScript function called doLucky() handles the picks. Figure 75.1. This Web page calls a simple JavaScript function three times to generate the visitor's lucky numbers for the day.Now say that you want to avoid a lawsuit, and you decide to change your page so that the browser displays the visitor's lucky numbers for the next three seconds only, thinking that your visitors will have a harder time proving fraud if your lucky-number sets are only good for three seconds each. Essentially, you have a real-time situation here. To keep your page accurate, you need to refresh it every three seconds. Listing 75.1. View Source for Figure 75.1.[View full width] <html> <head> <title>Lucky Numbers</title> <script language="JavaScript"> /* This function picks a random number between 0 and 9 and writes it to the page. */ function doLucky() { var x = Math.round(Math.random() * 9); document.write(x); } </script> </head> <body> <!-- The following paragraph calls the doLucky() function three times to write three random numbers to the page. --> <p>Here are your lucky numbers for the day: <strong> <script language="JavaScript">doLucky();</script> <script language="JavaScript">doLucky();</script> <script language="JavaScript">doLucky();</script> </strong></p> </body> </html> The easiest way to do this is to insert a special meta tag in the head section of your page. Meta tags indicate information in an HTML document that isn't for the browser to display. These tags have a variety of functions. Most often, they include keywords or descriptions of the page for the benefit of search engines. But you can also use a particular type of meta tag to enable the refresh behavior, as in Figure 75.2. Listing 75.2. View Source for Figure 75.2.<html> <head> <title>Lucky Numbers</title> <meta http-equiv="refresh" content="3,#"> <script language="JavaScript"> /* The doLucky() function goes here. */ </script> </head> <body> <p>Here are your lucky numbers for the next three seconds: <strong> <script language="JavaScript">doLucky();</script> <script language="JavaScript">doLucky();</script> <script language="JavaScript">doLucky();</script> </strong></p> </body> </html> Figure 75.2. Use a meta tag to make the browser reload the page every three seconds.
Just as the type attribute of an input tag determines the kind of form widget that the browser displays, the http-equiv attribute of a meta tag works the magic. Different values in the http-equiv attribute create different kinds of meta tags. By setting the http-equiv attribute to refresh, you turn the meta tag into an automatic page refresher. How often the browser refreshes the page depends on the value of the content attribute. In the View Source for Figure 75.2, the meta tag looks like this: <meta http-equiv="refresh" content="3,#"> The 3 in the content attribute indicates a refresh cycle of three seconds. In other words, the browser reloads the page every three seconds. The # in the content attribute is browser shorthand that stands for the current page. You've used this notation before to create self-referential links. So, to express the value of the content attribute in plain language, you get something like, "Every three seconds, reload the current page." There's no rule that says the page has to reload every three seconds. For a longer refresh cycle, increase the number of seconds: <meta http-equiv="refresh" content="60,#"> This meta tag causes the page to reload every minute.
|