javascript学习(2):页面重定向,跳转页面

用链接对用户进行重定向


页面重定向-----------1
<!DOCTYPE html>
<html>
<head>
<title>Welcome to our site</title>
<script src="script07.js"></script>
</head>
<body>
<h2 class="centered">
<a  href="script04.html" id="redirect"> Welcome to our site... c'mon in!</a>
</h2>
</body>
</html>

script07.js内容
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
window.location = "jswelcome.html";//要重定向的页面
return false;
}
这样重定向,地址栏会被改变
window.location(即浏览器中显示的页面)设置为一个新页面。

return false 表示停止对用户单击的处理,这样就不会加载href 指向的页面。

这种方式最酷的特色是,我们完成了重定向而用户根本不会意识到发生了重定向。他们仅仅是根
据自己的情况到达了两个页面之一。



页面重定向------2
在用户单击链接之后,但是在浏览器转到链接的目的地之前,添加提示

<!DOCTYPE html>
<html>
<head>
<title>Welcome to our site</title>
<script src="script08.js"></script>
</head>
<body>
<h2 class="centered">
Hey, check out <a href="http://www.pixel.mu/" id="redirect"> my cat's Web site</a>.
</h2>
</body>
</html>

脚本
window.onload = initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
alert("We are not responsible for the content of pages outside our site");
window.location = this;//这个this代表页面的超链接
return false;
}

上面的重定向有一个好处,就是如果需要更换重定向之后的目标页面,只需要更改
HTML中<a>标签的href属性即可。



this 是什么
在这个示例中使用了this,但是this 究竟是什么还不很清楚。
JavaScript 关键字this 使脚本能够根据使用这个关键字的上下文将值传递给函数。在这个示例中,this 是在一个由标签的事件触发的函数中使用的,所以this 是一个链接对象。在后面的示例中,将看到在其他地方使用this,你应该能够根据使用它的上下文判断出this 是什么。




















































你可能感兴趣的:(JavaScript,脚本)