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">

<head>

<title>Welcome to our site</title>

</script>

</head>

<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">

<head>

</head>

<h1>Welcome to our web site, which features lots of cutting-edge JavaScript</h1>

</body>

</html>

图2-6 这个页面上的链接包含重定向代码

对用户进行重定向的步骤如下：

(1) <a href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>

在脚本2-9中，这是用户点击的链接。如果用户没有启用JavaScript并点击链接，那么他们会按照通常的href路径前进，到达如图2-7所示的页面。如果用户启用了JavaScript并点击链接，那么脚本（见第(4)步）就会发挥作用并装载一个新页面。

图2-7 如果你认为JavaScript是站点的必要部分，就用这个消息向用户说明情况

(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所示的页面。

图2-8 支持JavaScript的浏览器会显示这个页面

_ü提示

q 初看上去，似乎可以只在全局范围设置onclick处理程序——即在装载页面时——但是不能这么做。浏览器有可能还没有遇到id为redirect的元素，尤其是对于复杂的大页面，在这种情况下，JavaScript就不能设置onclick处理程序。所以，我们必须等待页面的装载完成，这要通过onload实现。

【查看所有评论(0)条】