发表日期: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函数可以实现丰富的动态效果。