在分布式网站下统一网站头部以及尾部实践

分布模式下的网站，由于出于统一页面框架或者出于品牌的目的，常常让模式下的各个站点的头部以及尾部一致，当然最简单的办法，就是每个网站都嵌套同样代码的头部以及尾部，但这样有个坏处，维护的时候，要到各个站点都修改一遍，非常麻烦，这时我们希望各个站点都使用一个头部和尾部，这样一来，我们维护的时候就简单多了，省去了很多麻烦。说到此处，估计大家会想到使用Iframe，当然啦，在这种需求下，这种实现办法是最简单，也解决了各个系统使用一个头部和尾部的问题，但是这样实现就是最优了吗？不是，使用IFrame增加页面的复杂度，性能上增加了页面的负担（因为一个页面需要构造两个页面，多了两个请求，浏览器维护一个页面总比两个三个压力小点，还有对于头部尾部链接来说还有小麻烦，当然子站点在业务上需要修改一下链接上的文字或者地址，或者在链接被点击的时候需要加上一个自己的处理事件，这是无法做到的，因为跨域（由于是分布式的站点，域名可能就不一样了，子站点的js无法操作头部和尾部））基于这些原因，使用IFrame在一定程度上解决一部分问题，但没有彻底的解决了问题。那到底使用什么办法呢？

我使用的是Js输出头部和尾部。

说到这里，大家可能很迷惑，怎么输出呢？

简单来说是，每个需要使用头部和尾部的子站点的页面上都有一个JS链接指向用户认证中心，由认证中心生成JS返回，由于JS链接的SRC是跨域的，所以也就解决了跨域的问题。

返回的JS里边包含了输出头部和尾部的函数（使用Document.Write或其他方式也可以），在需要头部或尾部的地方，使用JS调用里边的输出函数输出即可。这样的话，得到的头部和尾部是和当前的网页一体的，省去了重新构造一个页面的麻烦。也由于此头部或尾部是和当前页面一体的，你可以使用JS进行任意操作，无论你怎么修改头部和尾部都行。

子站点页面（引入用户中心的头部JS）:

<script type="text/javascript" src=”http://www.用户中心.com/Head,aspx”></script>

在你需要头部的地方：

<script type="text/javascript">

         writeHead();//此函数为头部JS中的方法

</script>

用户中心的Head.ASPX实现：

function writeHead ()

{

         Document.Write(“用户中心头部”);

//使用Document.Write需要注意，此方法只能在页面构造时使用

}