邏輯思路：頭部是li的iframe公共方法切換，點選其中的搜尋跳轉到新的介面，但是再次點選頭部載入原來的iframe內容。點選li其中的iframe的src載入js中的介面，然後隱藏搜尋的內容id="wraper".

1.點選搜尋跳轉到新的介面.jsp

    <div class="header">
        <div class="header-wrap">
            <img src="/kms/newpage/images/header.png">
            <ul class="header-wrap-list">
                <li class
 
="tab-nav"><a>首頁</a></li>
                <li><a>部門</a></li>
                <li><a >我的</a></li>
                <li><a>知識統計</a></li>
            </ul>
        </div>
    </div>

    <div>
        <iframe class
 
="frames" frameborder="0" id="frame" name="frame" marginwidth=0 marginheight=0 width="1366px" height="100%"
                src="" frameborder="no" onload="onloadHeight()"></iframe>
    </div>

<div id="wraper">
        <div class="box-content">
    
            <form id="VelcroForm" action="<%=basePath %>newSearch/list.do" method="post">
            <div class
 
="box-search">
                <div class=" mt10 search-wrap s-wrap">
                    <input id="sear-text" type="text" autocomplete="off" value="${requestScope.searchParam.keyword }" name="keyword" class="search search-text"/>
                    <input type="button" id="searchBtn" class="btn searchBtn" value="搜尋" /><!-- 搜 索 -->
                    <input type="button" id="reSearchBtn" class="btn searchBtn" value="結果中搜索" /><!-- 結果中搜索 -->
                    <!--<input type="button" id="graphBtn" class="btn searchBtn"  value="知識圖譜" />-- 知識圖譜 -->
                    <input type="hidden" id="isYearSearch" name="isYearSearch" value="${requestScope.searchParam.isYearSearch }"/>
                    <input type="hidden" id="prevKeyword" name="prevKeyword" value="${requestScope.searchParam.currentKeyword }"/>
                    <input type="hidden" id="oldKeyword" name="oldKeyword" value="${requestScope.searchParam.prevKeyword }"/>
                    <input type="hidden" name="isResultSearch" value="${requestScope.searchParam.isResultSearch }"/>
                    <c:forEach var="s" items="${requestScope.searchParam.facetFields }">
                        <c:set var="facetValue" value=""></c:set>
                        <c:if test="${fn:contains(requestScope.searchParam.facet,s) }">
                            <c:forEach items="${requestScope.searchParam.facetValues }" var="c">
                                <c:if test="${fn:contains(c,s) }">
                                    <c:set var="facetValue" value="${c }"></c:set>
                                </c:if>
                            </c:forEach>
                        </c:if>
                        <input type="hidden" id="${s }_facet" name="facet" value="${facetValue}"/>
                    </c:forEach>
                     <div class="clear"></div>
                    <div class="box-search-type">
                        <span class="pr15">知識來源：</span>
                        <label for="sys_all"><input type="checkbox" id="sys_all" <c:if test="${empty(requestScope.searchParam.system)}">checked="checked"</c:if> class="chkAll" chkListCls="sys_item" />全部</label>
                        <%--<label for="sys_kms"><input type="checkbox" <c:if test="${fn:contains(requestScope.searchParam.system,'kms')||empty(requestScope.searchParam.system)}">checked="checked"</c:if>  value="kms"  class="sys_item" id="sys_kms" name="system"/>知識庫</label>
                        <label for="sys_paper"><input type="checkbox" <c:if test="${fn:contains(requestScope.searchParam.system,'other')||empty(requestScope.searchParam.system)}">checked="checked"</c:if> value="other" class="sys_item" id="sys_paper" name="system"/>外部知識</label>--%>
                        <c:forEach items="${items}" var="source">
                            <label for="sys_${source.objdesc}"><input type="checkbox" <c:if test="${fn:contains(requestScope.searchParam.system,source.objdesc)||empty(requestScope.searchParam.system)}">checked="checked"</c:if> value="${source.objdesc}" class="sys_item" id="sys_${source.objdesc}" name="system"/>${source.objname}</label>
                        </c:forEach>
                    </div>
                    <div class="box-search-type">
                        <span class="pr15">匹配方式：</span>
                        <label for="search_content">
                            <input type="radio" <c:if test="${empty(requestScope.searchParam.searchField) }">checked="checked"</c:if> value=""  id="search_content" name="searchField"/>按內容搜尋 
                        </label>
                        <label for="search_title">
                            <input type="radio" <c:if test="${requestScope.searchParam.searchField=='title' }">checked="checked"</c:if> value="title" id="search_title" name="searchField"/>
                            按標題搜尋
                        </label>
                        <label for="accuracy_search">
                            <input <c:if test="${requestScope.searchParam.isAccuracySearch==1 }">checked</c:if> id="accuracy_search" type="checkbox" />
                            <input type="hidden" name="isAccuracySearch" value="${requestScope.searchParam.isAccuracySearch }"/>是否完全匹配
                        </label>
                    </div>
                    <div class="box-search-type">
                        <span class="pr15"> 排序方式 ：</span>
                        <label for="order_score"><input type="radio" <c:if test="${empty(requestScope.searchParam.orderField) }">checked="checked"</c:if> value=""  id="order_score" name="orderField"/>按匹配度排序</label>
                        <label for="order_date"><input type="radio" <c:if test="${requestScope.searchParam.orderField=='createtime' }">checked="checked"</c:if> value="createtime" id="order_date" name="orderField"/>按時間排序</label>
                    </div>
                    <div class="box-search-type">
                        <span class="pr15">文件型別：</span>
                        <label for="type_all"><input type="radio" id="type_all" <c:if test="${empty(requestScope.searchParam.fileType) }">checked="checked"</c:if> value="" name="fileType"/>全部 </label>
                        <label for="type_doc"><input type="radio" <c:if test="${fn:contains(requestScope.searchParam.fileType,'doc') }">checked="checked"</c:if> value="doc,docx" id="type_doc" name="fileType"/>DOC</label>
                        <label for="type_ppt"><input type="radio" <c:if test="${fn:contains(requestScope.searchParam.fileType,'ppt') }">checked="checked"</c:if> value="ppt,pptx" id="type_ppt" name="fileType"/>PPT</label>
                        <label for="type_xls"><input type="radio" <c:if test="${fn:contains(requestScope.searchParam.fileType,'xls') }">checked="checked"</c:if> value="xls,xlsx" id="type_xls" name="fileType"/>XLS</label>
                        <label for="type_pdf"><input type="radio" <c:if test="${fn:contains(requestScope.searchParam.fileType,'pdf') }">checked="checked"</c:if> value="pdf" id="type_pdf" name="fileType"/>PDF</label>
                        <label for="type_txt"><input type="radio" <c:if test="${fn:contains(requestScope.searchParam.fileType,'txt') }">checked="checked"</c:if> value="txt" id="type_txt" name="fileType"/>TXT</label>
                    </div>
                </div>
            
                
                <!-- <div class="search-line"></div> -->
                <div class="clear"></div>
            </div>

2.公共的js檔案內容

window.onload = function () {
    onloadHeight()
}
$(document).ready(function () {
    $(".header-wrap-list li").click(function () {
        $(this).addClass("tab-nav");
        $(this).siblings().removeClass("tab-nav");
        var itemId = $(this).index();
        var iframe = document.getElementById('frame')
        if (itemId === 0){
            iframeSrc('frame', "/kms/newpage/pages/index/index.jsp")
            // onloadHeight()
            $('#wraper').css('display','none');
        } else if (itemId === 1) {
            iframeSrc('frame', "/newpage/getDepCategory.do")
            // onloadHeight()
            $('#wraper').css('display','none');
        } else if (itemId === 2) {
            iframeSrc('frame', "/kms/zone/getMyCenter.do")
            // onloadHeight()
            $('#wraper').css('display','none');
        } else {
            console.log(3)
            // onloadHeight()

        }
    })
})
function iframeSrc(frame, src) {
    var iframe = document.getElementById(frame)
    iframe.src = src
}

function onloadHeight() {
    var ifm = document.getElementById("frame");
    var subWeb = document.frames ? document.frames["frame"].document : ifm.contentDocument;
    // console.log(subWeb);
    if (ifm != null && subWeb != null) {
        //清除上一個子頁面高度的影響
        $("#frame").height(0);
        $("#frame").height(subWeb.body.scrollHeight);
    }
}