pushstate与监听浏览器返回解决的问题实际开发

  pushstate与监听浏览返回解决的问题 1.实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了js控制浏览器返回按钮,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返

  pushstate与监听浏览器返回解决的问题

  1.实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的东西 都没有了,这很影响体验。

  因此可以使用pushstate方法,不刷新浏览器改变url 当你再返回时候就会返回到这个A页面而不是上上个页面。但此时还需要监听返回的按钮,进而控制组件的显示与隐藏。这点也至关重要。不然组件不隐藏,也就相当于没效果。

  pushState

  使用方法(一般情况)

  <pre class="brush:js;">
function pushHistory() {
var state = { title: "title", url: "#" };
window.history.pushState(state, "title", "#"); }</pre>

  参数说明:

  js控制浏览器返回按钮_js监听微信返回按钮_js监听浏览器返回按钮

  pushState() 带有三个参数:state是js对象,title是个标题(现在被忽略了),以及一个可选的URL地址。

  关于pushstate的说明

  js监听浏览器返回按钮_js控制浏览器返回按钮_js监听微信返回按钮

  浏览器不会向服务端请求数据js控制浏览器返回按钮,直接改变url地址,可以类似的理解为变相版的hash;但不像hash一样,浏览器会记录pushState的历史记录,可以使用浏览器的前进、后退功能作用。

  监听浏览器返回按钮

  <pre class="brush:js;">
window.addEventListener("popstate", function(e) { console.log(e); alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false);</pre>

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1644
0 评论
467

发表评论

!