整理于http://bbs.csdn.net/topics/391846671
公司后臺(tái)管理系統(tǒng)選用了ADMINLTE,咋一看還不錯(cuò)线梗,但是最后都做完了痊班,發(fā)現(xiàn)角撞,哎呀不能局部刷新啊井联,核心功能沒(méi)辦法實(shí)現(xiàn)了卜壕,不能換框架,只能想辦法改了烙常,百度了一下,這位博主給的建議最好鹤盒,分享給大家了蚕脏,我自己把這個(gè)方法遺留的問(wèn)題小小解決了下
首先,在主頁(yè)面的<div class="content-wrapper">區(qū)的<section class="content">中侦锯,增加一個(gè)iframe驼鞭,如
<iframe id="menuFrame" name="menuFrame" src="main.htm" style="overflow:visible;" scrolling="yes" frameborder="no" height="100%" width="100%"></iframe>
注意:其中的main.html是默認(rèn)顯示的一個(gè)頁(yè)面。name為menuFrame尺碰。
然后在側(cè)邊欄的鏈接處挣棕,設(shè)置<a>標(biāo)簽的target屬性為mengFrame译隘,如下所示:
<li class="active">
<a href="pages/test.html" target="menuFrame" >
<i class="fa fa-link"></i> <span>用戶管理</span>
</a>
</li>
最后就還剩iframe這塊的高度問(wèn)題,css控制不理想洛心,所以推薦js控制
1.獲取到屏幕的高度window.screen.availHeight
2.用屏幕高度減去頭部的高度window.screen.availHeight -100px (100px改成你自己的頭部高度)
3.設(shè)置高度
var hh=window.screen.availHeight -100
$('.content').css('height',hh+'px')
//.content是你iframe的父級(jí)元素
如果你的ifram需要自適應(yīng)高度固耘,則用以下方法設(shè)置高度
//iframe高度
//'frameContent'子元素頁(yè)面的最外層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);
};
大功告成,現(xiàn)在局部刷新爽歪歪咯