2.8 用链接对用户进行重定向
可以根据用户是否打开了JavaScript功能,无缝地对用户进行重定向(redirection),也就是将用户转到另一个页面。这个示例演示如何将重定向功能嵌入链接中。我们将使用两个HTML页面和一个JavaScript文件。第一个HTML页面(脚本2-9)向用户显示链接。脚本2-10是JavaScript文件,脚本2-11是在用户启用了JavaScript功能的情况下用户被重定向到的HTML页面。图2-6是用户最初看到的页面。当用户点击这个链接时,根据他们是否打开了 JavaScript功能,他们被带到两个页面之一。
脚本2-9 这个HTML页面基于链接对用户进行重定向
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to our site</title> <script src="script07.js" type="text/javascript" language="javascript"> </script> </head> <body bgcolor="#FFFFFF"> <h2 align="center"> <a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a> </h2> </body> </html>
脚本2-10 通过将重定向功能嵌入在代码中,用户甚至不知道你的脚本干预了链接的行为
window.onload = initAll; function initAll() { document.getElementById("redirect").onclick = initRedirect; } function initRedirect() { window.location = "jswelcome.html"; return false; }
脚本2-11 这是启用了JavaScript功能的用户将看到的HTML页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Our site</title> </head> <body bgcolor="#FFFFFF"> <h1>Welcome to our web site, which features lots of cutting-edge JavaScript</h1> </body> </html>
对用户进行重定向的步骤如下:
(1) <a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>
在脚本2-9中,这是用户点击的链接。如果用户没有启用JavaScript并点击链接,那么他们会按照通常的href路径前进,到达如图2-7所示的页面。如果用户启用了JavaScript并点击链接,那么脚本(见第(4)步)就会发挥作用并装载一个新页面。
(2) window.onload = initAll;
这行代码在脚本2-10中。当页面的装载完成时,它会触发initAll()函数。
(3) function initAll() {
document.getElementById ("redirect").onclick = initRedirect;
}
这个函数告诉id为redirect的元素(也就是第(1)步中的链接),在它被点击时应该调用initRedirect()函数。
(4) function initRedirect() {
window.location ="jswelcome.html";
return false;
}
如果调用这个函数,它就将window.location(即浏览器中显示的页面)设置为一个新页面。return false表示停止对用户点击的处理,这样就不会装载href指向的页面。
这种方式最酷的特色是,我们完成了重定向,但是用户根本不会意识到发生了重定向。他们仅仅是根据自己的情况到达了两个页面之一。如果他们启用了JavaScript,就会到达图2-8所示的页面。
提示
q 初看上去,似乎可以只在全局范围设置onclick处理程序——即在装载页面时——但是不能这么做。浏览器有可能还没有遇到id为redirect的元素,尤其是对于复杂的大页面,在这种情况下,JavaScript就不能设置onclick处理程序。所以,我们必须等待页面的装载完成,这要通过 onload实现。