在做页面统计的时候遇到了两个问题:

1.包含iframe的页面,在IE下按后退按钮不能刷新主页面。隐藏Iframe的src是统计程序的url,每点一次后退,就会发出一次页面加载时间请求。

2.由js动态创建的img标签会发出两个http请求,第一个请求在发出后就被aborted,但实际上统计脚本收到了该请求,造成数据重复入库。

针对第一个问题,怀疑是IE针对iframe处理同firefox不同。后来查资料才知道,IE会把iframe访问过的页面也记录进history,点击后退按钮时,其实是重新载入iframe中的url,因此表面上看起来是主页面不能刷新,其实隐藏的iframe是刷新了的,因此会造成点后退按钮发出不希望的请求。

针对第二个问题,IE处理动态创建的img,在设置img.src时会发出图片请求,因此把img.src放到appenChild方法之后设置就可以避免这种情况。

附iframe在不同浏览器下的表现:

AJAX教程: 两种iframe的区别 (怎样控制浏览器的history)

浏览器history记录了我们访问的页面。当点击浏览器的后退或者前进按钮时候,就会在history中记录页面之间进行跳转。有时候,因为各种原因,程序员需要控制什么页面被放进浏览器的history中,哪些页面不放进去。把这种针对history的控制当做一种原型来看,它可以被用在更加复杂的AJAX和DHTML应用中。在这里,我会讲述两类iframe,当你面临AJAX设计问题或者遇到这两类iframe引起的奇怪bug时,这些知识将会非常有用。

有两类iframe,一种是在HTML文档中静态存在的iframe:

另外一种是在页面加载后动态创建的iframe:

好了,我们已经知道有两类iframe,但是谁在意这个事实呢?但是,不同的浏览器在是否将他们放入history的决策上有完全不同的表现!

下面我们来看看真相。
Firefox:

如果iframe是静态存在在HTML中时,iframe的任何src或者location改变都会被记录到浏览器history中。

如果iframe是在页面加载完成后动态创建的,那么iframe的任何src或者location改变都不会被记录到浏览器history中。

IE:

两种iframe的src或者location改变都会被记录到浏览器history中。

Safari:

两种iframe的src或者location改变都不会被记录。

通过下面两个例子可以看到我们的结论。两个例子我们都会动态改变iframe的location,分别加载四个不同的页面。

下面我们看两个例子

在第一例中,iframe是在HTML页面中静态存在的,当改变几次iframe的location后,在IE和Firefox的history中都记录了这几个页面地址。点击后退和前进按钮时,iframe中加载的页面会改变。
在第二例中,iframe是页面加载完成后,由js动态创建的。Firefox下只有主页面在浏览器history中,而IE下不仅主页面,而且iframe加载的所有页面都在history中。

注:当一个iframe在HTML页面中静态存在时,并且该iframe有初始化了的src属性,如

那么改src指向的url不会被记录在浏览器history中,只有iframe的src或location被成功改变后指向的url才会被记录。

因此,我们可以使用这两类iframe的特殊行为来实现我们想要的效果。比如,可以让通过CSS将iframe设置为不可见,然后选择这两种iframe中的一种来决定是否让浏览器记录iframe加载过的页面url。

iframe中的历史记录问题汇总及解决方案[转]的更多相关文章

  1. H5项目常见问题汇总及解决方案

    H5项目常见问题汇总及解决方案 H5   2015-12-06 10:15:33 发布 您的评价:       4.5   收藏     4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...

  2. H5 常见问题汇总及解决方案

    原文链接:http://mp.weixin.qq.com/s/JVUpsz9QHsNV0_7U-3HCMg H5 项目常见问题汇总及解决方案 -- 由钟平勇分享 转自 https://github.c ...

  3. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

  4. 在其他系统Iframe中显示SharePoint 页面

    前段时间在做一个项目,要求将SharePoint 的 OWA(Office Web Apps)中的文档显示页面嵌入到另外一个OA系统中,提供给用户可以通过浏览器查看SharePoint文档的能力. 嵌 ...

  5. 在iframe中使用cookie需要注意

    cookie的使用早已不新鲜了,但是最近在做项目时还是被坑了一把. 那么接下来让我们来看一下这个"坑"是个什么情况! 前提: 1.现在有两个页面A.html, B.html,同时, ...

  6. flume常见异常汇总以及解决方案

    flume常见异常汇总以及解决方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 实际生产环境中,我用flume将kafka的数据定期的往hdfs集群中上传数据,也遇到过一系列的坑 ...

  7. 【转】使用kettle工具遇到的问题汇总及解决方案

    使用kettle工具遇到的问题汇总及解决方案   转载文章版权声明:本文转载,原作者薄海 ,原文网址链接 http://blog.csdn.net/bohai0409/article/details/ ...

  8. 使用ubuntu过程中遇到的问题汇总

    使用ubuntu过程中遇到的问题汇总 1.使用图形界面设置免密码登录之后,改回密码登陆失效 解决方案: https://askubuntu.com/questions/211084/how-do-i- ...

  9. iframe中的页面在IE全屏模式下没有滚动条,正常模式有滚动条

    这个问题在其他浏览器都不会出现,唯独IE不行,搜遍了百度以及各大论坛网站,都找不到这个问题的解决方案,只好自己整了. 造成这个问题的原因很简单,就是刚开始的滚动条我用的是iframe的滚动条,ifra ...

随机推荐

  1. Python入门:参数传递方式

    这是关于Python的第5篇文章,主要介绍下参数传递方式和如何设计自己的函数. (一) 本篇主要介绍2种参数传递方式. 位置参数 调用函数时,根据函数定义的参数位置来传递参数. def right_t ...

  2. PAT 1078 字符串压缩与解压

    https://pintia.cn/problem-sets/994805260223102976/problems/994805262018265088 文本压缩有很多种方法,这里我们只考虑最简单的 ...

  3. Delphi CreateMutex 防止程序多次运行

    windows是个多用户多任务的操作系统,支持多个程序同时运行,如果你的程序不想让用户同时运行一个以上, 那应该怎样做呢? 本文将介绍避免用户同时运行多个程序的例子. 需要用到的函数CreateMut ...

  4. Mysql 定位执行效率低的sql 语句

    一.通过MySQL慢查询日志定位执行效率低的SQL语句. MySQL通过慢查询日志定位那些执行效率较低的SQL 语句,用--log-slow-queries[=file_name]选项启动时,mysq ...

  5. 使用pyquery是遇到的一个403的问题

    在网上爬虫时,本地windows下运行pyquery代码正常,但是在linux下运行时一直报错 403 Forbidden.刚开始的代码如下 from pyquery import PyQuery a ...

  6. HUAS 2017暑假第六周比赛-题解

    A.Parenthesis 括号匹配的问题有一种经典的做法. 将左括号看成1,右括号看成-1,做一遍前缀和sum. 括号序列是合法的当且仅当\(sum[n]=Min(sum[1],sum[2].... ...

  7. sqlserver创建同义词

    https://blog.csdn.net/anderslu/article/details/53433841?utm_source=itdadao&utm_medium=referral 例 ...

  8. MQTT - Connect报文解析

    #include <bits/stdc++.h> using namespace std; int main() { ] = { /* * 固定报头: MQTT报文类型(1), 保留位 * ...

  9. 编译安装keepalived,实现双主mysql高可用

    安装keepalived 1.官网下载源码包,解压 # wget http://www.keepalived.org/software/keepalived-1.1.20.tar.gz # tar x ...

  10. k-Nearest Neighbor algorithm 思想

    转载      KNN--K最邻近算法思想 KNN算法的决策过程 k-Nearest Neighbor algorithm  上图中,绿色圆要被决定赋予哪个类,是红色三角形还是蓝色四方形?如果K=3, ...