-
后退刷新
2018-11-01 09:28:47<a href="javascript:history.go(-1);location.replace(document.referrer);" class="fanhui"><a href="javascript:history.go(-1);location.replace(document.referrer);" class="fanhui">
-
7.3 浏览器前进后退刷新
2021-02-28 19:01:337.3 浏览器前进后退刷新 -
js页面后退刷新前进
2014-03-20 16:55:29js页面后退刷新前进 -
replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新...
2021-01-14 03:52:19这篇文章主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下使用Ajax可以异步获取数据,可以更高效地渲染页面。...这篇文章主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
使用Ajax可以异步获取数据,可以更高效地渲染页面。
但也存在这一些问题:
再刷新页面,页面就会变成初始的状态
浏览器的前进后退功能无效
对搜索引擎的爬虫抓取不友好
1、
早前会使用浏览器的 hash锚点 来解决
不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的问题
再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度
2、
随后出现一种 hashbang 的技术,即在url后加上标记 #!/myPath 来解决上述的问题
通过一个路径定义一个页面部分,在单页面应用中可常见到(Angular中已经封装了)。但好像只有google真正支持了对该路径的爬取
3、
HTML5的新特性做了助力,通过pushState、replaceState 这两个新的history方法和 onpopstate 这个window事件,解决了上述三个问题
当然,也因为是HTML5的新特性,在旧版本浏览器上支持度不好的,建议是再用hashbang的方法来兼容
本文主要讲讲pushState这几个新东西
文字太枯燥了,先看看图示直接点感受
这个栗子目的是:初始值为0,通过异步请求自增值,可以前进或后退以及刷新,新打开一个url后也能获取相应的数据history.pushState(state, title, url)
history.replaceState(state, title, url)
其中state是个json对象,可以自定义存放一些数据,title即是这个url对应的标签title(不过好像浏览器都忽略了这个参数)
url是某个页面的标记url(操作只会改变地址栏的url,并不会立马加载这个url,可以简单的标记 ?w=a、ajaxPage.html/w=a、&w=a,只是一种标记,取值时对照着来就行)
replaceState和pushState的不同是:前者直接替换当前值,后者就是向栈中压入一个值
window.onpopstate 事件触发之后,可以通过 history.state获取到上述方法的第一个json对象
实现部分
HTML
value: 0
JSvar $val = $('#ajax-test-val'),
// 获取当前页面的标记
m = window.location.search.match(/\?val=(\d+)/);
// 新进入页面,通过url中的标记初始化数据
if (m) {
increaseVal(m[1] - 1);
}
// 请求
function increaseVal(val) {
$.post('ajax-test.php', {
val: val
}, function(newVal) {
$val.text(newVal);
// 存储相关值至对象中
var state = {
val: newVal,
title: 'title-' + newVal,
url: '?val=' + newVal
}
// 将相关值压入history栈中
window.history.pushState && window.history.pushState(state, state.title, state.url);
});
}
$('#ajax-test-btn').click(function() {
increaseVal(parseInt($val.text(), 10));
});
// 浏览器的前进后退,触发popstate事件
window.onpopstate = function() {
var state = window.history.state;
console.log(state)
// 直接将值取出,或再次发个ajax请求
$val.text(state.val);
window.history.replaceState && window.history.replaceState(state, state.title, state.url);
};
PHP<?php
$val = $_REQUEST['val'];
echo $val + 1;
?>
这里通过?val=num 的方式,标记了不同的ajax结果页
Tips:
使用pushState之后,当前进后退触发了popstate事件,获取到相应的json对象
json对象的数据可自定义
可简单地存储相关标记再发个请求,或者直接将该标记页对应的结果直接存起来
随着后退操作,地址栏url得到了更新,异步的数据也得到了更新
刷新页面或新打开页面,就要根据url中的标记去请求数据了
要记住的是,浏览器并不会自动加载url这部分标记对应的这个异步内容页,需要我们去获取
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
-
pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
2020-10-21 03:43:41主要介绍了pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新的相关资料,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 -
页面后退刷新、无刷新
2017-09-19 15:11:12页面后退强制刷新情境一:
如下所示功能说明:进入页面默认是选中100元的购买1个礼包的按钮,用户可以选择上面提供的购买金额按钮,也可以自定义购买金额,需支付随着输入框或用户选择的支付金额变化而变化的,主要以输入框内容为主,输入框为空时取上面选中的金额,存在情况:本页面默认是选中100元购买1个礼包,需支付金额此时默认为100元,但当用户输入金额后,上面无选中状态且需支付金额为输入框内的输入金额,这是如点击支付按钮去支付后,用户不想支付了或想重新设置金额即又回退到了该页面,此时上面提供的可选按钮中又恢复了默认的100元的选中状态且需支付金额也是默认的100元,但是输入框内确是缓存的用户输入的金额,这种情况与原业务流程不一致,且需支付金额也不对,虽然在点击支付的时候可以处理回来,但是用户不点击支付这种效果是有问题的。(测试过:andriod手机这样,IOS正常)
解决方案:回退刷新
1.HTML头部,禁止缓存:
<meta http-equiv="Expires" CONTENT="0"> <meta http-equiv="Cache-Control" CONTENT="no-cache"> <meta http-equiv="Pragma" CONTENT="no-cache">
注:(手机端)此方法行不通,因为有些浏览器会忽略这个头部,测试过。
2.强行刷新界面
if(window.name != "bencalie"){ location.reload(); window.name = "bencalie"; }else{ window.name = ""; }
window.οnlοad=function(){
if(window.name!="hasLoad"){
location.reload();
window.name="hasLoad";
}
else{
window.name="";
}
}
ps:可能有延时,因为页面会先解析其他内容(针对以上情景可以不强制页面刷新,直接在页面加载的时候进行一写代码的处理即可,如上面情况可在页面加载的时候检查输入框有没有内容,若有则直接将上面选中的默认100去掉选中,并将需支付金额改为输入框内的金额)
window.οnlοad=function(){
var user_input = +$("#user_input_money").val();
if(user_input > 0)
{
$(".active").removeClass("active");
$(".need-money").text(user_input);
}
}3.php处理:
header("Cache-Control:no-store,no-cache,must-revalidate"); header("Cache-Control:post-check=0,pre-check=0",false); header("Pragma:no-cache");
情景2:
保留页面跳转之前的状态:https://www.zhihu.com/question/29403931
页面有很多标题列表,点开对应标题会展开相应的内容,默认是展开第一个,但是若用户点开了除了默认之外的其他的,有点击查看文章详情,则会跳转到我文章详情页,用户浏览网回退希望页面上展开的还是之前查看的那篇
解决:页面回退无刷新history:history.pushState方法、popstate事件以及hashchange
history.state
当前URL下对应的状态信息。如果当前URL不是通过pushState或者replaceState产生的,那么history.state是null。
history.pushState(state, title, url)
将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。
state:与要跳转到的URL对应的状态信息。 title:页面的题目,假如没有就穿空字符串就可以。 url:要跳转到的URL地址,不能跨域。
history.replaceState
用新的state和URL替换当前。不会造成页面刷新。
state:与要跳转到的URL对应的状态信息。 title:页面的题目,假如没有就穿空字符串就可以。 url:要跳转到的URL地址,不能跨域。
window.onpopstate
history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。通过event.state也可以获取history.state。
http://www.haorooms.com/post/ajax_historybackprevhttps://liushaozhen.github.io/2017/07/03/js%20%E7%9B%91%E5%90%AC%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8E%E9%80%80%E4%BA%8B%E4%BB%B6/
小问题
当我们每次点击,都会存一个pushState,当我们列表返回的时候,我们期望的效果是列表的上一次记录。那么我们用:
window.history.replaceState({"html": datahtml, pageTitle: titlehtml, id: id}, "", lurl);
每次都对历史进行替换,而不是创建。就可以实现我们想要的效果!
浏览器实现了
onbeforeunload
和onunload
事件,onbeforeonload
事件是在浏览器即将请求下一个页面(请求还未发出)的时候触发,它可以实现阻止onunload
的触发。onunload
事件则是浏览器已经将下一个页面请求回来,页面即将跳转的时候触发,该事件无法中断。看起来onbeforeunload
事件似乎能满足我们的需求,但是,这只是一个假象。onbeforeunload
事件虽然能阻止onunload
事件的触发,但是由于它是浏览器内置的事件,其出现的交互方式和UI界面,均由浏览器厂商控制,并未提供给开发者定义浮层内部内容更多交互的接口,甚至文本性质的提示内容也无法设置样式。所以,想要通过onbeforeunload
事件提供的浮层实现收集用户离开的原因或让用户给应用打分的功能并不现实。在进入主题之前,我们先来罗列几个小知识点:
- 浏览器离开一个页面,意味着链接地址(不含hashchange、pushState方式)发生变化
history.pushState
可以改变地址栏链接地址,但不触发页面刷新(不离开)- hash变化会触发
popstate
事件和hashchange
事件 popstate
事件对象可以获得pushState传递进去的state属性,从而得到变化后的链接地址等hashchange
事件对象中包含变化前后的链接地址(oldURL和newURL)- 浏览器的“前进”、“后退”可以触发
hashchange
事件
-
Ionic后退刷新
2020-08-21 14:52:27一 禁用缓存,全页面刷新。 每次前进/ 后退时,控制器都会执行。 1 AngularJSui-router路由禁用缓存 var app = angular.module('myApp',['ionic']); app.config(function($stateProvider,$urlRouterProvider){ $...版本:Angular 1.5.3、Ionic1.3.2
一 禁用缓存,全页面刷新。
每次前进/ 后退时,控制器都会执行。
1 AngularJS ui-router路由禁用缓存
var app = angular.module('myApp',['ionic']); app.config(function($stateProvider,$urlRouterProvider){ $stateProvider .state('index',{ url:'/index', cache : false, templateUrl:'template/index.html', controller:'indexCtrl' }) $urlRouterProvider.otherwise('/index'); });
2 Ionic view禁用缓存
<ion-view title="index" cache-view="false"> <ion-content> ... </ion-content> </ion-view>
3 Ionic 全局禁用缓存
var app = angular.module('myApp',['ionic']); app.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){ $ionicConfigProvider.views.maxCache(0); });
二 局部刷新
前进到页面,控制器执行;后退到页面,控制器不执行。
(function(angular){ angular.module('myApp') .controller('indexCtrl',function($scope){ $scope.$on('$ionicView.beforeEnter',function(event,view){ $scope.refreshData(); // 自定义刷新方法 }); }); })(angular);
-
replacestate 后退刷新_关于如何禁止浏览器后退及刷新功能
2021-01-30 07:19:53最近做项目的过程中遇到这样一个需求:考试过程中,系统会禁止用户后退或刷新页面那我们如何解决这个问题呢?我上网搜索了一些解决方法,下面这种方法是我亲测可以实现且比较方便的禁用浏览器回退history.pushState(null... -
selenium浏览器操作-前进 后退 刷新 关闭
2020-02-06 16:34:06操作窗口大小设置页面前进后退刷新关闭 窗口大小设置 设置浏览器宽、高 driver.set_window_size(宽,高) 浏览器窗口最大化 driver.maximize_window() from selenium import webdriver import time #打开谷歌 driver... -
Android WebView加载网页,实现前进 后退 刷新 超链接
2018-11-15 14:36:55Android WebView加载网页,实现前进 后退 刷新 超链接 -
浏览器后退刷新
2017-05-23 19:12:36浏览器自带后退按钮进行返回操作,浏览器返回操作默认读取缓存内容,而我们的需求是重新刷新页面,从服务器重新获取数据。一般使用了ajax进行异步刷新时会碰到这样的问题。 各种语境下解决方法 HTML解决方式 ... -
解决UIWebView 前进、后退刷新的坑
2015-12-03 23:59:46分析对照UCWeb,通过设置 pagecachesize 解决UIWebView 前进、后退刷新页面的问题。 -
H5 页面显示隐藏事件 可用于后退刷新
2019-09-24 09:05:51后退刷新(页面显示事件) onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。 window.... -
replacestate 后退刷新_pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新 渔人码头...
2021-01-14 03:52:18但也存在这一些问题:再刷新页面,页面就会变成初始的状态浏览器的前进后退功能无效对搜索引擎的爬虫抓取不友好1、早前会使用浏览器的hash锚点来解决不同的hash标记着页面不同的部分,能修正页面刷新数据不正确的... -
js 前进 后退 刷新
2020-11-03 17:48:10前进 <input type=button value=前进 οnclick="window.history.go(1)"> <input type=button value=前进 οnclick="window.history.forward()">...input type=button value=后退 οnclick="window -
HTML5中History.back()页面后退刷新页面
2020-05-29 09:25:39HTML5中History.back()页面后退刷新页面 在开发中经常会遇到在一个页面操作完返回上一个页面,此时要求上个页面展示最新数据的需求。 比如 A1为上一个页面,A2为当前页面 1.A1需要加监听历史记录点 window.... -
Js后退刷新
2017-07-28 18:12:00$(function () { a= get('refresh'); if(a===null || a===''){ set('refresh','refresh') } if(a==='refresh'){ localStorage.clear(); location.reload() ...function set(Key,val) { return localStora... -
HBuilder webapp创建带有前进后退刷新的内置浏览器
2019-02-14 22:34:31创建带有前进后退刷新的内置浏览器 在webapp中打开普通的打开一个网页是没有工具栏的 //普通的打开网页 mui.openWindow({ id: 'QINDON.html', url: 'jian/QINDON.html', styles: { popGesture: "none&... -
Android WebView进阶 前进后退刷新
2019-03-27 10:24:53刷新方法可以直接再下拉刷新或者上拉刷新里调用,也可以再进入页面的时候调用 点击返回键 返回webview上一页 // 点击后退按钮,让WebView后退一页(也可以覆写Activity的onKeyDown方法) webview.setOnKeyLi... -
浏览器后退刷新页面
2019-09-30 11:52:01项目中未读消息列表,点击读取再返回后,仍然显示未读。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload() } }; onpageshow 事件在用户浏览网页时...onpages... -
replacestate 后退刷新_异步刷新页面的前进与后退的实现pushState replaceState
2021-01-30 07:19:53实现目标页面的跳转(前进后退,点击等)不重新请求页面页面URL与页面展现内容一致(符合人们对传统网页的认识)在不支持的浏览器下降级成传统网页的方式使用到的APIhistory.state当前URL下对应的状态信息。如果当前URL... -
微信小程序后退刷新
2020-10-27 10:42:20在退到的页面内 /** * 生命周期函数--监听页面显示 */ onShow: function () { this.onLoad(); },