用div+load方法时,jsp中会重复加载js脚本(已经除去no-cache之类)

本文讨论了使用div和JS load方法加载子页面时遇到的问题,即每次加载子页面时都会重新加载JS脚本,导致资源浪费。通过将子页面的JS脚本移到父页面中,实现了只在首次加载时加载脚本,提高了效率。

在界面布局的时候是用div布局,在div下用js的load方法执行加载子元素。(为了方便说明:一下div的页面为父页面A,load加载的页面为子页面B)。之前的设计是把B页面需要的js脚本就放在B页面的底部,执行的时候,用小提琴监控,加载的时候,每一次都会重新加载js,会发现js的路径后面都是加上一串随机数,但在jsp中,一下的内容已经删除了。

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0"> ,

还是会导致每次读取的脚本都是全新的。后来发现,在div加载的时候,是会产生这个问题的,解决的方法就是把B脚本提取到A页面中,这样,父级页面A只有第一加载的时候,才会加载脚本,至于B页面,每次加载的时候不会去加载A页面的js脚本。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <html> <head> <!-- 页面meta --> <meta charset="utf-8"> <title>书虫补给站</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/_all-skins.min.css"> <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <script src="${pageContext.request.contextPath}/js/app.js"></script> <script type="text/javascript"> function SetIFrameHeight() { var iframeid = document.getElementById("iframe"); //iframe id if (document.getElementById) { iframeid.height = document.documentElement.clientHeight; } } </script> </head> <body class="hold-transition skin-purple sidebar-mini"> <div class="wrapper"> <!-- 页面头部 --> <header class="main-header"> <!-- Logo --> <a href="${pageContext.request.contextPath}/admin/index.jsp" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>智阅云联</b></span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>书虫补给站</b></span> </a> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top"> <nav class="navbar navbar-static-top"> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a > <img src="${pageContext.request.contextPath}/img/user1.jpg" class="user-image" alt="User Image"> <span class="hidden-xs">${USER_SESSION.name}</span> </a> </li> <li class="dropdown user user-menu"> <a href="${pageContext.request.contextPath}/userServlet?method=logout"> <span class="hidden-xs">注销用户</span> </a> </li> </ul> </div> </nav> </nav> </header> <!-- 页面头部 /--> <!-- 导航侧栏 --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- /.search form --> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu"> <li id="admin-index"> <a href="${pageContext.request.contextPath}/admin/index.jsp"> <i class="fa fa-dashboard"></i> <span><b>新书推荐</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=search" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>图书借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/bookServlet?method=searchBorrowed" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>当前借阅</b></span> </a> </li> <li> <a href="${pageContext.request.contextPath}/recordServlet?method=searchRecords" target="iframe"> <i class="fa fa-circle-o"></i> <span><b>借阅记录</b></span> </a> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- 导航侧栏 /--> <!-- 内容区域 --> <div class="content-wrapper"> <iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()" frameborder="0" src="${pageContext.request.contextPath}/bookServlet?method=selectNewbooks"></iframe> </div> </div> </body> </html>帮我优化一下这段代码
最新发布
06-19
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值