用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"> ...
  • qq_26222859
  • qq_26222859
  • 2017年06月26日 17:11
  • 1887

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

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

用Iframe实现局部刷新

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

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

近期在开发中遇到一个很奇怪的问题:HTML页面中有个iframe,初始情况下是空的,当点击特定按钮后iframe会加载特定页面。 但很快就发现有点问题了:当iframe加载了特定页面后,此时只要按F...
  • rainday0310
  • rainday0310
  • 2012年09月01日 22:09
  • 15400

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

一、iframe实现局部刷新方法一 1 2 3 4 5 6 7 8 9 10 11 12 13...
  • u012865381
  • u012865381
  • 2016年11月23日 16:09
  • 1352

Html 页面 局部刷新方法

var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElement...
  • qq_30469045
  • qq_30469045
  • 2016年07月09日 15:38
  • 5229

jquery刷新iframe页面的方法

http://www.3lian.com/edu/2014/10-18/173159.html *******************************    1,reload 方法,该方法强...
  • zhao1949
  • zhao1949
  • 2017年02月20日 15:32
  • 2596

jquery实现页面局部刷新

http://evan0625.iteye.com/blog/617004 后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.pare...
  • luofeixiongsix
  • luofeixiongsix
  • 2015年11月19日 12:17
  • 3112

HTML中使用Ajax进行局部刷新页面

使用Ajax进行用户名动态校验,局部刷新页面1.在HTML页面中使用js脚本将请求数据发送给后台servlet 由按钮触发事件 查询 由js脚本对将数据发送到后台 var req = new ...
  • u013360850
  • u013360850
  • 2016年10月09日 20:13
  • 20284

Js控制页面刷新(局部刷新&全页面刷新)

$.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get(”Default.php”, {id:”1″, page: “2″ }, fu...
  • luckymaoyy
  • luckymaoyy
  • 2016年12月09日 15:36
  • 2503
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用iframe实现的网页局部刷新
举报原因:
原因补充:

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