文章归档友情连接

通过history无刷新加载页面

分类:前端技术  作者:rming  时间:2016-03-14

好久不看前端的东西,最近发现个好玩的东西,通过history无刷新加载页面。

<h1>FIRST PAGE</h1>
<a href="javascript:void(0);" class="next">下一页</a>
<a href="javascript:void(0);" class="pre" style="display:none;">上一页</a>
<script type="text/javascript" src="http://www.miaoshoucdn.com/static/js/wap/zepto.min.js"></script>
<script type="text/javascript">
(function() {
var callUserFunc = function(obj, funcStr, params) {
var p = obj || window, that = p;
var f = (funcStr || '').split(".");
var params = (params instanceof Array) ? params : [];
while(f.length && (p = p[f.shift()])){
if(f.length===1)that = p;
};
typeof(p)==='function'&&p.apply(that, params);
}
var actions = {
hello: function(){
$('h1').html("FIRST PAGE");
$('.pre').hide();
$('.next').show();
}
}
window.addEventListener('popstate', function(e) {
console.log(e)
var ac = e.state && e.state.action ? e.state.action : '';
typeof(ac)=='string' && callUserFunc(window, ac);
}, false);
$('.next').click(function(event) {
$('h1').html("SECOND PAGE");
$(this).hide();
$('.pre').show();
history.replaceState({
action: 'actions.hello'
}, document.title);
history.pushState({}, document.title);
});
$('.pre').click(function(event) {
history.back();
});
})();
</script>

当然,也有成熟轮子,pjax,vuejs,react-native之类的,图简单的话,通过location.hash去写不同的页面也是极好的。
最近都是些不痛不痒的事情,blog长草了。



提交评论