ajax浏览器后退 iframe,ajax后退解决方案
一、使用iframe,通过document.write产生历史
0
var info = document.getElementById('info');
var i = 1;
function add() {
info.innerHTML = i;
document.title = i;
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
点击按钮后更新页面DOM(模拟ajax提交),会发现浏览器后退按钮可用了。点击后退,可返回到前一个状态。
这种方式缺点是只支持IE和Firefox。
ajax后退解决方案(二)
二、使用iframe,通过修改iframe.src产生历史
0
var info = document.getElementById('info');
var i = 1;
function add() {
info.innerHTML = i;
document.title = i;
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
较上一篇多了个blank.html,是一个空html架子,没有JS逻辑代码,如下
blank.html
每次ajax操作会往iframe.src的问号后附加一个数字以记录历史。点击后退按钮,iframe的onload事件中获取iframe的url,根据问号后的数字去取记录。
所有浏览器均支持该方式。缺点是如果主页面中存在其它iframe,且修改了其src。历史管理会混乱。
三、使用iframe,通过修改iframe.src产生历史,回调写在iframe对应的html页面中
0
var info = document.getElementById('info');
var i = 1;
function add() {
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
与方案2相同也是使用iframe.src来产生历史,也需要一个单独的html页面(iframe)。不同的是回调逻辑不是写在iframe.onload中,而直接写在html页面中(上一篇则是空的html架子)。blank.html如下
blank.html
var url= location.href;
if(url.indexOf('?')>-1) {
var idx = url.substr(url.indexOf('?')+1);
parent.History.get(idx);
}
和方案2一样所有浏览器均支持。
四、通过修改location.hash产生历史,hashchange事件处理后退
0
var info = document.getElementById('info');
var i = 1;
function add() {
var data = {
param : i,
func : func
};
History.push(data);
i++;
}
History.push({param:0, func: func});
function func(i) {
info.innerHTML = i;
document.title = i;
}
每次ajax操作去改变location.hash的值,每次修改后地址栏均会有所体现。在window.onhashchange中监听该事件。通过hash的值取对应的历史。
较iframe的好处是可以复制地址栏的url直接进入该历史记录,缺点是IE6/7不支持。
文中代码打包下载
相关:
ajax浏览器后退 iframe,ajax后退解决方案相关推荐
- ajax 浏览器后退,全站Ajax浏览器后退方法
全站Ajax后退有两种方法,浏览器后退按钮加入历史链接.其中一种是常规的Ajax后退,这种后退是带有ajax效果的,要重新请求历史链接页面.另一种是将历史数据保存,后退时取出缓存的数据即可.后者比前者 ...
- 为什么浏览器会限制ajax并行请求数量,有办法突破限制吗
1.为什么浏览器会限制 ajax 并行请求数量? 答:浏览器发出网络请求需要新开线程,而且可以发出请求的端口数量有限,从开销角度考虑不可能无限发出并发请求:此外如果浏览器不作限制,大量的请求同时发至服 ...
- ajax跨域的几种解决方案
ajax跨域 AJAX跨域请求 GetJson实现跨域请求 CrossOrigin注解实现跨域 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基 ...
- popstate android4.3,微信安卓popstate后退导致页面刷新解决方案
问题描述: 在安卓机微信版本号为7.0.4到7.0.8下监听popstate事件时,当点击物理键返回时,浏览器会强制页面刷新,导致popstate中定义的一些事件因为刷新而受影响,比如出现弹窗闪退现象 ...
- jquery ajax return值不能取得的解决方案
大家先看一段简单的jquery ajax 返回值的js 代码 function getReturnAjax{ $.ajax({ type:"POST", url ...
- 如何用栈实现浏览器的前进和后退?
2019 年第 79 篇文章,总第 103 篇文章 数据结构与算法系列的第四篇文章,前三篇文章: 前言 浏览器的前进和后退功能怎么用栈来实现呢? 这里先介绍一下栈的定义和实现,并介绍它的一些常用的应用 ...
- selenium操作浏览器的前进和后退
前进关键字:driver.forward() 后退关键字:driver.back() 测试对象:1.https://www.baidu.com/ 2.https://www.sogou.com/ 实例 ...
- ajax跨浏览器初始化,使用Ajax的jQuery localStorage的跨浏览器
我已经这样做了阿贾克斯jQuery的功能,节省了在localStorage的滚动位置和正常工作的Chrome,但它并没有在其他Web浏览器上工作,我能做些什么,使工作在所有平台上?使用Ajax的jQu ...
- 《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.4 内容安排
本节书摘来异步社区<Web异步与实时交互--iframe AJAX WebSocket开发实战>一书中的第1章,第1.4节,作者: 赵振 , 王顺 , 于梦竹 , 李泽 , 侯法超 , 刘 ...
最新文章
- redis单机版安装
- Maven学习总结(2)——Maven项目构建过程练习
- 服务器被非法上传文件,DiscuzX没有合法的文件被上传的修复方法
- python教程实例-Python实例教程
- 中运用_胶水在木雕中的运用技巧
- 看看高手做的ARM开发板
- 【AI视野·今日Sound 声学论文速览 第三期】Wed, 20 Apr 2022
- 有了它,Python编码再也不为字符集问题而发愁了!
- 平台建设的根节与基础保障——互联网平台建设系列...
- eclips git中的add to Index无效解决
- 大众点评被合并至美团? 官方回应:不存在这种可能性
- Java Servlet 使用slf4j配置log4j
- Error: Cannot create file “D:xampp\xampp-controlin“.拒绝访问。
- java高级工程师简历模板,MySQL+Tomcat+JVM,看完还怕面试官
- UE4实时渲染需要注意的点——RTR(Real Time Rendering)
- SVN切换IP,不换路径,快捷方法
- 面试题:你印象最深刻的两个bug是什么,你是怎么解决的?
- 深度学习用于图像超分辨率重建综述——超分辨率(一)
- Pinia——Actions
- Web简易时间轴制作(超详细)
热门文章
- 中秋节祝福动态烟花网页,程序员的烂漫【附完整html代码】
- Python中闰年的计算方法
- linux centos 回收站,详解CentOS中使用rm命令将文件移到回收站的方法
- Database-Postgresql-Centos 7安装xl集群
- 语雀新表格——数据表
- 不使用加减乘除+-*/,实现减法运算
- 解决PresentationFontCache.exe占CPU过大详解
- 伦敦国家美术馆遭史上最大“洗劫”?“赃画”被尽数展出,场地比卢浮宫还大400倍
- 使用迭代器 遍历ArrayList,遍历 Map
- Kerberos 对话集