Loading

javascript用链接对用户进行重定向

　　根据用户是否打开了JavaScript功能，无缝的对用户进行重定向（redirection），也就是在用户不知道的情况下将用户转到另一个页面。

　　下面的示例演示如何将重定向功能嵌入链接中。我们将使用两个HTML页面和一个JavaScript文件。

　　第一个HTML页面（见脚本1-1）向用户显示链接。脚本1-2是JavaScript文件，脚本1-3是在用户启用了JavaScript功能的情况下用户被重定向到的HTML页面。

　　当用户单击这个链接的（见图1-4）时，根据他们是否打开了JavaScript功能，将被带到两个页面之一。

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

　　脚本1-1 这个HTML页面基于链接对用户进行重定向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript</title>
		<link rel="stylesheet" href="../css/javascript.css" />
		<script src="../js/redirect.js"></script>
	</head>
	<body>
		<h2 class="centered">
		<a href="script01.html" id="redirect">Welcome to JavaScript</a>
		</h2>
	</body>
</html>

　　脚本1-2 通过将重定向功能嵌入在代码中，用户甚至不知道你的脚本干预了链接的行为

window.onload = initAll;

function initAll(){
	document.getElementById("redirect").onclick = initRedirect;
}

function initRedirect(){
	window.location="script02.html";
	return false;//表示停止对用户单击的处理，这样就不会加载href指向的页面。
}

　　脚本1-5 这是启用了JavaScript功能的用户将看到的HTML页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2 class="redirect">
			This is javascript to html
		</h2>
	</body>
</html>

　　

　　<a href="script01.html" id="redirect">Welcome to JavaScript</a>

　　在脚本1-1中，这是用户单击的链接。如果用户没有JavaScript功能并单击链接，那么他们会按照通常的href路径前进，到达如图1-6所示的页面。如果用户启用了JavaScript功能并点击链接，会执行脚本1-2的JavaScript代码重定向到如图1-7所示的页面。

图1-6 href路径中的页面

 

图1-7 重定向后的页面

posted @ 2018-01-12 15:49  赵妹儿  阅读(429)  评论(0)    收藏  举报