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

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>

JS

<!--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