您的位置：首页 > 其它

浏览器浏览记忆（history）几则技巧记录

2015-04-25 22:38 169 查看

一般浏览记录模式

假设有三个页面， 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="#" onclick="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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航