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

最新推荐文章于 2024-08-24 20:26:31 发布

carolAIF

最新推荐文章于 2024-08-24 20:26:31 发布

阅读量187

点赞数

分类专栏： JavaScript 文章标签： JavaScript 脚本 HTML XHTML 浏览器 ViewUI

本文链接：https://blog.csdn.net/carolAIF/article/details/83634571

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

carolAIF

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习笔记之用链接对用户进行重定向

2.8 用链接对用户进行重定向可以根据用户是否打开了JavaScript功能，无缝地对用户进行重定向（redirection），也就是将用户转到另一个页面。这个示例演示如何将重定向功能嵌入链接中。我们将使用两个HTML页面和一个JavaScript文件。第一个HTML页面（脚本2-9）向用户显示链接。脚本2-10是JavaScript文件，脚本2-11是在用户启用了JavaScript功能的...
复制链接

扫一扫