8-10 返回浏览历史中的其他页面
本节编程练习不计算学习进度,请电脑登录imooc.com操作

返回浏览历史中的其他页面

go()方法,根据当前所处的页面,加载 history 列表中的某个具体的页面。

语法:

window.history.go(number);

参数:

浏览器中,返回当前页面之前浏览过的第二个历史页面,代码如下:

window.history.go(-2);

注意:和在浏览器中单击两次后退按钮操作一样。

同理,返回当前页面之后浏览过的第三个历史页面,代码如下:

window.history.go(3);

任务

补充右边代码编辑器第9行和第13行,使用go()方法,完善GoBack()和GoForward()函数,实现返回前或下一个页面功能。

注意:本编辑器有局限性,可以把代码拷贝到本机上练习,或者在本节页面窗口多打开几个网页后(为了添加历史列表项),在打开本节进行练习。

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. </head>
  7. <script type="text/javascript">
  8. function GoBack() {
  9.  
  10. }
  11.  
  12. function GoForward() {
  13.  
  14. }
  15. </script>
  16.  
  17. <body>
  18. 点击下面的锚点链接,添加历史列表项:
  19. <br />
  20. <a href="#target1">第一个锚点</a>
  21. <a name="target1"></a>
  22. <br />
  23. <a href="#target2">第二个锚点</a>
  24. <a name="target2"></a>
  25. <br /><br />
  26. 使用下面按钮,实现返回前或下一个页面:
  27. <form>
  28. <input type="button" value="返回前一个页面" onclick="GoBack();" />
  29. <input type="button" value="返回下一个页面" onclick="GoForward();" />
  30. </form>
  31. </body>
  32. </html>
下一节