`
flyzhouke
  • 浏览: 18905 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

如何利用子窗口控制父窗口iframe的高度

阅读更多

1. 在项目中用到了iframe,但是iframe里面的内容并不能确定有多长.
如:你的iframe包含的页面里面有分页,平均每页10条记录,到最后一页的时候只有2条,
由于iframe在正常情况下是不能指定其高度为100%的,这时候应该怎么办呢?
    告诉你,你现在再也不用为这个烦恼了,一句简单的javascript就帮你搞定这个问题.

例:
parent.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>iframeTest</title>
</head>
<body bgcolor="#FFFFCC">
<iframe name="iframeTest" src="iframe.html" ></iframe>
</body>
</html>

iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>iframe</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- html内容 -->
<script>
parent.document.all.iframeTest.height = document.body.scrollHeight;
</script>
</body>
</html>

注意两个html中的粗体部分即可.

2.现在的问题是当frame2.htm显示的内容很长时,有些内容看不到;如何做到该网页随iframe中嵌入的网页内容长度自动出现滚动条,并且这滚动条不是出现在iframe中
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td colspan="2"><iframe frameborder=no
             marginheight=0 marginwidth=0 name=schistory scrolling=no
            src="frame2.htm" width=100%> </iframe></td>
</tr>
</table>


处理1:
你这个属于让iframe的子页面决定父页面的高度。
写javascript吧。
<script language="Javascript">
function window.onload()
{
parent.document.all("mainFrame").style.height=document.body.scrollHeight+670;
}
</script>
写在iframe调用的子页面里面
后面的670是父页面比子页面高的高度

<script language="javascript">
parent.document.getElementById(mainFrame).height = '200px';
</script>

直接设置页面大小。

3.如何动态控制IFrame的长和宽

主页面要放置一个IFrame用于嵌套显示子页面的信息,但是子页面的数据多少不一,导致子页面可能会很长或很短,要动态控制IFrame的高低随子页面的长短而变化。
主页面如下:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY >
<TABLE>
    <TR>
<TD>
   <iframe id="frmTest" height="100px" name="frmTest" src="in.html"></iframe>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

子页面只需要做如下处理即可:
在页面的最下端添加如下JS脚本:
<script language=javascript>
window.parent.document.all("frmTest").style.height = document.body.scrollHeight + 10;
</script>

其中frmTest即为Main页面的IFrame的ID。

分享到:
评论

相关推荐

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所...在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。

    iframe_height:跨域 iframe 高度调整

    在子页面中,从您的文档就绪函数或窗口加载函数调用 messageParent()。 messageParent 函数尝试使用 document.scrollHeight 来获取文档的高度,但这并不总是适用于每个人。 您可能只想使用 jquery 或其他选择器获取...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹出窗口。 +在aspx页面中必须显示的声明控件的集合属性(比如Tabs(TabStrip), Items(PanelBase), Nodes(TreeNode))。 ...

    ExtAspNet_v2.3.2_dll

    -为ExtAspNet.Alert添加两个静态方法ShowInParent和GetShowInParentReference,用于在父页面弹出窗口。 +在aspx页面中必须显示的声明控件的集合属性(比如Tabs(TabStrip), Items(PanelBase), Nodes(TreeNode))。 ...

    无限菜单之 xml+popup 版(IE5.5+)

    我本来一直以为Popup窗口是不可以多个共存的,不过偶然从51js上知道:父Popup窗口可以创建子Popup窗口,子Popup窗口又可以创建子Popup窗口,这样就可以同时存在一个Popup窗口家族,当父Popup窗口关闭,所有的子孙...

    前端css+html+布局笔记

    寻找父元素中的指定位置子元素,在所有的子元素中排序 例子 p:nth-child(3) 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 :first-of-type 寻找指定类型中的第一个子元素 :...

    KODExplorer 芒果云-资源管理器

    - 弹出层中的弹出层关闭,父窗口失去焦点问题。 - 代码中grunt部分代码拆分开,放到程序外面;提交到git、osc - 桌面:删除alert enter快捷键删除 - install 检测 加入跳过,(只判断用到的函数) 加入多语言 - ...

    C#编程经验技巧宝典

    16 &lt;br&gt;0033 Return语句的使用 17 &lt;br&gt;0034 如何实现无限循环 17 &lt;br&gt;0035 巧用foreach语句控制控件 18 &lt;br&gt;0036 有效使用switch case语句 18 &lt;br&gt;2.3 运算符 19 &lt;br&gt;0037 如何使用...

    苹果8XPC和手机二合一完整版

    用户登录窗口iframe调用: &lt;iframe src="{maccms:path}index.php?m=user-iframe.html" frameborder="0" scrolling="no" width="100%" height="25"&gt;&lt;/iframe&gt; 特有标签: {maccms:userid} 会员ID {maccms...

    JavaScript Table行定位效果

    克隆一个元素用cloneNode就可以了,它有一个bool参数,表示克隆是否包含子节点。 程序第一步就是克隆原table: this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._...

Global site tag (gtag.js) - Google Analytics