• 几种方法实现ajax请求内容时使用浏览器后退和前进功能


    ajax是一个非常好玩的小东西,不过用起来也会存在一些问题。

    我们可以利用ajax进行无刷新改变文档内容,但是没办法去修改URL,即无法实现浏览器的前进与后退、书签的收藏功能。

    利用location的hash部分和使用window.onhashchange来实现

    hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123。当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。

    通过window.onhashchange事件来监听hash值的更改。

    ie6、7均不支持onhashchange,但可以用setInterval定期检查hash的改变,或者onload中检查的方法

    曾今经典场景:Gmail借助ifram和hash实现前进和后退功能

    而这样的方式对搜索引擎是十分不友好的,twitter和google约定使用hash bang (#!xxx),也就是hash后面的第一个字符为感叹号,这样的网址他们是会爬取的,但是其他搜索引擎不支持。

    html5的history

    在HTML4,Histroy对象有下面属性方法:

    • length:历史堆栈中的记录数。
    • back():返回上一页。
    • forward():前进到下一页。
    • go([delta]):delta是个数字,如果不写或为0,则刷新本页;如果为正数,则前进到相应数目的页面;若为负数,则后退到相应数目的页面。

    在HTML5中,新增了两个方法:

    • pushState(data, title [, url]):往历史堆栈的顶部添加一条记录。data为一个对象或null,它会在触发window的popstate事件(window.onpopstate)时,作为参数的state属性传递过去;title为页面的标题,但当前所有浏览器都忽略这个参数;url为页面的URL,不写则为当前页。
    • replaceState(data, title [, url]):更改当前页面的历史记录。参数同上。这种更改并不会去访问该URL。

    查看张鑫旭大神写的例子
    具体场景实用解析http://www.cnblogs.com/accordion/p/5699372.html#top

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    replaceState, pushState 5 4.0 (2.0) 10 11.50
    history.state 18 4.0 (2.0) 10 11.50

    三、开源的PJAX库

    并不是页面中所有的链接都需要使用PJAX加载,所有在需要这个东西的a标签上加一个属性,如data-pjax=true,然后统一添加事件。

  • 相关阅读:
    python中特殊参数self的作用
    python中类的初始化案例
    python中类的调用
    Python--网络编程-----struct模块的字节数限制
    Python--网络编程-----解决粘包问题-简单版
    Python--网络编程-----粘包的底层原理分析
    Python--网络编程-----粘包现象
    Python--网络编程-----socket编程示例--模拟ssh远程执行命令
    pycharm下 os.system执行命令返回有中文乱码
    Python--网络编程-----socket编程示例--打电话--加上链接循环
  • 原文地址:https://www.cnblogs.com/wkyseo/p/5880882.html
Copyright © 2020-2023  润新知