页面中存在iframe时刷新页面的问题

时间 2019-11-08

标签页面存在 iframe 刷新问题栏目 HTML 繁體版

原文原文链接

近期在开发中遇到一个很奇怪的问题：HTML页面中有个iframe，初始状况下是空的，当点击特定按钮后iframe会加载特定页面。javascript

但很快就发现有点问题了：当iframe加载了特定页面后，此时只要按F5刷新页面，iframe仍然会显示刚刚加载过的页面，而不是初始化时的空页面。php

但更奇怪的事是：一样的HTML代码，只要把文件名改成php（其余动态语言脚本没有试过）就不会出现上面的问题，html

另外若是使得Ctrl+F5强制刷新，无论是html和php也都没有发生上面的问题。java

示例代码：缓存

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE></TITLE>
   <script type="text/javascript">
 var initFrame = function(){
	test.location='http://www.baidu.com';
 };
 var clearFrame = function(){
	test.location='about:blank';
 };
 </script>
 </HEAD>
 <BODY>
 <pre> 说明：
 刚开始iframe并无内容，点击加载后才有内容
 但此时刷新下页面，iframe内仍然会显示加载后的内容
 而不是空内容，这时须要增长清除iframe内容的代码来解决此问题
 但时在php程序中，此状况不会发生，刷新页面时iframe内容显示为空 </pre>
 <iframe name="test" src="" width=100% height="300px" border=0></iframe>
 <div>
	<a href="javascript:initFrame()">加载iframe</a>
	<a href="javascript:location=location">刷新页面</a>
	<a href="javascript:clearFrame()">清空iframe</a>
 </div>
  <script>
  //clearFrame();
  </script>
 </BODY>
</HTML>

为此我作了屡次试验，总结出结论以下：测试

文件类型\刷新方式

Ctrl+F5

JS
spa

location=location.net

location.replace(location)
code

JS
htm

location.reload

history.go(0)

HTML

异常

正常

异常

PHP

正常

异常

测试环境：Win7 64bit IE9/Firefox14

结论：

一、相同的代码，动态脚本和静态HTML执行结果仍是有差别的

二、页面中嵌套iframe在进行页面可能会有”缓存“（不知道用这个词是否合适）

三、JS不一样刷新页面的方式会有不一样效果，相似location=location的方式类至关于强制刷新，iframe里的内容也会初始化；相似location.reload的方式并不会初始化iframe里的内容，iframe内会保持以前的状态。

要想让以上全部的方式都不会有iframe显示异常的状况也很好办，只要增长一段 js初始化iframe的代码就能够了

上面示例代码中

//clearFrame();

这一行前面的注释去掉便可。

另外，iframe也会有其余一些烦人的问题如：iframe内打开连接问题、跳转异常问题、JS问题等

因此不少时候iframe并非一个好的方案，最后劝你们一句：iframe有风险，使用前请谨慎。

原创内容，转载请注明出处

http://blog.csdn.net/rainday0310/article/details/7933280