开发者社区> 问答> 正文

如何使用 ajax 无刷新既改变网页地址(url)又能实现前进后退改变内容?

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

<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

展开
收起
a123456678 2016-07-29 10:53:37 2267 0
2 条回答
写回答
取消 提交回答
  • 我知道怎么实现的,请加我qq:501244162

    2019-07-17 20:01:40
    赞同 展开评论 打赏
  • 使用的 jquery.ba-hashchange 插件,
    还有html5的history.pushState事件,
    IE下监听 $(window).on('hashchange', function(){});事件。

    2019-07-17 20:01:40
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
WEB浏览器中即将发生的安全变化 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载