用iframe实现的网页局部刷新

原创 2007年09月12日 15:59:00

    网上经常有人想要实现不刷新从服务器取数据的需求。本人理解就是局部刷新或者是隐藏刷新。有点象“偷偷摸摸”地从服务器拿数据而不让用户发觉的意思。本人想要实现局部刷新的思路是出于以下考虑的:
    当用户点击一个应用菜单后,要将此菜单代码保存在数据库中,而且要在“最近使用过的菜单”中显示出来。因为应用菜单项非常多,刷新一次要消耗相当多的资源,所以就想只刷新“最近使用过的菜单”,因为只取前十项,所以速度很快。

    ajax对我来说目前还比较新鲜,目前没有涉及相关的技术。听说在网络应用中有着相当的优势,看来我也得不断地学习...

    以下是我今日实现的网页局部刷新的例子。


在网页ref.htm中以iframe方式调用ref1.htm. 点击在ref.htm中按钮ddd,只刷新iframe中的ref1.htm.
显示的是刷新后的时间,以示清淅。
可以用F5刷新感受一下同时刷新与局部刷新的区别。
两个小程序如下:


ref.htm
----------------------------------------------
<html>
<body onload='dis()'>
<div id=f style="position:absolute;top:100;left:100;width:300;height:300;background-color:#9999FF;">
<iframe id=ref1 src="ref1.htm"></iframe>
</div>
<button name=fr onclick="javascript:ref1.location.reload()">ddd</button>
<span id=cnt>wwww<span><br>
<script language=javascript>
function dis(){
var d=new Date();
cnt.innerHTML="<b>"+d+"</b>";
}
//if (document.readyState!="complete") return ;
</script>

</body>
</html>

ref1.htm
----------------------------------------------
<html>
<body>
<span id=cnt>ssss<span><br>
<script language=javascript defer>
cnt.innerHTML="<b>"+new Date()+"</b>";
</script>
</body>
</html>

我要将些刷新方式应用到一个业务网站上去。

 

将ref.htm改为以下,可以实现定时刷新。这里设置的是每秒刷新一次。实际应用时,此刷新
频率可能要影响服务器的性能,可设置为每隔5到10分钟刷新一次。

<html>
<body onload='dis()'>
<div id=f style="position:absolute;top:100;left:100;width:300;height:300;background-color:#9999FF;">
<iframe id=ref1 src="ref1.htm"></iframe>
</div>
<button name=fr onclick="javascript:ref1.location.reload()">ddd</button>
<span id=cnt>ssss<span><br>
<script language=javascript>
function dis(){
var d=new Date();
cnt.innerHTML="<b>"+d+"</b>";
re();
}
void function re()
{
 ref1.location.reload();
 setTimeout("re()",1000);
}
</script>
</body>
</html>
 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

a标签的target指向iframe实现页面局部刷新

iframe的name属性配合a标签的target属性实现页面局部刷新: 页面一代码: html> head lang="en"> meta charset="UTF-8"> ...

关于iframe 局部刷新 全部刷新 的解决办法以及嵌套 嵌套html页面

如果你想要局部刷新可以采用iframe来实现 但是当你点击一个当前ifram例如图一 希改整个页面刷新时候 往往出现这种情况望 只有局部被刷新了 你需要刷新整个页面 则需要这样做 如...

PHP网站使用JavaScript和Iframe简单实现部分刷新效果

本文主要是记录自己寒假作业PHP网站实现加载界面的文章,运行效果如下图所示.主要记录php+html+Apache开发网站的3个功能:(主要是记录,方便以后阅读和其他人学习)         1.如何...

iframe局部刷新的两种实现方法

一、iframe实现局部刷新方法一 1 2 3 4 5 6 7 8 9 10 11 12 13...

iframe局部刷新的二种实现方法

需求描述: 当页面有一部分是不变的或整个页面的图片很多时,可以考虑使用局部刷新,以提高整体的下载速度与用户体验。   1,iframe实现局部刷新的方法一   复制代码代码示例: ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

用Iframe实现局部刷新

Iframe FrameworkIframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新。Iframe的用法与普通的标签元素DIV类似,可以指定在页面中嵌入的位置、颜色...
  • leecong
  • leecong
  • 2008年01月11日 15:52
  • 4317

iframe框架中的页面刷新

1,reload 方法,该方法强迫浏览器刷新当前页面。   语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false...

js/jquery中刷新iframe方法(兼容主流)

一。js实现刷新两种方式: //方法1 document.getElementById('FrameID').contentWindow.location.reload(true); //方法2 d...
  • jarniyy
  • jarniyy
  • 2016年05月03日 14:10
  • 10244

使用js刷新指定的iframe

先指定 iframe的id 然后使用js: "这里写iframe的id".window.location.reload()
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用iframe实现的网页局部刷新
举报原因:
原因补充:

(最多只允许输入30个字)