iframe历史记录问题(转载)

2 篇文章 0 订阅
2 篇文章 0 订阅

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

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。

 

原文地址:http://www.oushit.com/?p=207

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Safari浏览器并不会在其历史记录中保存iframe内嵌框架的浏览历史。这意味着,当在iframe内加载不同的页面时,Safari浏览器的历史记录不会记录这些页面的访问记录。因此,无法通过浏览器的前进和后退按钮来访问iframe内加载的不同页面。 然而,如果您想要在使用iframe时实现保持历史记录的功能,可以考虑使用其他解决方案。一个可能的解决方案是使用隐藏框架或隐藏内嵌框架来实现客户端/服务器之间的通信。这种方法涉及到使用两个框架页,其中一个框架页必须是隐藏的,另一个框架页则必须是可见的。通过在可见框架页中加载不同的页面,并在隐藏框架页中保存历史记录,可以实现在iframe内保持历史记录的效果。 另外,可以使用window.onpopstate事件来监听浏览器的前进和后退操作。当用户点击浏览器的前进或后退按钮时,该事件将被触发,并且可以通过检查history.state中的信息来获取先前保存的历史记录。这种方法可以在不使用iframe的情况下实现保持历史记录的功能。 综上所述,Safari浏览器不会在其历史记录中保存iframe内嵌框架的浏览历史。但是,可以通过使用隐藏框架或隐藏内嵌框架以及监听window.onpopstate事件等方法来实现在iframe内保持历史记录的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [iframe创建智能表单](https://blog.csdn.net/weixin_39624389/article/details/117880470)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [关于ajax后退页面及历史记录问题?](https://blog.csdn.net/weixin_36482976/article/details/119475896)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值