页面嵌套 Iframe 产生缓存导致页面数据不刷新问题

最近遇到个比较古怪的问题:当页面嵌套多个 Iframe 时会出现 Iframe 里包含的页面无法看到最新的页面信息。

  初步解决方案,在 Iframe 指向的页面地址后缀添加一个随机数或者时间戳。这样能确保每次在加载页面时,让浏览器知道它是最新的页面。说白了就是欺骗下浏览器,躲过缓存的灾难。(这是从 Stack Overflow 和 CSDN 上找到一个看似可行,能彻底治根的办法。 )

  Sample Code:

  通过 JS 产生随机数,把数据数当成参数传给页面地址

<script type="text/javascript">
var randomnumber=Math.floor(Math.random()*100000);
document.write('<iframe src="xxxx.aspx?_='+randomnumber+'"></iframe>');
</script>

 通过时间戳的办法

复制代码
<script>
var ts=new Date().getTime()
document.write('<iframe src="xxxx.asp?_='+ts+'"></iframe>');
document.write('<iframe src="xxxxxx.asp?_='+ts+'"></iframe>');
document.write('<iframe src="xxxxxxxx.asp?_='+ts+'"></iframe>');
</script>
复制代码

但这样现象依旧,实在快崩溃了。我依旧沿着这个方向去找,毕竟 Iframe 产生缓存是根源。既然浏览器端用这种方式依旧无法解决。只好从服务器端下手了,突然灵光一现,IIS 貌似有个可以自动保留缓存的机制。

看来距离彻底治根的办法不远了。开始进入测试环境的 VM 机,把 IIS 给开起来,一开始有个配置项就吸引我了。 “HTTP 响应标头”, 因为最最最早在处理这个办法的时候就是利用 JS 来强制清除浏览器缓存(可以参考如下,虽然这个办法没根治,但应该有需要这个方法的码友)。

<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT= "no-cache, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT= "Wed, 26 Feb 1997 08:21:57 GMT"> 

开始配置 HTPP 响应标头。

   1. 进入 IIS ,找到传说中的 “ HTTP 响应标头”,进入 HTTP 响应标头

     

   2.添加自定义 HTTP 响应标头

   

  问题终于得到解决..

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当在网页中嵌套使用iframe时,可能会遇到一些问题,如样式冲突、无法调整大小、页面加载速度慢等。下面介绍一些解决iframe嵌套页面问题的方法。 首先,针对样式冲突问题,可以使用CSS命名空间(CSS Namespaces)来解决。通过添加命名空间前缀,可以确保不同iframe中的元素样式不会相互冲突。这样可以避免样式被覆盖,保证每个iframe中的样式独立。 其次,针对调整iframe大小问题,可以使用JavaScript来动态调整iframe的大小。通过监听iframe内部内容的高度变化,并将高度值传递给父页面,从而实现自适应调整iframe的大小。这样可以确保iframe始终能够显示完整的内容,提高用户体验。 另外,针对页面加载速度慢的问题,可以通过延迟加载或者懒加载来提升性能。即在页面初次加载时,只加载展示iframe的占位符,并不加载真正的内容。当用户需要查看或者操作iframe时,再加载对应的内容。这样可以减少初次加载的数据量,提高页面加载速度。 此外,还可以考虑使用无需iframe的其他技术来实现类似的功能,如Ajax、Vue.js等。这些技术可以通过异步加载内容或者组件来避免使用iframe,从而减少了嵌套页面问题。 综上所述,处理iframe嵌套页面问题需要使用CSS命名空间、动态调整大小、延迟加载或懒加载等方法。同时也可以考虑使用其他技术来避免使用iframe带来的问题。通过采取这些方法,可以更好地解决iframe嵌套页面问题,提升用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值