ADMINLTE 局部刷新布局

整理于http://bbs.csdn.net/topics/391846671
公司后台管理系统选用了ADMINLTE，咋一看还不错，但是最后都做完了，发现，哎呀不能局部刷新啊，核心功能没办法实现了，不能换框架，只能想办法改了，百度了一下，这位博主给的建议最好，分享给大家了，我自己把这个方法遗留的问题小小解决了下

首先，在主页面的<div class="content-wrapper">区的<section class="content">中，增加一个iframe，如

 

<iframe id="menuFrame" name="menuFrame" src="main.htm" style="overflow:visible;" scrolling="yes" frameborder="no" height="100%" width="100%"></iframe>

注意：其中的main.html是默认显示的一个页面。name为menuFrame。
然后在侧边栏的链接处，设置<a>标签的target属性为mengFrame，如下所示：

    <li class="active">
    <a href="pages/test.html" target="menuFrame" >
     <i class="fa fa-link"></i> <span>用户管理</span>
   </a>
  </li>

最后就还剩iframe这块的高度问题，css控制不理想，所以推荐js控制
1.获取到屏幕的高度window.screen.availHeight
2.用屏幕高度减去头部的高度window.screen.availHeight -100px (100px改成你自己的头部高度)
3.设置高度

    var hh=window.screen.availHeight -100
    $('.content').css('height',hh+'px')
//.content是你iframe的父级元素

如果你的ifram需要自适应高度，则用以下方法设置高度

//iframe高度
//'frameContent'子元素页面的最外层id
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.getElementById('frameContent').scrollHeight +20 || iframeWin.document.body.scrollHeight;
            }
        }
    };

    var iframe= document.getElementById('menuFrame');
    iframe.onload = function () {
        setIframeHeight(iframe);
    };

大功告成，现在局部刷新爽歪歪咯