iframe的使用,头部标签切换,不是跳转到新的界面,而是头部保存不变,iframe内容发生变化

header.jsp

<%@page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>公共顶部</title>
  <link rel="stylesheet" href="/kms/newpage/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="/kms/newpage/css/global.css" type="text/css">
  <script src="/kms/newpage/js/jquery-1.12.4.min.js"></script>
</head>

<body>
  <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 id="main">
    <iframe frameborder="0" id="frame" name="frame" marginwidth=0 marginheight=0 width="100%" height="100%"
            src="/kms/newpage/pages/index/index.jsp" onload="onloadHeight()" frameborder="no"></iframe>
  </div>
  <div class="footer">
    CopyRight(©)2022 All Rights Reserved 版权所有:
  </div>

</body>
<script src="/kms/newpage/js/global.js"></script>

</html>
global.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){
            iframe.src = "/kms/newpage/pages/index/index.jsp"
            console.log(0);
            console.log(iframe.src);
            onloadHeight()
        } else if (itemId === 1) {
            console.log(1);
            iframe.src = "/newpage/getDepCategory.do"
            onloadHeight()
        } else if (itemId === 2) {
            console.log(2);
            iframe.src = "/kms/zone/getMyCenter.do"
            onloadHeight()
        } else {
            console.log(3);
            onloadHeight()
        }
    })
})
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);
    }
}

 

 
posted @ 2022-02-11 14:55  java璀璨小菜鸟  阅读(358)  评论(0)    收藏  举报