本文来自发哥,此方法使用了html5的pushState和onpopstate,支持浏览器前进后退按钮并且无刷新改变url。需要有一定基础的童鞋才可操作~
pushState使用方法
var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);
onpopstate使用方法
window.addEventListener('popstate', function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); } }, false);
如何应用到WordPress?
首先我们需要对后端进行处理,使除了当前使用ajax可以无刷新浏览外,还可以直接请求改变的URL后也可以正常浏览。方法是对使用pushState的ajax发送一个特殊的头,当后端获取到的时候通用的部分不再输出~
感谢mufeng提供的技术支持。
大致代码如下,具体根据主题不同可以略微有差别,编辑index.php,改成如下结构
<?php if(isset($_GET["action"]) && $_GET["action"] == "ajax_postsss"){ nocache_headers();?> .....文章内容.... <?php }else{ get_header() ; ?> .....文章内容.... <?php get_sidebar() ;?> <?php get_footer() ;?> <?php }?>
在引用JQ库的情况下使用此代码实现:
jQuery(document).ready(function(a) { var n = null, H = false, i = document.title, t, h = window.opera ? document.compatMode == "CSS1Compat" ? a("html") :a("body") :a("html,body"); if (window.history && window.history.pushState) { a(document).on("click", ".content-page a", function(b) { b.preventDefault(); if (n == null) { t = { url:document.location.href, title:document.title, html:a("#content").html(), top:h.scrollTop() }; } else { n.abort(); } t.top = h.scrollTop(); var q = a(this).attr("href").replace("?action=ajax_postsss", ""); a(".content-page").text("\u6587\u7ae0\u52a0\u8f7d\u4e2d\x2e\x2e\x2e"); n = a.ajax({ url:q + "?action=ajax_postsss", success:function(v) { H = true; var state = { url:q, title:i, html:v }; history.pushState(state, i, q); document.title = i; h.animate({ scrollTop: 0 }, 0); a("#content").html(v); } }); return false; }); window.addEventListener("popstate", function(i) { if (n == null) { return; } else { if (i && i.state) { H = true; document.title = i.state.title; a("#content").html(i.state.html); } else { H = false; document.title = t.title; a("#content").html(t.html); h.animate({ scrollTop: t.top }, 0) } } }); } });
#content 标签要包含文章列表和翻页导航,.content-page a 是翻页标签
暂时用不到,把网站尽量精简吧
哎呀呀,搜什么总能跳到这来(表情在哪2333)
@Fefa =w=表情已开
@WP酷![[织] [织]](http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/41/zz2_org.gif)
研究了一个晚上了,还是无法实现,我刚好就是使用mufeng的模版,能帮忙实现一下吗?我想要分页ajax效果。折腾一直没成功…