Javascript学习札记之 用链接对用户进行重定向
日期：2014-05-16 浏览次数：20451 次
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实现。
