素材牛VIP会员
如何使用 ajax 无刷新既改变网页地址(url)又能实现前进后退改变内容?
 何***孽  分类:Html5  人气:775  回帖:5  发布于6年前 收藏

假设现在有一个网页如下:

<div class="nav">
    <ul>
        <li data-page-name="a-page" data-page-href="a-page.html">
         //当点击这个 li 标签时,div#a-page 显示,并在他的子 div.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>
</div>

<div id="a-page">
    <div class="ajax-load-a-page">
        //....
    </div>
</div>
<div id="b-page">
    <div class="ajax-load-b-page">
        //....
    </div>
</div>

现在我试用了 pushstate,但是只能改变地址的 url,前进后退也只改变 url 地址,内容没有改变。可能是没有绑定 popstate 的缘故,但不知道这部分的绑定代码应该怎么写?
补充一下,不必考虑IE

讨论这个帖子(5)垃圾回帖将一律封号处理……

Lv6 码匠
qi***un 技术总监 6年前#1

看看我最近做的一个webApp:http://fulicat.com/lab/fj/#index 满足你说的需求么?

Lv3 码奴
Jo***91 CEO 6年前#2

有一个pajax.可以看看

Lv2 入门
xi***iu JS工程师 6年前#3

参考cuelog.com这个站点,IE下也有效,
使用的 jquery.ba-hashchange 插件,
还有html5的history.pushState事件,
IE下监听 $(window).on('hashchange', function(){});事件。

Lv2 入门
zz***60 技术总监 6年前#4

http://shaomeng95.iteye.com/blog/904259

Lv4 码徒
朱***叶 UI设计师 6年前#5

参考下面

http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html

http://inserthtml.com/demo/history/

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取