一般浏览记录模式
假设有三个页面, start.html, 通过点击start.html上的链接跳转到 first.html, 然后点击first.html上链接跳转到 second.html, 那么在history中记录的历史如下链表:
如下代码例子, 页面跳转均以 链接实现。
start.html
<html> <head> <style> </style> </head> <body> <a href="./first.html">go to first html</a> </body> </html>
first.html
<html> <head> <style> </style> </head> <body> <a href="./second.html">go to second html</a> </body> </html>
second.html
<html> <head> <style> </style> </head> <body> here is second html </body> </html>
某个页面被浏览过后,在history中被替换
对于一种特殊场景, 此页面用户看完后, 不想让用户再看到, 例如特定页面上,让用户选择一个条件,此选择是一次性的, 不能让用户多次选择, 点击回退按钮不显示此页面.
使用 location.replace接口, 实现代码如下, first.html页面点击连接后, 跳转到second.html, first.html页面在history中被second.html代替。
浏览到 first.html history记录
从first.html跳转到 second.html后, history记录
这样, 当前显示second,点击回退按钮, 回退到start页面。
实例代码,其他两个不变。
first.html
<html> <head> <style> </style> </head> <body> <a id="go2scond" href="#" οnclick="go2second();">go to second html</a> <script type="text/javascript"> function go2second() { location.replace("./second.html"); } </script> </body> </html>
某个页面之前的所有页面不能再被浏览
如果某个页面之前的页面是一次性显示, 对于用户来说不能再被显示, 例如当用户选择了所以后的内容后,在最后一步确认后, 不能再被修改, 用户企图通过浏览器回退按钮重新查看之前的页面, 这中条件下, 想法让其失效。
history对象, 没有提供清空之前浏览页面的接口, 此需求可以通过js脚本判断实现:
例如下面demo, 用户从start.html浏览到 first.html页面,后浏览到second.html, 然后用户点击回退仍然显示 second.html
修改first.html代码如下
具体实现原理是, 在之前不能浏览页面中的最后一一个页面脚本中,添加history.forward(1), 让其向后自动跳转到后面一个页面, 对于第一次访问此页面, 由于没有后面一个页面, 所以不会执行, 当浏览到后一个页面后, 这时此页面在history中就有了后一个页面, 通过后退按钮, 当加载此页面时候, 就会自动跳转到后一个页面。
<html> <head> <style> </style> </head> <body> <a href="./second.html">go to second html</a> <script> //HTML禁用回退上一浏览页面按钮 /* 加入有以上代码的页面无法回退到它 例如A页面有这段代码,从A链接到B页面,这时一旦在B页面上按回退按钮,则无法回退到A页面 */ if(window.history.forward(1) != null) { } </script> </body> </html>
浏览历史(前进 和 后退)与刷新的差别
浏览历史(前进和后退),仅仅加载已经访问过页面的 URL, 如果其中有一个页面是以 form 表单 post 方法提交后显示的, 浏览历史 也仅仅是加载 此页面的url, 并不提交 post的数据。
刷新, 如果有个页面是以提交数据显示的, 则刷新会提示用户,是否要重复提交数据:
demo测试代码:
start.php form提交数据到 first.php
<html> <head> <style> </style> </head> <body> <form action="./first.php" method="post"> <input type="text" name="para" id="para" value="para" /> <input type="submit" value="submit" /> </form> </body> </html>
first.php是被提交数据后显示的, 使用刷新则会提示是否要重复提交数据。点击回退和前进, 都没有重复提交数据提示。
<html> <head> <style> </style> </head> <body> <a href="./second.php">go to second html</a> </body> </html>
second.php
<html> <head> <style> </style> </head> <body> here is second html </body> </html>
通过改造, 在first.php中添加 302 跳转, 直接跳转到 second, 可以避免 用户看到数据提交的页面 first.php, 同时尝试前进和后退按钮, 也不能浏览到first.php,说明在history中不会记录跳转的中间响应(从应用上也不会记录, 因为如果记录, 则回退按钮则永远不能回到start.php页面, 给用户带来不便)。
<?php //重定向浏览器 header("Location: /replaceTest/second.php"); //确保重定向后,后续代码不会被执行 exit; ?> <html> <head> <style> </style> </head> <body> <a href="./second.php">go to second html</a> </body> </html>
history中记录的链表同replace
出处: http://www.cnblogs.com/lightsong/