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); } }