Redirecting with HTML and ECMAScript
Foreword: You must have opened a web page and seen something like, - If you cannot see the page content, click the following button to redirect. I show you how to code such a scheme in this article.
By: Chrysanthus Date Published: 16 Feb 2013
Introduction
Overview
With this particular scheme, there are two web pages: one, which has the message, “If you cannot see the page content, click the following button to redirect.”; and the other, the page of interest. So, one page is the redirecting page and the other is the page of interest that has the desired content for the web visitor.
View for Visitor of the Redirecting Page
The visitor has the URL (link) of the redirecting page. He might have it in his email. When he clicks the hyperlink with the hope of seeing the page of interest, he first sees the redirecting page. What he sees is as follows:
Redirecting . . .
If you cannot see the page content, click the following button to redirect:
Button
Code Required
I do not talk about the page of interest in this tutorial. My focus is on the redirecting scheme, which only calls the page of interest and nothing else. What the user sees of the scheme, is typed in the redirecting page.
Now, just above the text display, “Redirecting . . .” you have an ECMAScript with the DOM window open() method, opening the page of interest. The onclick event of the button has the same DOM window open() method. However, here, the method will be executed only when the button is clicked. On the other hand, the ECMAScript just above “Redirecting . . .” is executed as the page loads. The botton is there to be clicked in case the script does not load the page of interest.
The following is a sample redirecting page code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<script type='text/ECMAScript'>
window.open('interest.htm', '_self');
</script>
Redirecting . . .
<br><br>
If you cannot see the page content, click the following button to redirect:
<br><br>
<button type = "button" onclick = "window.open('interest.htm', '_self');">Click Here</button>
</body>
</html>
If you try this code in your home or office computer, you would not see the redirecting page; you would see the page of interest. This is because in your home or office computer, the operation of the first ECMAScript (open method) would be too fast.
Main Redirecting Feature
The main redirecting feature is the window.open() method of ECMAScript. As the page is loading, the window.open() method of the ECMAScript just above “Redirecting . . .” is executed. If the new page is taking to long to open or if for some reason, the visitor (user) does not see the new page, he clicks the button.
When the button is clicked, the window.open() method is executed again. Clicking the button has the same effect like refreshing a page by clicking the Reload (Refresh) button of the browser; but this time a new page is being called.
In theory, you can use a hyperlink instead of a button, something like:
<a href="" onclick = "window.open('interest.htm', '_self');">Click Here</a>
Note that the href value is an empty string here. In theory when you click this link, the page of interest would open.
In practice, some browsers support this kind of link and others do not. Others might actually give wrong results.
A Reasons for Redirecting
One reason for redirecting is that you can have a modified web page of an old page with a new URL. So, you place the redirecting scheme in the old page of link that customers already know, and hope that with time, customers will know the new URL.
Where Redirecting is noticed
If you have a slow client computer and/or a slow Internet line, you would notice redirecting. In this case clicking the redirecting button is like reloading a page, but this time, a new page. With a fast computer and fast line, you would hardly notice redirecting, even though the scheme might be present
Button with Hand Indicator
You may want that when the mouse pointer is over the button, the pointer should be a hand. It is simple to do this: Just add a style attribute to the button code as in:
<button style="cursor:pointer" type = "button" onclick = "window.open('interest.htm', '_self');">Click Here</button>
That is what I have prepared on Redirecting with HTML and ECMAScript.
Chrys
Related Articles
Same Page Form Feedback with JavaScriptSimulating onmouseout Event for Web Page Layers
Ajax Technology Explained
HTML Link Rectangle
Image and Text as same Hyperlink
Simulating an HTML Hyperlink
ECMAScript (Javascript) eval Function
Writing a Web Live Text Chart Application with PHP and MySQL
Page Views with Ajax and PHP and MySQL
Shopping Cart with HTML Table for Web Development in PHP and MySQL
Major in Website Design
Web Development Course