曾经踩过的坑--浏览器兼容-history

1、history

1.1、页面布局:

典型的上中(左右)下布局。主要用的 是frameset和frame。

 1 <frameset name="total" col="10%,80%,10%">
 2
 3 <frame name="top" src="top.html"/>
 4
 5 <frameset name="content"  >
 6
 7 <frame name="left" src="left.html"/>
 8
 9 <frame name="right" src="right.html"/>
10
11 </frameset>
12
13 </frameset>

1.2、坑的表现(ie浏览器):

IE中点击左边栏选项,右边的content页面相应改变。在content中点击超链接改变content的src,通过history.back()返回上一个content的界面失败(IE浏览器下)。

操作流程:

点击左边栏选项1,则content变为c1页面。然后点击选项2,则对应c2页面。

此时在c2中放置超链接,改变name="right"的frame页面内容,c2变为了c3.但是点击浏览器的返回箭头 -->,返回的是c1界面而非c2.同理,在c3界面上放置了一个返回button。button添加click事件:history.back().此时点击返回按钮时也会返回到错误的c1界面。

1.3、对坑的猜想

history不同浏览器对其记录产生认定方式不同。

我猜IE浏览器对这个frame中通过超链接改变frame内容的方式不予记录,相当于history当前没有c2跳到c3的记录,认为当前处于c2状态。因而导致了history.back时跳转到了c1.

查找资料所得:http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/ 这个是一个例子,也是ie89下的history异常导致的问题。https://github.com/cowboy/jquery-hashchange/issues/17  这个上面有同样遇到这个问题的,只是暂时没找到解决方法。

真正的原因:http://msdn.microsoft.com/en-us/library/cc288209%28v=vs.85%29.aspx 。在iframes或者frame里面,不会触发修改location.hash.因此没记录到history中(bingo ,猜对了~~~)。

后续完善~~

时间: 2024-11-03 22:24:09

曾经踩过的坑--浏览器兼容-history的相关文章

浏览器兼容问题踩坑收集

1.vue开发的网站在搜狗浏览器下预览,报错:Uncaught ReferenceError: __WEBPACK_AMD_DEFINE_ARRAY__ is not defined 建议解决方案:将jquery的版本降下到2.x  , npm install [email protected]^2.2.4 --save 2.vue开发的网站在IE9.0浏览器下预览,报错:对象不支持"setLogLevel"属性或方法       建议解决方案:(先空) 3.Vue开发的网站在IE11

&quot;开发路上踩过的坑要一个个填起来————持续更新&#183;&#183;&#183;&#183;&#183;&#183;(7月30日)&quot;

欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢迎指出! 欢迎交流! 3.scss和css的区别 在使用github pages的jekylltheme时,发现有一个scss文件,略感好奇.查了一下,scss文件是css预处理器所产生的中间文件,可通过编译产生css文件.简单说起来就是,程序员觉得CSS只能一行一行的手动添加实在是太麻烦.于是大家

游戏服务器数据库踩过的坑

在页游服务器这块很早之前一直没有认真考虑过,大部分是之前搭建好的,我只需要按照他原来的设计继续码代码就好了. 可是这次服务器重构的过程中,还是遇到了很多始料不及的问题.那么就按照踩过的坑,去一个个讲讲分析分析. 1:起初mysql的方案  起初的设计方案是这样,用一个RolePlayer 去做玩家数据的缓存,所有玩家的数据更新到RolePlayer中,定时十秒中更新到数据库.RolePlayer大概是这样一个设计 class RolePlayer { public int roleId; pub

总结开发过程踩到的坑(三)

在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的.在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远.学会时常总结,不断提升自己. 本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自己对于该部分的理解,另一方面希望能够分享给大家,知识在于分享,当然踩过的坑也不例外(滑稽). 目录 input 上传同一文件问题 let 的一些用法 限制小数正则 DOM 操作的方法 根据对象字段排序 代码规范 1. input 上传同一文件问题 这是一个常在

总结开发过程踩到的坑(一)

在日常工作中,时常会碰到各种各样的坑,有时真的觉得很多时候开发的经验都是踩坑踩出来的.在通往大牛的道路上,希望自己能够跨越重重阻碍,越走越远.学会时常总结,不断提升自己. 本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑,一方面加深自己对于该部分的理解,另一方面希望能够分享给大家,知识在于分享,当然踩过的坑也不例外(滑稽). 目录 margin 重叠问题 placeholder 自定义样式 伪类和伪元素 title 超出省略 scroll 自定义样式 sticky 定位 配置 swiper

2019爬虫项目总结——我在项目中踩的那些坑

2019刚出校门,初到公司,最大的成就是完成了一个全球抓取数据的系统!简单介绍一下这个项目的实现思路以及在项目中踩过的坑,随时告诫自己以后尽量避免! 历时一个半月还多几天,终于通过交付测试了!项目是从全球范围内,通过Google,Bing,雅虎来抓取数据,由于服务器不是特别的好,并且考虑到会有很多的脏数据,我们在实现的时候并没有将数据入库,想要将数据进行持久化的保存,可以使用导出的方式将数据以电子表格的方式导出来! 难点一: 项目经历了一次大的改版,将整个的抓取流程做了一次很大的改动.我们在抓取

浏览器兼容 各浏览器的Hack写法 [出处:W3CPLUS]

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果.总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用

《C++之那些年踩过的坑(附录一)》

C++之那些年踩过的坑(附录一) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自:http://www.cnblogs.com/GodA/p/6639526.html 本来上个月就开始动笔了,直到现在才发出来,实在太多事情.可能有些小朋友不知道写这一篇随笔的起因,那么你可以看一下我之前写的. 上一篇的最后,我提到了一个问题:代码优化.并留了一个小测试:无符号数与有符号数的性能比

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.