当前位置：首页 > Web开发 > 正文

BOM(History东西)

2024-03-31 Web开发

1、history.back()，加载历史列表中的前一个 URL：

（1）运行措施先进入此页面，点击文字链接后进入下一个页面：

<!DOCTYPE html> <html> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title></title> </head> <body> <a href=http://www.mamicode.com/"History东西.html">请点击进入下一个页面</a> </body> </html>

技术图片

（2）点击返回上一级按钮可以再次回到第一个页面：

技术图片

代码如下：

go()：

<!DOCTYPE html> <html> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title>History东西</title> <script> function fanhui(){ history.go(-1); } </script> </head> <body> <input type=http://www.mamicode.com/"button" value=http://www.mamicode.com/"返回上一页" onclick=http://www.mamicode.com/"fanhui()"/><br /> </body> </html>

back()：

<!DOCTYPE html> <html> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title>History东西</title> <script> function fanhui(){ history.back(); } </script> </head> <body> <input type=http://www.mamicode.com/"button" value=http://www.mamicode.com/"返回上一页" onclick=http://www.mamicode.com/"fanhui()"/><br /> </body> </html>

这两个要领是等效的。

2、 history.forward()要领，加载历史列表中的下一个 URL

先设置三个页面：

页面一：

<!DOCTYPE html> <html> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title></title> </head> <body> <h2>这是第一个页面</h2> <a href=http://www.mamicode.com/"2.html">我是第一个页面，请点击！</a> </body> </html>

页面二：

<!DOCTYPE html> <html> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title>History东西</title> <script> function fanhui(){ history.go(1); } </script> </head> <body> <h2>这是第二个页面</h2> <input type=http://www.mamicode.com/"button" value=http://www.mamicode.com/"进入下一个页面" onclick=http://www.mamicode.com/"fanhui()"/><br /> <a href=http://www.mamicode.com/"3.html">进入第三个页面</a> </body> </html>

固然，可以用history.forword()要领，，效果是一样的。

页面三：

<!DOCTYPE html> <html> <head> <meta charset=http://www.mamicode.com/"UTF-8"> <title></title> </head> <body> <h2>这是第三个页面</h2> <input type=http://www.mamicode.com/"button" value=http://www.mamicode.com/"跳转到第二个页面" onclick=http://www.mamicode.com/"javascript:location.href=‘2.html‘"/> </body> </html>

先进入第一个页面：

技术图片