Bootstrap+iframe+sbadmin2高度自適應後台管理系統模板

基於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引用：

<!-- Bootstrap Core CSS -->
<link href="./sbadmin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="./sbadmin/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="./sbadmin/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="./sbadmin/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

js引用：

<!-- jQuery -->
<script src="./sbadmin/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="./sbadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="./sbadmin/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="./sbadmin/dist/js/sb-admin-2.js"></script>

2、iframe支援根據內容自適應。參考：[iframe根據內容變化自動適應高度的方法]

設定菜單點擊事件並自適應高度：

<!--左邊菜單控制切換右側內容js-->
<script>
$(document).ready(function(e) {
    $(".menuc").click(function(){
        var url = $(this).attr("url");
        $("#iframecon").attr("src",url);
        })
});
</script>
<!--iframe自適應內容高度js-->
<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