4.6 实践练习:创建“后退”和“前进”按钮
可以使用history对象的back和forward方法在Web文档中添加你自己的“后退”和“前进”按钮。当然,浏览器已经有了“后退”和“前进”按钮,但有时候这它可用来指向特定的链接。
现在创建一个脚本,来显示“后退”和“前进”按钮,并使用这些方法为浏览器导航。下面是创建“后退”按钮的代码:
<input type="button"
onClick="history.back();" value="<-- Back">
<input>标签定义了一个标识为Back的按钮。OnClick事件处理器使用了history.back()方法,进入历史的前一个页面。“前进”按钮的代码与此类似:
<input type="button"
onClick="history.forward();" value="Forward -->">
除了这些,还需建立HTML的其余部分。程序清单4.2显示了完整的HTML文档,图4.2是该文档在浏览器中的显示画面。在将这个文档载入到浏览器之后,访问其他的网址并确认一下“后退”和“前进”按钮是否正常工作。
程序清单4.2 一个使用JavaScript制作包含“后退”和“前进”按钮的Web页面
<html>
<head><title>Back and Forward Buttons</title>
</head>
<body>
<h1>Back and Forward Buttons</h1>
<p>This page allows you to go back or forward to pages in the history list.
These should be equivalent to the back and forward arrow buttons in the
browser’s toolbar.</p>
<p>
<input type="button"
onClick="history.back();" value="<-- Back">
<input type="button"
onClick="history.forward();" value="Forward -->">
</p>
</body>
</html>
|
图4.2 Internet Explorer中的“后退”和“前进”按钮 |
|
![]()








