对pushState、replaceState和onpopstate一点使用

应用场景：实现点击浏览器前进和回退按钮importPage，checkPage div区块的切换

关键代码：

　　新建tab页，将页面url粘贴到地址拦，刷新页面，此时历史栈数为2，当前onpopstate事件回调，返回e.state为null，先替换栈里的当前页，浏览器显示checkPage页面，栈里当前页也为checkPage。

window.history.replaceState({    wid: 'checkPage'}, document.title);

点击按钮，向历史栈里添加页面。

var registerBackPage = function (wid) {

    window.history.pushState({        wid: wid    }, document.title);}window.addEventListener("popstate", function (t) {    var wid = "";    if (t.state && t.state.wid) {        wid = t.state.wid;    } else {        return    }    switchPage($('#' + wid));})

$("#importPageBtn").click(function () {    registerBackPage('importPage');    switchPage($('#importPage'));});

参考链接：http://www.cnblogs.com/lyzg/p/5960609.html

转载于:https://www.cnblogs.com/haigelang/p/7081872.html

对pushState、replaceState和onpopstate一点使用相关推荐

history`pushState和window`onpopstate实现tab切换效果
前言先来介绍一下history.pushState()和window.onpopstate history.pushState(),改变当前地址栏的路径,并不会更新页面内容用法:history.p ...
ajax与HTML5 history pushState/replaceState实例
一.本文就是个实例展示三点: 我就TM想找个例子,知道如何个使用,使用语法什么的滚粗跟搜索引擎搞基自己备忘精力总是有限的,昨天一冲动,在上海浦东外环之外订了个90米的房子,要借钱筹首付.贷款和 ...
vue-router 路由 pushstate replacestate popstate 详解
一. 概述 window.history属性指向 History 对象,它表示当前窗口的浏览历史. History 对象保存了当前窗口访问过的所有页面网址.下面代码表示当前窗口一共访问过3个网址. w ...
replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新渔人码头...
使用Ajax可以异步获取数据,可以更高效地渲染页面. 但也存在这一些问题: 再刷新页面,页面就会变成初始的状态浏览器的前进后退功能无效对搜索引擎的爬虫抓取不友好 1. 早前会使用浏览器的 hash ...
h5 的 pushState, replaceState 和 popstate 事件
我们可以使用location.hash来模拟ajax的前进后退功能.但是使用location.hash存在下面几个问题: 1.使用location.hash会导致地址栏的url发生变化,用户体验不够友 ...
前端js实现路由切换页面 pushState replaceState
window.history 我们可以通过window.history的两个方法来控制浏览器的路由改变,但不会让浏览器刷新页面. pushState 会追加浏览器的路由历史,但不会刷新页面,可以用这种 ...
window history pushState replaceState 跳转原理
一.pushState 比如,当前打开的界面是:https://developer.mozilla.org/en-US/docs/Web/API/History,如下图所示: 在chrome的cons ...
html5test作用,test - SegmentFault 思否
防抖:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. function debounce(fn) { // 4.创建一个标记用来存放定时器的返回值 let timeout = n ...
Javascript history pushState onpopstate方法做AJAX SEO
参考MDN: https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history https://develop ...

对pushState、replaceState和onpopstate一点使用

对pushState、replaceState和onpopstate一点使用相关推荐

最新文章

热门文章