澳门新萄京浏览器根对象window之history,消除微信
分类:澳门新萄京最大平台

微信内置浏览器在再次回到上一页面,且上一页面包涵AJAX代码时,页面就能够被胁持刷新,非常影响用户体验。而大家想要的效用是:重临上一页面时,页面还栖息在原先的情景,AJAX获取到的数目还在,滚动条也在原位。

《消除微信内置浏览器再次来到上一页强制刷新难题方法》,浏览器再次来到强制刷新

微信内置浏览器在回去上一页面,且上一页面包蕴AJAX代码时,页面就能够被挟持刷新,非常影响用户体验。而我们想要的功效是:再次回到上一页面时,页面还停留在原来的情景,AJAX获取到的数目还在,滚动条也在原先的职责。

BINGO~

通过HTML5history API   缓存能够造成那点。

 

实行原理:

1.0、通过history APIhistory.pushStatehistory.replaceState 保存AJAX状态;

2.0、同临时间将AJAX获取到的数额缓存起来(能够思量接纳H5的localStoragesessionstorage);

3.0、当重返到那一个页面时,先拿走窗口的history.state,假若不为空,表示保留的有处境,大家要做的便是回复到那几个状态;

4.0、读取缓存数据并加载。若是涉嫌到分页,且是滚动加载的形式,须要将当前页设置为history.state中的页数。

 

动用本领点介绍:

history API:

HTML5 history API只包括2个方法:history.pushState()history.replaceState(),以及1个事件:window.onpopstate

①history.pushState()

它的完全部是 history.pushState(stateObject, title, url),包罗七个参数。

第1个参数是情状对象,它能够清楚为多少个拿来存款和储蓄自定义数据的因素。它和同期作为参数的url会提到在一齐。

第2个参数是标题,是一个字符串,前段时间各个浏览器都会忽视它(将来才有望启用,用作页面标题),所以设置成什么都没什么。前段时间提议安装为空字符串。

第3个参数是UOdysseyL地址,一般会是简约的?page=2那样的参数风格的相对路线,它会自行以方今UPAJEROL为条件。必要留意的是,本参数URubiconL须要和当下页面U奥迪Q7L同源,否则会抛出荒唐。

调用pushState()主意将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”不过拾壹分常用的开关)。其它,从ULacrosseL的同源计策能够见到,HTML5 history API的注重点是很明朗的,正是让无跳转的单站点也足以将它的相继状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时,站点能够一向加载到对应的意况。

 

②history.replaceState()

它和history.pushState()艺术基本一样,分歧唯有一点,history.replaceState()不会新生成历史记录,而是将日前历史记录替换掉。

 

③window.onpopstate

push的冲突就是pop,能够猜到那个事件是在浏览器抽出历史记录并加载时接触的。但实则,它的原则是比较苛刻的,差异常少唯有一点击浏览器的“前进”、“后退”这么些导航按键,恐怕是由JavaScript调用的history.back()等导航方法,且切换前后的两条历史记录都属于同一个网页文书档案,才会触发本领件。

 

地点的“同一个网页文书档案”请知情为JavaScript景况的document是同二个,而不是指基础U昂科威L(去掉种种参数的)一样。也便是说,只要有再度加载爆发(无论是跳转到贰个新站点还是接二连三在本站点),JavaScript全局碰到产生了变动,popstate事件都不会触发。

 

popstate事件是布置出来和眼下的2个方式搭配使用的。一般唯有在经过前边2个法子设置了同一站点的多条历史记录,并在当中间导航(前进或向下)时,才会触发这么些事件。同期,前面2个点子所设置的景况对象(第1个参数),也会在那年经过事件的event.state返还回到。

 

详尽的代码示例能够点击这里查看(传送门)

 

微信内置浏览器在再次来到上一页面,且上一页面包罗AJAX代码时...

微信内置浏览器在回来上一页面,且上一页面包罗AJAX代码时,页面就能被强制刷新,特别影响用户体验。而小编辈想要的机能是:再次来到上一页面时,页面还停留在本来的事态,AJAX获取到的多寡还在,滚动条也在原来的岗位。

微信内置浏览器在回到上一页面,且上一页面包涵AJAX代码时,页面就能够被强制刷新,非常影响用户体验。而小编辈想要的效果是:再次回到上一页面时,页面还停留在原来的处境,AJAX获取到的数目还在,滚动条也在原先的职位。

1. history(H5)

Window.history保存用户在四个会话期间的网址访问记录,用户每便访问一个新的ULacrosseL即开立一个新的历史记录。

BINGO~

BINGO~

BINGO~

1.1 length

回来浏览器历史列表中的 ULANDL 数量。

通过HTML5history API 缓存可以变成那点。

通过HTML5history API   缓存能够完毕那点。

通过HTML5history API   缓存能够产生那一点。

1.2 scrollRestoration[H5]

脚下(2018.01)那是一个实验性的API,请勿在生育境况中动用它。

History API:ScrollRestoration

澳门新萄京浏览器根对象window之history,消除微信内置浏览器再次来到上一页强制刷新难点方法。同意Web应用程序在历史导航上显式地安装暗中认可滚动苏醒行为。此属性能够是机关的(auto)只怕手动的(manual)。

进行原理:

 

 

1.3 state

该参数与pushState和replaceState同盟使用,它始终代表近年来页面(使用pushState或replaceState成立的)的state状态值。

1.0、通过history API的 history.pushState或 history.replaceState 保存AJAX状态;

奉行原理:

进行原理:

1.4 go/back/forward

history.back()和history.forward()分别表示向后一页和前进一页。

history.go(num)表示向前或向后翻多少页,num为正数表示向前翻,为负数则向后翻。

history.back()等价于history.go(-1),history.forward()等价于history.go(1)。

推行这五当中的任一方法,触发浏览器的popstate事件,假使只是hash部分产生变化,还也许还要触发hashchange事件。

2.0、同一时候将AJAX获取到的数码缓存起来(能够设想动用H5的localStorage或sessionstorage);

1.0、通过history APIhistory.pushStatehistory.replaceState 保存AJAX状态;

1.0、通过history APIhistory.pushStatehistory.replaceState 保存AJAX状态;

1.5 pushState/replaceState[H5]

HTML5新扩充的七个API。

history.pushState(state, title, url)

意思便是把贰个history记录插入到历史记录中。state:与要跳转到的U奥迪Q3L对应的情事音信。title:页面题目。url:要跳转到的USportageL地址,不可能跨域。

history.replaceState(state, title, url)

用新的state和U陆风X8L替换当前。不会形成页面刷新。state:与要跳转到的U悍马H2L对应的动静消息。title:页面标题。url:要跳转到的U途乐L地址,无法跨域。

与之城门失火的轩然大波window.onpopstate。详参22.1 见下方。

3.0、当重返到这一个页面时,先得到窗口的history.state,假若不为空,表示保留的有景况,我们要做的正是过来到这几个状态;

2.0、同一时候将AJAX获取到的数额缓存起来(可以思量采纳H5的localStoragesessionstorage);

2.0、同有时间将AJAX获取到的数量缓存起来(能够设想动用H5的localStoragesessionstorage);

参数详解

state: 状态对象是二个由 pushState()方法创造的、与历史纪录相关的JS对象。当用户定向到二个新的景色时,会触发popstate事件。事件的state属性包罗了历史纪录的state对象。(译者注:一言以蔽之,它存款和储蓄JSON字符串,能够用在popstate事件中。)state 对象足以是别的能够类别化的事物。由于 火狐 会将这么些指标存款和储蓄在用户的磁盘上,所以用户在重启浏览器之后那么些state对象会恢复生机,大家施加四个最大640k 的字符串在state对象的类别化表示上。假若您像pushState() 方法传递了贰个体系化表示大于640k 的state对象,那一个点子将扔出四个不胜。假让你要求越来越多的长空,推荐应用sessionStorage只怕localStorage。

title:火狐浏览器未来早就忽略此参数,以往恐怕也许被使用。思索到以后有希望的改变,传递两个空字符串是平安的做法。当然,你能够传递贰个短标题给您要调换成的情况。(译者注:未来多数浏览器不帮忙依旧忽视那些参数,最棒用null代替)。

USportageL:那几个参数提供了新历史纪录的地点。请留心,浏览器在调用pushState()方法后不会去加载那一个U猎豹CS6L,但有希望在现在会这么做,举个例子用户重启浏览器之后。新的U汉兰达L不料定固然纯属地址,假使它是争持的,它自然是绝对于近期的U途达L。新U翼虎L必须和当前UEscortL在同三个源下;不然,pushState() 将丢出十三分。那几个参数可选,假诺它并没有被特地标注,会棉被服装置为文档的脚下U宝马X3L。

4.0、读取缓存数据并加载。即使涉嫌到分页,且是滚动加载的花样,供给将当前页设置为history.state中的页数。

3.0、当重返到那个页面时,先拿走窗口的history.state,若是不为空,表示保留的有气象,我们要做的正是复苏到那些意况;

3.0、当再次来到到这几个页面时,先获得窗口的history.state,若是不为空,表示保留的有气象,大家要做的正是恢复生机到这么些境况;

优势

一些气象下,调用pushState和设置 window.location = "#foo"万分,这种场合下,那三种行为都会创建和激活另二个和前段时间页面有关的历史纪录。然则pushState()有此外优势:

新U奥德赛L能够是日前U普拉多L同源下的人身自由地址。相反的,设置window.location会令你保持在因循守旧页面,除非您只修改hash.

如若不须求,你能够不改造U奥迪Q5L,相反的,将window.location设定为“#foo”;只会创设一个新的历史纪录,假使当前hash不为#foo.

You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.你能够提到任性的数额到你的新历史纪录中。使用基于hash的办法,你需求将享有相关 的数据编码为一个短字符串。

行使工夫点介绍:

4.0、读取缓存数据并加载。假设涉及到分页,且是滚动加载的花样,必要将当前页设置为history.state中的页数。

4.0、读取缓存数据并加载。若是波及到分页,且是滚动加载的花样,供给将当前页设置为history.state中的页数。

注意

请留心pushState()和replaceState()方法绝不会导致hashchange 事件被激活,尽管新的U卡宴L和旧的只在hash上有差异。

 

澳门新萄京浏览器根对象window之history,消除微信内置浏览器再次来到上一页强制刷新难点方法。history API:

 

 

1.6 onpopstate[H5]

当活动历史记录条款改换时,将触发popstate事件。若是被激活的历史记录条目款项是经过对history.pushState() 的调用创建的,恐怕受到对history.replaceState() 的调用的影响,popstate事件的state属性包涵历史条约标动静对象的别本。详参6.5 见上方。

亟需留意的是调用history.pushState()或history.replaceState()不会触发popstate事件。唯有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退开关(恐怕在Javascript代码中调用history.back())

不等的浏览器在加载页面时管理popstate事件的款型存在出入。页面加载时Chrome和Safari经常会接触(emit )popstate事件,但Firefox则不会。

有包容性难点:浏览器包容性。

window.onpopstate = function(event) {
  alert("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(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

急需留意的是,使用history.pushState和history.replaceState五个API改换的浏览器历史记录才干触发该事件(通过location.hash更动UEnclaveL也会触发该事件),别的的不二秘籍举个例子点击开关举办的页面导航,不会触发该事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"></head>
<body>
<script>
    window.onpopstate = function(event) {
        alert('ok');
    };
    function changeURL (){
        location.search = '?page=1';
    }
    function changeState (){
        history.pushState('nDos','title','?nDos=1')
    }
</script>
<button value="点击导航到下一个页面" onclick = 'changeURL()'>点击导航到下一个页面</button>
<button value="点击添加状态" onclick = 'changeState()'>点击添加状态</button>
</body>
</html>

上述代码运行后,点击浏览器回退开关,只有首先次回退触发了onpopstate事件。将上述location.search = '?page=1';改为location.hash = '#page';点击按键霎时就能够触发onpopstate事件。

HTML5 history API只包括2个方法:history.pushState()history.replaceState(),以及1个事件:window.onpopstate

采纳工夫点介绍:

应用本事点介绍:

①history.pushState()

history API:

history API:

澳门新萄京,它的完全部是 history.pushState(stateObject, title, url),包涵三个参数。

HTML5 history API只包括2个方法:history.pushState()history.replaceState(),以及1个事件:window.onpopstate

HTML5 history API只包括2个方法:history.pushState()history.replaceState(),以及1个事件:window.onpopstate

第1个参数是处境对象,它能够知晓为多少个拿来囤积自定义数据的要素。它和同期作为参数的url会涉嫌在一同。

①history.pushState()

①history.pushState()

第2个参数是标题,是一个字符串,最近各式浏览器都会忽略它(以后才有十分大或然启用,用作页面标题),所以设置成什么都无妨。前段时间建议安装为空字符串。

它的完全部是 history.pushState(stateObject, title, url),包罗三个参数。

它的完全部是 history.pushState(stateObject, title, url),包括多个参数。

第3个参数是U奥德赛L地址,一般会是归纳的?page=2那样的参数风格的相对路线,它会活动以最近UXC90L为尺度。供给专注的是,本参数U卡宴L须要和脚下页面UENVISIONL同源,否则会抛出错误。

第1个参数是场面前遇到象,它能够知晓为三个拿来存款和储蓄自定义数据的因素。它和同一时候作为参数的url会涉嫌在协同。

第1个参数是气象对象,它能够驾驭为三个拿来存款和储蓄自定义数据的因素。它和同一时候作为参数的url会涉及在同步。

调用pushState()方法将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”不过一定常用的开关)。其余,从UEscortL的同源战略能够看出,HTML5 history API的落脚点是很猛烈的,正是让无跳转的单站点也能够将它的依次状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时,站点能够直接加载到相应的状态。

第2个参数是标题,是一个字符串,最近种种浏览器都会忽视它(未来才有希望启用,用作页面题目),所以设置成什么都没什么。最近建议设置为空字符串。

第2个参数是标题,是八个字符串,近来各式浏览器都会忽视它(未来才有希望启用,用作页面标题),所以设置成什么都无妨。近来提出安装为空字符串。

②history.replaceState()

第3个参数是U瑞虎L地址,一般会是简轻巧单的?page=2那样的参数风格的相对路线,它会自动以前段时间UGL450L为规范。供给注意的是,本参数U福特ExplorerL需求和当下页面UENCOREL同源,不然会抛出荒谬。

第3个参数是UWranglerL地址,一般会是简约的?page=2那样的参数风格的相对路线,它会自行以最近U福特ExplorerL为标准。必要留意的是,本参数U卡宴L需求和日前页面U福睿斯L同源,不然会抛出荒唐。

它和history.pushState()办法基本同样,分裂唯有少数,history.replaceState()不会新生成历史记录,而是将近年来历史记录替换掉。

调用pushState()办法将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”可是一定常用的按键)。别的,从U奥德赛L的同源战略能够看出,HTML5 history API的视角是很刚强的,便是让无跳转的单站点也得以将它的一一状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时,站点能够直接加载到相应的情事。

调用pushState()格局将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”但是一定常用的开关)。别的,从U奔驰G级L的同源计谋能够看到,HTML5 history API的角度是很明显的,就是让无跳转的单站点也足以将它的逐个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时,站点能够直接加载到相应的事态。

③window.onpopstate

 

 

push的争持便是pop,能够猜到那一个事件是在浏览器抽取历史记录并加载时接触的。但实际上,它的口径是比较苛刻的,差非常的少只有一些击浏览器的“前进”、“后退”那个导航按钮,也许是由JavaScript调用的history.back()等导航方法,且切换前后的两条历史记录都属于同一个网页文书档案,才会触发工夫件。

②history.replaceState()

②history.replaceState()

上边的“同贰个网页文书档案”请知情为JavaScript情状的document是同二个,而不是指基础U陆风X8L(去掉种种参数的)一样。也正是说,只要有双重加载爆发(无论是跳转到一个新站点照旧继续在本站点),JavaScript全局情形产生了转移,popstate事件都不会接触。

它和history.pushState()主意基本一样,差别唯有好几,history.replaceState()不会新生成历史记录,而是将如今历史记录替换掉。

它和history.pushState()办法基本同样,不相同只有好几,history.replaceState()不会新生成历史记录,而是将日前历史记录替换掉。

popstate事件是安排出来和前面包车型地铁2个法子搭配使用的。一般唯有在经过前面2个点子设置了同一站点的多条历史记录,并在其时期导航(前进或向下)时,才会触发那些事件。同期,前面2个章程所设置的场所对象(第1个参数),也会在这一年经过事件的event.state返还回来。

 

 

以上正是本文的全体内容,希望本文的故事情节对大家的就学恐怕干活能推动一定的鼎力相助,同临时间也可望多多支持脚本之家!

③window.onpopstate

③window.onpopstate

您也许感兴趣的篇章:

  • ios微信浏览器再次来到不刷新难点周全消除方法
  • iOS微信浏览器回退不刷新实例(监听浏览器回退事件)
  • 竭泽而渔ios微信页面回退不刷新的主题材料
  • 微信小程系列表的上拉加载和下拉刷新的兑现
  • 微信小程序 scroll-view达成上拉加载与下拉刷新的实例
  • 微信小程序 详解下拉加载与上拉刷新实现情势
  • 微信小程序(六):列表上拉加载下拉刷新示例
  • 详解微信小程序支付之下拉刷新 上拉加载
  • 微信web端后退强制刷新功用的落到实处代码

push的周旋正是pop,可以猜到那一个事件是在浏览器抽出历史记录并加载时接触的。但实则,它的标准是相比苛刻的,大约唯有一点点击浏览器的“前进”、“后退”这个导航开关,只怕是由JavaScript调用的history.back()等导航方法,且切换前后的两条历史记录都属于同三个网页文书档案,才会触发技术件。

push的相对便是pop,能够猜到那么些事件是在浏览器抽出历史记录并加载时接触的。但骨子里,它的规范是相比较苛刻的,大致唯有一些击浏览器的“前进”、“后退”这么些导航开关,恐怕是由JavaScript调用的history.back()等导航方法,且切换前后的两条历史记录都属于同四个网页文书档案,才会触发本领件。

 

 

地方的“同八个网页文书档案”请明白为JavaScript情况的document是同三个,而不是指基础U奇骏L(去掉各种参数的)一样。也等于说,只要有再度加载爆发(无论是跳转到多少个新站点仍旧一连在本站点),JavaScript全局情况发生了扭转,popstate事件都不会接触。

上边的“同一个网页文书档案”请精通为JavaScript景况的document是同贰个,而不是指基础U科雷傲L(去掉各种参数的)一样。也正是说,只要有双重加载发生(无论是跳转到八个新站点依旧延续在本站点),JavaScript全局境况发生了改换,popstate事件都不会接触。

 

 

popstate事件是布置性出来和前边的2个法子搭配使用的。一般唯有在通过前面2个点子设置了同一站点的多条历史记录,并在其期间导航(前进或倒退)时,才会接触那个事件。同不时候,前边2个章程所设置的动静对象(第1个参数),也会在那年经过事件的event.state返还再次来到。

popstate事件是统一打算出来和前边的2个措施搭配使用的。一般只有在通过后面2个艺术设置了同一站点的多条历史记录,并在其里面导航(前进或倒退)时,才会接触那个事件。同偶然间,前边2个法子所设置的场面临象(第1个参数),也会在这一年经过事件的event.state返还回来。

 

 

本文由澳门新萄京发布于澳门新萄京最大平台,转载请注明出处:澳门新萄京浏览器根对象window之history,消除微信

上一篇:数据类型,JavaScript字符串的周全搜罗 下一篇:没有了
猜你喜欢
热门排行
精彩图文