解决HTML中iframe框架中的内容不刷新的方法

时间:2021-11-25
类别:教程 - 网页设计

这篇文章主要介绍了解决HTML中iframe框架中的内容不刷新的方法。

问题描述:

html:<iframe id="h5Content" src=""></iframe>

js:$("#h5Content").attr("src","${h5.url}");

h5.url对应的是一个ueditor编辑好存到数据库的一个页面.

修改这个页面内容提交后,iframe 中呈现的页面并没有变化.

原因

iframe的src的值发生改变,才会刷新iframe里面的内容.

所以虽然我代码的url对应的页面有变化了,可是url一直不变,也就是iframe的src的值一直没变.所以不刷新内容;

解决办法

原因找到了,解决就非常容易了.想任何一种办法让iframe的src的值有变化就可以了.

我当时的解决办法如下:

  1. $("#h5Content").attr("src","${h5.url}"+"?time="+new Date().getTime()); 

给url后面通过问号传值,传一个当前时间,就解决了.这个值并没有其他用处,只是为了改变src的值.

PS:iframe缓存不刷新问题彻底解决方法

这两天遇到一个很奇怪的问题,一个页面嵌套了一个iframe页面,当这个页面提交后再次跳转到本页面时,原本iframe内的页面应该刷新数据的,结果在ie下面却没刷新(FF下没问题),必须手动F5或者新开一个浏览器标签页浏览才能刷新,否则在本页面的浏览器上按回车是没用的,查阅了很多资料,最后终于发现是iframe缓存机制在搞鬼,用以下方法即可解决:

  1. <script type="text/javascript"
  2.  
  3. var randomnumber=Math.floor(Math.random()*100000) 
  4.  
  5.  
  6.  
  7. document.write(' 
  8.  
  9. <iframe src="https://www.uu2018.com/hunger/hunger_thankyou.php3?random='+randomnumber+'" name="aframe" width="100%" height="400"></iframe>') 
  10.  
  11.  
  12.  
  13. </script> 

通过请求多加一个值为随机数的参数,这样浏览器认为每次请求的页面都是新的而保证了iframe页面每次都是重新加载的。

    收藏