参考来源:http://caibaojian.com,感谢原文作者,原文链接:http://caibaojian.com/iframe-adjust-content-height.html,由于比较实用怕忘记,所以就转载了。
MVC布局页面嵌入Iframe子页面,显示不完整,怎么解决?
JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。
分别 为 同域下的iframe自适应高度 和 跨域下的iframe自适应高度
下面的代码兼容IE/Firefox浏览器,控制id为“iframeid”的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现。代码如下,可复制。另外,请注意此解决方案仅供同域名下使用。<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
if (iframeid && !window.opera){
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
iframeid.height = iframeid.contentDocument.body.offsetHeight;
}else if(iframeid.Document && iframeid.Document.body.scrollHeight){
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
</script>
<iframe id="frmContent" src="@Url.Action(PageData["actionparam"], PageData["controllerparam"])" f frameborder="0" scrolling="no" style="width:100%;min-height:800px; margin:0 auto;"></iframe>