假设现在有一个网页如下:
<p class="nav">
<ul>
<li data-page-name="a-page" data-page-href="a-page.html">
//当点击这个 li 标签时,p#a-page 显示,并在他的子 p.ajax-load- a-page当中载入 a-page.html。同时 url 改变为 example.com/a-page.html,并且前进后退可用。下同。
<li data-page-name="b-page" data-page-href="b-page.html">
//....
</ul>
</p>
<p id="a-page">
<p class="ajax-load-a-page">
//....
</p>
</p>
<p id="b-page">
<p class="ajax-load-b-page">
//....
</p>
</p>
现在我试用了 pushstate,但是只能改变地址的 url,前进后退也只改变 url 地址,内容没有改变。可能是没有绑定 popstate 的缘故,但不知道这部分的绑定代码应该怎么写?
补充一下,不必考虑IE
参考下面
http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html
http://inserthtml.com/demo/history/
参考cuelog.com这个站点,IE下也有效,
使用的 jquery.ba-hashchange 插件,
还有html5的
history.pushState
事件,IE下监听
$(window).on('hashchange', function(){});
事件。http://shaomeng95.iteye.com/blog/904259
看看我最近做的一个webApp:http://fulicat.com/lab/fj/#index 满足你说的需求么?
有一个pajax.可以看看