防止页面回退

25人阅读 评论(0) 收藏 举报
分类:

window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转。

在history中跳转
使用back(), forward()和go()方法来完成在用户历史记录中向后和向前的跳转。

向后跳转

window.history.back()

这段代码和用户点击浏览器回退按钮的效果相同。

向前跳转

window.history.forward()

这段代码如同用户点击了前进按钮。

跳转到history中指定的一个点
你可以用go()方法载入到会话历史中的某一特定页面,通过与当前页面相对位置来标志(当前页面的相对位置标志为0)

向后回退一个页面(等同于调用back())

window.history.go(-1);

向前前进一个页面(等同于调用forward())

window.history.go(-1);

也可以通过查看长度属性的值来确定历史堆栈中页面的数量

window.history.length;

添加和修改历史记录中的条目
history.pushState()和history.replaceState()方法,通常配合window.onpopstate()方法使用。

使用history.pushState()可以改变referrer,它在用户发送XMLHttpRequest请求时在HTTP头部使用,改变state后创建的XMLHttpRequest对象的referrer都会被改变。因为referrer是标识创建XMLHttpRequest对象时this所代表的window对象中document的url。

pushState()方法的例子
假设在http://mozila.org/foo.html中执行了以下的JavaScript代码:

var stateObj = {foo: "bar"};
history.pushState(stateObj, "page 2", "bar.html");

这段代码将使浏览器地址栏显示为http://mozilla.org/bar.html,但并不会导致浏览器加载bar.html,甚至不会检查bar.html是否存在。

假设现在用户又访问了http://google.com,然后点击了返回按钮。此时,地址栏将显示http://mozilla.org/bar.html, 同时页面会触发popstate事件,事件对象state中包含了stateObj的一份拷贝。页面本身和foo.html一样。

如果我们再次点击返回按钮,页面URL就会变为http://mozilla.org/foo.html, 文档对象document会触发另外一个popstate事件,这一次事件对象stateObject为null,返回并不改变页面内容。

window.onpopstate()
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发,如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

调用history.pushState()不会触发popstate事件,popstate事件只会在浏览器某些行为下触发,比如点击后退,前进按钮。

语法

window.onpopstate = funcRef;  // funcRef是个函数名

例子
假如当前网页地址为http://example.com/example.html,运行如下代码:

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

还是有点一知半解………….


防止页面回退的代码,如下:

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
})

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate 来自MDN

查看评论

IVR技术的发展

IVR技术的发展刘智明——IVR(Interactive Voice Response)即交互式语音应答,可以提高呼叫服务的质量并节省费用。随着技术的进步,IVR也有了一系列的发展,可以根据用户输入的...
  • tchaikov
  • tchaikov
  • 2001-01-08 10:37:00
  • 1524

.net 一招解决页面回退问题

  • 2016年06月22日 16:41
  • 1KB
  • 下载

一种防止页面后退的实现方法(jsp)

当用户退出系统后,如果再重新打开登录后的页面,应该跳转到一个提示用户未登录的页面,这很容易做到,只要在jsp页面的头部加上验证session的代码既可以。但是由于浏览器有缓存,可以后退,如果退出系统后...
  • mr_orange_klj
  • mr_orange_klj
  • 2015-01-16 15:03:22
  • 2842

如何避免历史回退到登录页面

我搞出来的网站,在浏览器中按回退,不小心就退到登录页面,是可忍,孰不可忍。怎么搞定这个问题?试来试去,什么禁止缓存,meta里面no-cache啦,什么后台代码里Response.Buffer=tru...
  • leftfist
  • leftfist
  • 2016-08-26 21:23:10
  • 2372

解决php网页后退过期问题

原因: 退到一个因POST而出现的网页,eg:if($_SERVER['REQUEST_METHOD']=='POST') 。。。。PHP网页后退显示过期 解决办法: 第一,使用...
  • Touatou
  • Touatou
  • 2017-05-25 00:25:14
  • 287

js防止页面回退

<script> //获取当前页面的状态并且添加事件监听 history.pushState(null, null, documen...
  • baidu_27441031
  • baidu_27441031
  • 2018-03-26 19:19:54
  • 8

设置退出系统再点后退就显示页面过期的方法

问题:当退出时候,已经清空了session,但是当点击IE后退按钮时候,还能回去查看刚才页面 解决方法: 第一种,在jsp中加入如下代码: ...
  • xiangjun_28
  • xiangjun_28
  • 2011-08-03 20:38:06
  • 1418

屏蔽html退回功能---终极解决

以前有说过如何屏蔽html退回功能,即采用window.location.replace()方法,但是这种方法存在缺陷:如果原窗口不是全屏打开,则replace后也无法全屏,现解决如下:  1:使用w...
  • rosten
  • rosten
  • 2009-04-21 10:46:00
  • 2149

在Java web项目中防止用户注销后使用浏览器中的“后退”按钮返回注销前页面

通常在Java web项目中用户注销是这样实现的: session().setAttribute("currentUser", null); 或者session.removeAttribute("cu...
  • S_targaze_R
  • S_targaze_R
  • 2015-01-05 21:14:45
  • 5542

解决Ajax框架下页面回退刷新问题

存在问题 如果使用Firefox等浏览器访问RMS网站时,我们可能会发现页面之间的切换是通过AJAX异步请求实现的,同时页面的URL不会发生改变,虽然可以通过页面上的按钮通过AJAX异步请求实现回退...
  • u010403387
  • u010403387
  • 2015-05-08 10:06:09
  • 5451
    个人资料
    持之以恒
    等级:
    访问量: 8767
    积分: 618
    排名: 7万+