在开发过程中，为了避免每个页面要做头部底部，就想怎么实现页面无刷新，局部实现效果更换方案
第一联想到了ajax读取页面没然后页面局部替换，在页面上准备几个div。这里就简单粗暴的分成3个部分，（直接贴代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无刷新方案 一</title> <link rel="stylesheet" href="http://css.baojia.com/s4/c/css/reset.css"> <style type="text/css"> body{width: 80%;margin: 0 auto} ul { margin: 0 auto; overflow: none} /*ul li {float: left; background: #ccc;padding: 15px 20px;}*/ ul li {display: inline-table; background: #ccc;padding: 15px 20px; } ul li:nth-of-type(1){ margin-left: 0px } /*ul li {display: inline-table; background: #ccc;padding: 15px 20px;}*/ ul li a{color: #f0f0f0;} #pageHeader{background-color: green} #pageMain{width: 900px; margin: 0 auto; margin-top: 200px} #pageFooter{background-color: red} </style> </head> <body> <div id="pageHeader"> </div> <div id="pageMain"></div> <div id="pageFooter"></div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="../js/core.pss.js" type="text/javascript"></script> <script type="text/javascript"> </script> </html>
准备一个简单的头部（“#pageHeader”）代码，直接几个跳转就可以。保留了a标签，是为了交给后端程序员可以直接用。
<ul> <li><a href="page1.htm">页面1</a></li> <li><a href="page2.htm">页面2</a></li> <li><a href="page3.htm">页面3</a></li> <li><a href="page4.htm">页面4</a></li> <li><a href="page5.htm">页面5</a></li> <li><a href="page6.htm">页面6</a></li> </ul>
其实上面保留了a标签带来了更多的代码量，但是为了让我们的输出高质量，就辛苦一下自己。这时候增加的代码量是 拦截页面的a标签跳转功能。 几行代码就搞定，这样不影响phpcoder开发
obj.find('a[href!="#"]').bind("click", function(e) {
e.preventDefault();
loadUrl($.mainContent,$(e.currentTarget).attr("href"),true,true);
return false;
});
obj.find('a[href="#"]').bind("click", function(e) {
e.preventDefault();
return false;
});
拦截url hash并实现页面分发，主要的js
/***** * @liubaing */ $.defaultPage = "page1.htm"; $.subPagesDirectory = ""; $.headUrl = "public/header.htm"; $.footUrl = "public/footer.htm"; $.page404 = "error/index.htm"; $.headContent = $("#pageHeader"); $.mainContent = $("#pageMain"); $.footContent = $("#pageFooter"); /** delete A gourl **/ function removeA(cname) { if (cname == undefined || cname == "") return; var obj = (typeof cname == "object") ? cname : $("." + cname); obj.find('a[href!="#"]').bind("click", function(e) { e.preventDefault(); loadUrl($.mainContent,$(e.currentTarget).attr("href"),true,true); return false; }); obj.find('a[href="#"]').bind("click", function(e) { e.preventDefault(); return false; }); } function loadUrl(obj,gourl,ishash,isactive) { if (!gourl || gourl == "" || gourl == null) { alert("跳转页面详细"); return; } if(isactive){ $(".navbar li").removeClass("active"); $('.navbar li:has(a[href="' + gourl + '"])').addClass("active"); } $.ajax({ isLocal:true, type: "GET", url: gourl, dataType: "html", cache: !1, async: !1, beforeSend: function() {}, success: function(data) { obj.html(data); if(ishash) window.location.hash = gourl; removeA(obj); return false; }, error: function() { alert("页面" + $.subPagesDirectory + gourl + "还未实现！"); return false; } }) } /** delete A gourl **/ function removefA(cname) { if (cname == undefined || cname == "") return; var obj = (typeof cname == "object") ? cname : $("." + cname); obj.find('a[href!="#"]').bind("click", function(e) { e.preventDefault(); loadfile($.mainContent, $(e.currentTarget).attr("href"),true,true); return false; }); obj.find('a[href="#"]').bind("click", function(e) { e.preventDefault(); return false; }); } function loadfile(obj,path,ishash,isactive) { $.ajax({ type: "GET", url:filepath+path, dataType: "html", cache: !1, async: !1, beforeSend: function() {}, success: function(data) { obj.html(data); if(ishash) window.location.hash = path; removefA(obj); return false; }, error: function() {} }) } var filepath ="" $(document).ready(function(e) { console.log(location.protocol) if (location.protocol != "file:") { var url = location.hash.replace(/^#/, ""); url = (url != "" && url.length > 2 ? url : $.defaultPage); loadUrl($.headContent,$.headUrl,false,false); loadUrl($.mainContent,url,true,true); loadUrl($.footContent,$.footUrl,false,false); }else{ filepath =location.href.substring(0, location.href.lastIndexOf("/")+1) loadfile($.headContent,$.headUrl,false,false); loadfile($.mainContent,$.defaultPage,true,true); loadfile($.footContent,$.footUrl,false,false); } });
再加上几个测试页面
测试页面1
<div>我是测试面试页面1</div>
测试页面2 page2.htm，里面加了一个跳转，因为我们已经拦截a标签的跳转，所以我们也能实现hash跳转
<a href="page1.htm">跳转到第一页</a> <div class="">测试页面 二 ：测试页面引用css 应该有效</div> <div class="test3">我是页面2样式3</div>
测试页面3 page3.htm page3.css 引入了一个外链css文件，这里要重点说明一下。我们在这里引入了css3，页面顺利加载了page3.css文件,page3.htm 的样式得以改变，
紧接着我们再回到page2.htm.但是刚才的page3.css的样式没影响到page2.htm。这里是个要注意的问题了，说明样式文件是会被自动移除的，这和页面的样式表重新渲染相符。
<link rel="stylesheet" href="../css/page3.css"> <div class="">测试页面 三 ：测试外链页面引用css 应该有效</div> <div class="test3">我就是test外链css</div>
.test3{display: block; width: 170px;height: 200px;background-color: #fb9876}
测试页面4 page4.htm。 这里直接进来可以顺利触发fun4的方法
<script type="text/javascript">
function fun4 (argument) {
// body...
console.log("this method come from page 4")
}
</script>
<div class="">测试页面四 ：测试页面引用JS 应该有效</div>
测试页面5 page5.htm 这里可以顺利执行document.body.onload方法 且执行本页的 $(function(){})方法体
<script type="text/javascript"> $(function(){ console.log("this is test 5") }) </script> <div class="">测试页面五 ：测试内页引用JS （$(function(){})） 应该有效</div>
测试页面6 page6.htm page6.js
<script src="../js/page6.js" type="text/javascript"></script> <div class="">测试页面六 ：测试外链引用 应该有效</div> <script type="text/javascript"> fun4(); fun6(); </script>
function fun6(){
alert("this is from 666666666666666")
}
最后你会发现，文件不管是外链js 还是内页js, 都会被存放在 index.htm。这可能会带来一些不好跟踪的问题
在做这个时候的时候可以脑补一下 htm页面渲染过程css和js的加载流程。
也顺便发现了一下其他该注意的问题
1、inline-table inline-block 4px间距问题
2、ajax读取本地文件设置问题