用iframe实现的网页局部刷新

最新推荐文章于 2024-04-09 16:29:43 发布

-布谷鸟-

最新推荐文章于 2024-04-09 16:29:43 发布

阅读量1.1w

点赞数 7

文章标签： iframe javascript function button 服务器 date

本文链接：https://blog.csdn.net/cuckoo1/article/details/1782346

版权

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

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

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

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

ref.htm
----------------------------------------------
<html>
<body οnlοad='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 οnclick="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 οnlοad='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 οnclick="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>

-布谷鸟-

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
用iframe实现的网页局部刷新

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

扫一扫