精华内容
下载资源
问答
  • HTML5的popstate、pushState、replaceState记录popstate示例hashchangehistory.pushState()语法参数描述示例history.replaceState()语法参数例子推荐阅读Vue源码学习目录Vue Router源码(四)路径切换 你越是认真...

    你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
    《人生果实》经典语录

    Vue-Router源码里路由切换跳转的实现原理是通过调用浏览器原生的 history 的 pushState 方法或者 replaceState 方法实现

    在这里记录一下popstate、pushState、replaceState相关内容,加深印象

    popstate

    popstate-MDN

    活动历史记录条目更改时,将触发popstate事件

    如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本。

    需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件

    只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()或者history.forward()方法)

    不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

    示例

    打开http://example.com/example.html页面运行以下代码, 会按预期那样打出log提示。

    window.addEventListener('popstate', (event) => {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    });
    history.pushState({page: 1}, "title 1", "?page=1");
    history.pushState({page: 2}, "title 2", "?page=2");
    history.replaceState({page: 3}, "title 3", "?page=3");
    history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
    history.back(); // Logs "location: http://example.com/example.html, state: null
    history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
    

    使用onpopstate事件处理程序属性的相同示例:

    window.onpopstate = function(event) {
      console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
    };
    history.pushState({page: 1}, "title 1", "?page=1");
    history.pushState({page: 2}, "title 2", "?page=2");
    history.replaceState({page: 3}, "title 3", "?page=3");
    history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
    history.back(); // Logs "location: http://example.com/example.html, state: null
    history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
    

    注意,虽然原始的历史项( http://example.com/example.html所对应的)没有关联的状态对象(state object),但稍后调用history.back()激活该历史项时,仍会触发popstate事件。

    hashchange

    hash改变时会触发该事件

    window.addEventListener('hashchange', function() {
      console.log('The hash has changed!')
    }, false);
    
    function locationHashChanged() {
      if (location.hash === '#cool-feature') {
        console.log("You're visiting a cool feature!");
      }
    }
    
    window.onhashchange = locationHashChanged;
    

    history.pushState()

    pushState - MDN
    在 HTML 文档中,history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state)。

    语法

    history.pushState(state, title[, url])
    

    参数

    • state:

    状态对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联。

    当用户导航到新状态时,都会触发popstate (en-US)事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。

    状态对象可以是任何可以序列化的对象。 因为Firefox将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,所以我们对状态对象的序列化表示施加了640k个字符的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState(),则该方法将引发异常。 如果您需要更多空间,建议您使用 sessionStorage或者localStorage。

    • title

    当前大多数浏览器都忽略此参数,尽管将来可能会使用它。 在此处传递空字符串应该可以防止将来对方法的更改。 或者,您可以为要移动的状态传递简短的标题。

    • url(可选)

    新历史记录条目的URL由此参数指定。

    请注意,浏览器不会在调用pushState() 之后尝试加载此URL,但可能会稍后尝试加载URL,例如在用户重新启动浏览器之后。 新的URL不必是绝对的。 如果是相对的,则相对于当前URL进行解析。 新网址必须与当前网址相同 origin; 否则,pushState()将引发异常。 如果未指定此参数,则将其设置为文档的当前URL。

    描述

    从某种程度来说, 调用 pushState()window.location = "#foo"基本上一样, 他们都会在当前的document中创建和激活一个新的历史记录。但是 pushState() 有以下优势:

    • 新的URL可以是任何和当前URL同源的URL。但是设置 window.location 只会在你只设置锚的时候才会使当前的URL。
    • 非强制修改URL。相反,设置 window.location = “#foo”; 仅仅会在锚的值不是#foo情况下创建一条新的历史记录。
    • 可以在新的历史记录中关联任何数据。window.location = "#foo"形式的操作,你只可以将所需数据写入锚的字符串中。

    注意: pushState() 不会造成 hashchange (en-US) 事件调用, 即使新的URL和之前的URL只是锚的数据不同。

    示例

    以下代码通过设置state, title和url创建一条新的历史记录。

    const state = { 'page_id': 1, 'user_id': 5 }
    const title = ''
    const url = 'hello-world.html'
    
    history.pushState(state, title, url)
    

    history.replaceState()

    replaceState - MDN

    replaceState()方法使用state objects, title,和 URL 作为参数, 修改当前历史记录实体,如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

    语法

    history.replaceState(stateObj, title[, url]);
    

    参数

    • stateObj

    状态对象是一个JavaScript对象,它与传递给 replaceState 方法的历史记录实体相关联.

    • title

    大部分浏览器忽略这个参数, 将来可能有用. 在此处传递空字符串应该可以防止将来对方法的更改。或者,您可以为该状态传递简短标题

    • url 可选

    历史记录实体的URL. 新的URL跟当前的URL必须是同源; 否则 replaceState 抛出一个异常.

    例子

    假设 http://mozilla.org/foo.html 执行下面的 JavaScript 代码:

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

    此时页面地址变成了http://mozilla.org/bar.html 同时新增了一条历史记录

    然后执行下面的 JavaScript 代码:

    history.replaceState(stateObj, "", "bar2.html");
    

    此时页面地址变成http://mozilla.org/bar2.html 但是没有新增一条历史记录 说明只是当前页面地址变了

    URL栏显示 http://mozilla.org/bar2.html, 但是不会加载 bar2.html 页面,甚至不会检查bar2.html 是否存在

    假设用户跳转到 http://www.microsoft.com, 然后点击返回按钮.
    这时, URL 栏将会显示 http://mozilla.org/bar2.html 页面. 如果用户此时再点击返回按钮, URL栏将会显示 http://mozilla.org/foo.html 页面, 最终绕过了 bar.html 页面.

    推荐阅读

    Vue源码学习目录

    Vue源码学习完整目录

    Vue Router源码(四)路径切换

    Vue Router(四)路径切换


    谢谢你阅读到了最后~
    期待你关注、收藏、评论、点赞~
    让我们一起 变得更强

    展开全文
  • SPA应用的核心是路由监听,一般有两种方式,其一是利用URL锚点并监听hashchange事件,其二就是利用history.pushState和history.replaceState两个API并来实现页面的无刷跳转,但是原生JavaScript是无法监听到通过push...

    前言

            SPA应用的核心是路由监听,一般有两种方式,其一是利用URL锚点并监听hashchange事件,其二就是利用history.pushState和history.replaceState两个API并来实现页面的无刷跳转,但是原生JavaScript是无法监听到通过pushState或replaceState导致的state变化的,我们需要重写这两个API来实现,这里用到了闭包和包装器模式

    实现

    核心是wrapState方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>自定义对pushState、replaceState的监听</title>
    </head>
    <body>
    <button onclick="push()">点击切换路由</button>
    <button onclick="replace()">点击替换路由</button>
    <script>
        function push() {
            window.history.pushState({data:"from test1"}, "", "/test1");
        }
    
        function replace() {
            window.history.replaceState({data:"from test2"}, "", "/test2");
        }
    
        /**
         * 重写history的pushState和replaceState
         * @param action pushState|replaceState
         * @return {function(): *}
         */
        function wrapState(action) {
            // 获取原始定义
            let raw = history[action];
            return function () {
    
                // 经过包装的pushState或replaceState
                let wrapper = raw.apply(this, arguments);
    
                // 定义名为action的事件
                let e = new Event(action);
    
                // 将调用pushState或replaceState时的参数作为stateInfo属性放到事件参数event上
                e.stateInfo = {...arguments};
                // 调用pushState或replaceState时触发该事件
                window.dispatchEvent(e);
                return wrapper;
            }
        }
    
        //修改原始定义
        history.pushState = wrapState("pushState");
        history.replaceState = wrapState("replaceState");
    
        // 监听自定义的事件
        window.addEventListener("pushState", function (e) {
            console.info("pushState",e.stateInfo);
        })
        window.addEventListener("replaceState", function (e) {
            console.info("replaceState",e.stateInfo);
        })
    </script>
    </body>
    </html>

    控制台输出如下

    展开全文
  • pushState和replaceState h5中提供了只修改地址栏、不修改页面内容的api: pushState(添加浏览历史), replaceState(修改当前浏览历史), popState事件在用户返回或前进进会被出发触发 history.pushState方法接受三...

    pushState和replaceState

    h5中提供了只修改地址栏、不修改页面内容的api:

    • pushState(添加浏览历史),
    • replaceState(修改当前浏览历史),

    popState事件在用户返回或前进进会被出发触发
    history.pushState方法接受三个参数,依次为:
    state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。可用它来传一些数据
    title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
    url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
    history.replaceState方法跟pushState一样只不过replaceState是修改当前的状态

    popState的触发

    仅仅调用pushState方法或replaceState方法 ,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用JavaScript调用back、forward、go方法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。
    此事件可以添加一个回调函数,函数的第一个参数为事件,事件的state属性是pushState和replaceState中传递的第一个参数state
    判断浏览器是否支持这些api,并添加一些记录,如下添加三个

            history.pushState('#1', null, '#1');
            history.pushState({ a: 1, b: 2 }, null, '#2');
            history.pushState('#3', null, '#3');
            window.onpopstate = function(event) {
                console.log('location: ' + document.location);
                console.log(event.state);
            };
            //另一种添加事件的方法
            window.addEventListener('popstate', function(event) {
                console.log('location: ' + document.location);
                console.log(event.state);
            });
            history.go(-1)//触发popstate
    

    输出:

    location: http://127.0.0.1:5501/30-dispatchEvent.html#2
    {a: 1, b: 2}
    

    在这里pushState和popState才建立了联系,popState存储了pushSatte的state备份,在事件里的state里放着

    展开全文
  • 微信分享 ios分享失败 问题定位了很久,安卓没有问题,ios就是分享不成功/(ㄒo...但是因为code只能用一次,所以在获取到openid之后,利用window.history.pushState()方法,清空了location.search window.history.pushSt

    微信分享 ios分享失败
    问题定位了很久,安卓没有问题,ios就是分享不成功/(ㄒoㄒ)/~~

    背景:
    在微信授权的时候,用户同意授权,获取code,如果用户同意授权,页面将跳转至
    redirect_uri/?code=CODE&state=STATE。
    拿到code之后,可以去获取用户的openid。但是因为code只能用一次,所以在获取到openid之后,利用window.history.pushState()方法,清空了location.search
    window.history.pushState({}, '', window.location.origin + window.location.pathname + window.location.hash);
    ios微信不支持history.pushState方法,查了很多的资料,贴两个典型的问题

    ios微信开网页history.pushState页面链接不改变,4年的老问题了
    history.pushState 苹果微信浏览器无效

    解决方法:
    我直接将openid放到localStorage里面,然后用window.location.href强制重新刷了页面。因为我页面需要保存的变量不多,所以改成window.location.href不是特别麻烦。但是如果页面很复杂,需要保存的变量很多,那就很麻烦,暂时没找到很好的解决办法。

    记录一下,有好的解决方式再来更新

    展开全文
  • 一、window.history.pushState(data, title, targetURL); @状态对象:传给目标路由的信息,可为空 @页面标题:目前所有浏览器都不支持,填空字符串即可 @可选url:目标url,不会检查url是否存在,且不能跨域。如不...
  • 在控制台输入history.pushState({},’’,‘home’) home可以变成你想改变的URL参数
  • Group A: When what seems to be select users loads into the homepage and click a navigation anchor which should load with AJAX and use history.pushState('', '', destinationUrl); they receive no ...
  • pushstate与监听浏览器返回解决的问题1.实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候给人感觉是返回上上个页面,但之前A页面填写的东西...
  • 我在使用react跳转页面传参数时,报了上述错误,具体代码为 原因:saveData里面存在函数,我在传值的时候,参数里面有时间格式的数据 需要把时间格式的数据转换成字符串或其他形式,我转换成了YYYY-MM-DD的...
  • 当前位置:我的异常网» Ajax»使用ajax跟window.history.pushState无刷新改变页面使用ajax跟window.history.pushState无刷新改变页面内容和地址栏URLwww.myexceptions.net网友分享于:2015-08-26浏览:0次使用ajax和...
  • Ajax通过外部页面请求和history.pushState在一起让我们来看看这个问题。我们有做Ajax请求var http_request = false;function makeRequest(url,getvar,funzione) {http_request = false;if (window.XM...
  • 编者注:这个pushState()是一个HTML5的新接口,你可能在一些科技博客如36kr上看到过,ajax加载新的文章,并且改变网址却不需要刷新页面,本站也用到了这个,当你在首页往下拉时,加载分页内容,网址也随着改变,有利...
  • 需要阻止浏览器的后退按钮,移动端的后退... window.history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { window.history.pushState(null, null, document.URL); });
  • pushstate与监听浏览器返回解决的问题1.实际开发我们在A页面调用组件,在组件里面填好内容之后,发现想退出不想填了,因为组件与A页面此时在同一页面,点击返回时候 给人感觉是返回上上个页面,但之前A页面填写的...
  • pushState + Ajax 技术

    2021-08-07 10:44:44
    有时间我们要实现动态...window.history.replaceState 和 window.history.pushState 类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会...
  • 小编典典我所做的是将对象文字传递给pushState()页面加载。这样,您始终可以返回到第一个创建的pushState。就我而言,我不得不两次推后才可以返回。推动页面加载状态帮助了我。HTML5允许您使用数据属性,因此对于...
  • val=' + newVal } // 将相关值压入history栈中 window.history.pushState && window.history.pushState(state, state.title, state.url); }); } $('#ajax-test-btn').click(function() { increaseVal(parseInt($val....
  • 与传统的AJAX的区别 虽然ajax可以无刷新改变页面内容,但无法改变页面URL 有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变 history.pushState, history.replaceState pushState是将...
  • 介绍pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。并且展现方式支持动画技术,可以使用系统自带的动画方式,也...
  • 我想让浏览器的后退/前进按钮使用代码,所以我尝试使用history.pushState.我必须遵循一些代码:$('.ajax').on('click',function(e) {e.preventDefault();$this = $(this);$('#ajaxContent').fadeOut(fu...
  • 实现目标页面的跳转(前进后退,点击等)不重新请求页面页面URL与页面展现内容一致(符合人们对...如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。history.pushState(state, title, ur...
  • 2、替换当前历史记录点 window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史...
  • 想要监听路由变化就需要监听history的pushState和replaceState事件,但是原生并没有支持,此时,我们就得自己添加事件监听。 解决方法: 高阶函数封装自定义事件: const bindHistoryEvent = function(type) { ...
  • } 案例2、利用history.pushState实现 index.js: var currenturl = window.location.href; if(currenturl.indexOf('?')) { window.location.href = currenturl + '?home'; } else { var hreftype = window.location....
  • 在之前的文章《ajax无刷新加载页面,结合history.state修改url》中,我详细解释了history.pushState、history.replaceState、history.state以及window.popstate这四个关键元素,并试图建立一个合理的ajax无刷新更换...
  • | | / | | jgs |___\_.\_ `-"--'---' pjax = pushState + ajax pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working ...
  • 缓存 history.replaceState(state, title, url) replaceState方法与pushState大同小异,区别只在于pushState会将当前url添加到历史记录,以后再修改url,而replaceState只是修改url,不添加历史记录。服务器 window....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 138,633
精华内容 55,453
关键字:

pushstate