| 发表日期：2014年09月05日 分类：网站搭建 标签：Html BuildWebsite |
本文描述如何在Github pages静态页面环境下实现动态的效果。
首先说明使用URL访问一个页面的三种方式：
http://thebestofyouth.com/category.html http://thebestofyouth.com/category.html?param=测试 http://thebestofyouth.com/category.html#param=测试
第二种是问号URL，表示给页面传递一个参数，参数名：param，参数值：测试
第三种是锚点URL，表示定位到页面的锚点位置，关于锚点：创建HTML锚点、W3Cschool：HTML链接
，需要说明的是页面中如果不存在此锚点并不会发生异常或错误。
动态页面一般是与后台进行交互的页面，比如jsp、asp、php，即想要实现动态效果，需要后台的支持。
而对于Github pages页面，其是静态页面，如果想要实现动态效果这怎么办呢？
###1，使用问号URL访问方式：?param=测试### 使用JS解析参数的办法如下：
var pageHref = window.location.href;
var pIndex = pageHref.indexOf('?param=');
var param = pageHref.substring(pIndex + 7);
刷新当前页面的代码：
location.href = window.location.href;
需要修改参数或值，则修改问号后面的参数及值即可。
经实践测试，这种方式在Chrome、FireFox下使用正常。
但是在IE下实现不了预期的动态效果，提示：We didn’t receive a proper request from your browser.
###2，使用锚点URL访问方式：#param=测试### 这种是锚点方式，如何解析参数呢，依然是使用JS解析参数：
var pageHref = window.location.href;
var pIndex = pageHref.indexOf('#param=');
var param = pageHref.substring(pIndex + 7);
那刷新当前页面是是不是如上面的方式一样呢：
location.href = window.location.href;
答案是否，带锚点的URL使用如上方式刷新不了页面，且会出现异常效果，可参考：location.href跳转当前页面锚点的问题。出现了这样的问题如何解决呢，答案很简单，即在当前页面不使用刷新本页面的方式，而是采用主动方法调用实现动态效果，如下：
parseParse('http://thebestofyouth.com/category.html?param=项目');
function parseParse(lHref) {
var pIndex = lHref.indexOf('#param=');
var param = lHref.substring(pIndex + 7);
}
本博客使用此种方式实现文章分类、文章标签下文章列表的动态加载，代码文件：param.js，效果可点击本博客右侧文章分类或文章标签进行查看。
特别提示：
Github pages环境下不可以使用jQuery的ajax函数，但可以使用getJSON函数，使用上面的方式并结合getJSON函数可以实现丰富的动态效果。