Javascript学习笔记之 用链接对用户进行重定向

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实现。

你可能感兴趣的:(JavaScript,html,浏览器,XHTML,脚本)