在分布式网站下统一网站头部以及尾部实践
分布模式下的网站,由于出于统一页面框架或者出于品牌的目的,常常让模式下的各个站点的头部以及尾部一致,当然最简单的办法,就是每个网站都嵌套同样代码的头部以及尾部,但这样有个坏处,维护的时候,要到各个站点都修改一遍,非常麻烦,这时我们希望各个站点都使用一个头部和尾部,这样一来,我们维护的时候就简单多了,省去了很多麻烦。说到此处,估计大家会想到使用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需要注意,此方法只能在页面构造时使用
}