【www.bbyears.com--今天更新】
基于Bootstrap框架的后台管理模板是越来越多了。以前说的有ace，sb admin2、Metronic等等。详见本文最后的参考资料。
其中，涉及到iframe的好像没有讲到，今天分享一下Bootstrap+iframe+sbadmin2高度自适应后台管理系统模板。
首先sb admin2 我就不介绍这个叫做傻逼的后台模板了，大家可以详见：[基于Bootstrap 的简约美观的后台管理系统模板UI:SB Admin 2]
先看效果图：
预览demo:Bootstrap+iframe后台管理系统演示
百度网盘下载代码：链接: http://pan.baidu.com/s/1nuqjHP3 密码: 4qwq
1、引用的js和css都是sb admin2自带的。最新版本
在head引用：
js引用：
<script src="./sbadmin/bower_components/jquery/dist/jquery.min.js"></script>
<script src="./sbadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./sbadmin/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script src="./sbadmin/dist/js/sb-admin-2.js"></script>
2、iframe支持根据内容自适应。参考：[iframe根据内容变化自动适应高度的方法]
设定菜单点击事件并自适应高度：
<script>
$(document).ready(function(e) {
$(".menuc").click(function(){
var url = $(this).attr("url");
$("#iframecon").attr("src",url);
})
});
</script>
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("iframecon");
var subWeb = document.frames ? document.frames["iframepage"].document :
ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>
3、应用场景：
我们在本系统中直接使用html静态页面。用jquery调用远程wcf服务完成业务逻辑。具体实现方式参考：
注意事项：不要在本地用file调试，挂到网站或者localhost上。会报错：
Uncaught SecurityError: Failed to read the "contentDocument" property from "HTMLIFrameElement": Blocked a frame with origin "null" from accessing a frame with origin "null". The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "data". Protocols must match.
iFrameHeight @ index.html:217onload @ index.html:183