框架页面高度自动刷新的Javascript脚本
更新时间：2013年11月01日 17:29:10 作者：
框架页面高度自动刷新,加载index.htm时候，每隔1秒钟自动调用脚本刷新框架页面代码，具体实现如下，感兴趣的朋友可以了解下
实现原理：加载index.htm时候，每隔1秒钟自动调用脚本刷新框架页面代码
代码优点：只需要设置index.html框架页面中的脚本，调用加载的子页面中不需要设置任何代码。
index.htm代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="float: left; width: 740px; height:auto; border: 1px #808080 Solid; margin: 5px 0px 5px 10px;overflow: hide">
<iframe name="ifr_obj" id="ifr_obj" src="这里嵌套其它页面地址或者文件名" frameborder="0" width="100%" scrolling="no" title="框架页面"></iframe>
</div>
</body>
<script language="javascript" type="text/javascript">
function initIframeHeight() {
try {
var iframe = document.getElementById("ifr_obj");
if (iframe != null) {
if (iframe.contentWindow.document.body != null) {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
catch (ex) {
alert("加载框架页面高度时出错"+ex.toString());
}
}
window.setInterval("initIframeHeight()", 1000);
</script>
</html>
代码优点：只需要设置index.html框架页面中的脚本，调用加载的子页面中不需要设置任何代码。
index.htm代码如下：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div style="float: left; width: 740px; height:auto; border: 1px #808080 Solid; margin: 5px 0px 5px 10px;overflow: hide">
<iframe name="ifr_obj" id="ifr_obj" src="这里嵌套其它页面地址或者文件名" frameborder="0" width="100%" scrolling="no" title="框架页面"></iframe>
</div>
</body>
<script language="javascript" type="text/javascript">
function initIframeHeight() {
try {
var iframe = document.getElementById("ifr_obj");
if (iframe != null) {
if (iframe.contentWindow.document.body != null) {
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
catch (ex) {
alert("加载框架页面高度时出错"+ex.toString());
}
}
window.setInterval("initIframeHeight()", 1000);
</script>
</html>
您可能感兴趣的文章:
相关文章
本章将专门介绍与执行上下文创建阶段直接相关的最后一个细节——this是什么？以及它的指向到底是什么，感兴趣的朋友跟随小编一起看看吧2021-04-04
在 ThreeJs 中,动画是创建动态 3D 场景的重要组成部分,本文将介绍如何使用 ThreeJs 实现基础的动画效果,需要的小伙伴可以参考一下2024-10-10
今天小编就为大家分享一篇关于layui 下拉列表的change事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript 监控微信浏览器且自带返回按钮时间的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-11-11
基于RequireJS和JQuery的模块化编程——常见问题全面解析
下面小编就为大家带来一篇基于RequireJS和JQuery的模块化编程——常见问题全面解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-04-04
JavaScript学习笔记之取值函数getter与取值函数setter详解
这篇文章主要介绍了JavaScript取值函数getter与取值函数setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了JS实现兼容各种浏览器的高级拖动方法,以完整实例形式分析了JS实现响应鼠标事件动态修改页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要为大家介绍了js面向对象编程，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能，利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置，具体实例代码跟随小编一起看看吧2019-12-12
这篇文章主要介绍了javascript的事件触发器介绍的实现,本文所指触发器是用程序来触发绑定的事件,而不是人为的去触发,需要的朋友可以参考下2014-06-06
最新评论