多层嵌入式框架(iframe)使用总结
1、单层情况,假设在A.aspx页面的某个位置嵌入页面B.aspx,则在A页面中需使用一个嵌入框架iframeA,其示例代码如下:
...
<head>
...
<script type="text/javascript">
//iframeName:框架ID
function SetIframeSize(iframeName)
...{
var iframe = document.getElementById(iframeName);
try
...{
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)...{}
}
</script>
</head>
<body>
...
<tr>
<td>
<iframe id="iframeA" name="iframeA" scrolling="no" frameborder="0" src="B.aspx" width="100%"
onload="SetIframeSize('iframeA');"></iframe>
</td>
<tr>
...
</body>
...
2、嵌套两层情况,假设A.aspx页面通过嵌入式框架iframeA嵌入页面B.aspx,页面B.aspx又通过嵌入式框架iframeB嵌入页面C.aspx,其中A.aspx示例代码和单层情况一样,B.aspx页面的示例代码如下:
...
<head>
...
<script type="text/javascript">
//iParentFrameName:父框架ID
//iframeName:框架ID
function SetIframeSize(iParentFrameName,iframeName)
...{
var iframe = document.getElementById(iframeName);
try
...{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
//据说这两个高度可能不一样
var height = Math.max(bHeight, dHeight);
iframe.height = height;
//更新父框架高度
SetIframeSize2(iParentFrameName)
}catch (ex)...{}
}
//iframeName:框架ID
function SetIframeSize2(iframeName)
...{
var iframe = window.parent.parent.document.getElementById(iframeName);
try
...{
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)...{}
}
</script>
</head>
<body>
...
<tr>
<td>
<iframe id="iframeB" name="iframeB" scrolling="no" frameborder="0" src="C.aspx" width="100%"
onload="SetIframeSize('iframeA','iframeB');"></iframe>
</td>
<tr>
...
</body>
...
其中代码
var iframe = window.parent.parent.document.getElementById(iframeName);
window指C.aspx,window.parent指B.aspx,window.parent.parent指A.aspx
事实上如果没有特别需要(比如B.aspx页面条件加载C.aspx页面)下,A.aspx中iframeA可以不要onload事件。
3、嵌套多层情况
多层嵌层以两层情况为例类推,同上没有特别需要,只设最后一级iframe的onload事件。