[delve][web]如何实现网站顶部状态条的外部引用

来源：互联网发布：pr淘宝视频编辑：程序博客网时间：2024/06/06 04:15

REQUIREMENT

现在做的项目，网站顶部的状态条
登录前
这里写图片描述
登录以后

实现方法是HTML和JS，

<!--index.jsp 实现topbar的html--><div class="topbar" id="topbar"> <div class="head-left">   <ul>     <li ><a href="#" style="color:#5dbffc;">下载APP</a></li>     <li><a href="#">企业版<%=userLoginTag %></a></li>     <li><a href="#">人力资源版</a></li>   </ul></div> <div class="head-right" style="display: block;" id="logBar">  <ul>    <li><a href="cookieLogin.do">登录</a></li>    <li><a href="registerIndex.do">注册</a></li>  </ul> </div>  <div class="head-right" style="display: none;" id="logedBar">  <ul>    <li><a href="individualCenter.do?userid=<%=userid %>">个人中心</a></li>    <li><a href="clearLoginInformation.do">退出</a></li>  </ul> </div></div>

<!--index.jsp 实现topbar的js-->$(document).ready(function(){        var session = "${sessionScope.ls_Enterprise}";        if(session=="")            session = "${sessionScope.ls_Individual}";        if(session!=""){            $("#logBar").css("display","none");            $("#logedBar").css("display","block");        }     })

这个每个页面都有的东西。要是每个页面都加上面这些相同的HTML和js，工程量太大。
而且以后要修改到每个页面去修改的话就太累了，不好维护。
最好的办法是在每个页面都加上一个链接，链接到相同的文件。统一维护。

STEP

1、先把html提取出来，建立文件header.html，index.jsp只留两个div标签。

 <!--index.jsp--> <div class="topbar" id="topbar"> </div>

 <!--header.html--> <div class="head-left">   <ul>     <li ><a href="#" style="color:#5dbffc;">下载APP</a></li>     <li><a href="#">企业版<%=userLoginTag %></a></li>     <li><a href="#">人力资源版</a></li>   </ul></div> <div class="head-right" style="display: block;" id="logBar">  <ul>    <li><a href="cookieLogin.do">登录</a></li>    <li><a href="registerIndex.do">注册</a></li>  </ul> </div>  <div class="head-right" style="display: none;" id="logedBar">  <ul>    <li><a href="individualCenter.do?userid=<%=userid %>">个人中心</a></li>    <li><a href="clearLoginInformation.do">退出</a></li>  </ul> </div>

2、本来想通过iframe标签插入外部HTML代码，发现网上说iframe性能低¹，而且引用的header.html不能使用index.jsp的css，样式还得在header.html里设置，很蛋疼。
解决办法：
把index.jsp中的js代码提取出来，建立topbar.jsp。通过ajax获得外部html的内容。
（topbar.jsp的代码其实都是js，之所以后缀名是jsp，是因为代码中有使用el表达式对session进行判定²。用jsp后缀名即可使它先在服务器先运行一遍。）

//topbar.jsp$(document).ready(function() {    var htmlobj = $.ajax({        url : "common/html/header.html",        async : false,        cache : false    });    $("#topbar").html(htmlobj.responseText);    var session = "${sessionScope.ls_Enterprise}";    if (session == "")        session = "${sessionScope.ls_Individual}";    if (session != "") {        $("#logBar").css("display", "none");        $("#logedBar").css("display", "block");    }})

3、然后在index.jsp中引入外部js文件就可以，此时index.jsp中原先为了实现状态条的js和HTML都删光了，用下面一句就可以实现状态条的功能，而且多个网页引用同一个文件。可以在外部统一管理。

<!--index.jsp--><script type="text/javascript" src="${pageContext.request.contextPath}/common/js/topbar.jsp"></script>

4、最后将这一句代码放在其他需要实现状态条功能的网页里就可以了。

CITE

为什么要少用Iframe
http://www.williamlong.info/archives/3136.html
外部js使用El表达式
http://blog.csdn.net/priestmoon/article/details/7671203

0 0