用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>
 

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

相关文章推荐

.net MVC中如何使用iframe实现局部刷新

今天有人遇到在MVC中局部刷新问题,可以防止整个也页面进行刷新,出现抖动现象。 网页中的布局还是选用的是table布局,其实DIV+CSS不是一样的原理和操作过程,这里只是示范怎么进行局部刷新。 ...

iframe实现局部刷新和回调-- 文件上传

今天做项目遇到一个问题。就是提交表单的时候,验证用户名是否存在和验证码是否正确。 当验证码或者用户名存在的时候。在后台弹窗提示。可页面原本file里面符合要求的值刷新没了。用户体验不好。因为用i...
  • ybhjx
  • ybhjx
  • 2015-12-23 15:14
  • 1244

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

SpringMVC中整合bootstrap实现分栏,iframe实现点击左侧菜单改变右侧内容或点击上面菜单改变下面内容,地址栏内容不变。附源码!!!

今天看到一个页面,页面布局是左右分栏,点击左边菜单右边页面内容随之改变,让我感兴趣的是无论如何点击,地址栏的内容都不会改变。于是想亲自动手实现这一效果,百度了一大堆,最后决定用bootstrap实现分...

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

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

js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

1、在父页面 获取iframe子页面的元素

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

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

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

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

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

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

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

一。js实现刷新两种方式: //方法1 document.getElementById('FrameID').contentWindow.location.reload(true); //方法2 d...

如何强制iframe刷新

iframe强制刷新(页面不刷新,iframe局部刷新)
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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