您的位置:首页 > 其它

MVC布局页面嵌入Iframe子页面,显示不完整

2017-11-07 11:54 197 查看
参考来源: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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  mvc .net iframe嵌套