javascript实现局部无刷新跳转,使用pjax方式跳转

前端 5个月前 达西克
3,680 0 0

前言

我当时使用是因为想在博客中加入音乐播放器,然后因为超链接的跳转被影响到了,所以才想到了加入pjax局部刷新。然后我这里说到的是一个集成了pjax的工具类(YUI
现在开始大概介绍下如何上手吧

使用Pjax的优缺点

pjax优点

  • 减轻服务端压力
  • 优化页面跳转体验

pjax缺点

  • 不支持一些低版本的浏览器(如IE系列)
  • 使服务端处理变得复杂

开始使用

  1. 引入YUI的JS工具类
  2. 创建一个新的 Pjax 实例,container是当前页面需要被跳转后的页面替换调的元素。更多用法可参考后面的介绍
    <script>
    YUI().use('pjax', function (Y) {
     new Y.Pjax({container: '#content'});
    });
    </script>
  3. 在需要触发的超链接处加入”yui3-pjax”的这个class
    <ol>
     <li><a href="page1.html" class="yui3-pjax">Page One</a></li>
     <li><a href="page2.html" class="yui3-pjax">Page Two</a></li>
     <li><a href="page3.html" class="yui3-pjax">Page Three</a></li>
    </ol>
  4. 以上就完成了一个简单的pjax方式的跳转了

pjax的配置

属性 类型 默认 描述
addPjaxParam 布尔值 true 如果true,“pjax=1”查询参数将附加到通过 Pjax 请求的所有 URL。浏览器在缓存内容时会忽略 HTTP 请求头,因此如果使用相同的 URL 请求部分 Pjax 页面和完整页面,浏览器会将它们缓存在相同的 key 下,并且稍后可能会在用户实际请求时加载缓存的部分页面整页(反之亦然)。为了防止这种情况,我们可以向 URL 添加一个虚假的查询参数,这样 Pjax URL 将始终与非 Pjax URL 分开缓存。
container 节点 null 通过 Pjax 加载页面时应插入内容的节点。该节点的现有内容将被删除,以便为新内容让路。如果未设置,加载的内容将不会自动插入到页面中。
contentSelector 细绳 null CSS 选择器用于提取通过 Pjax 加载的页面内容的特定部分。例如,如果您想加载页面example.html但只使用 id 为“pjax-content”的元素中的内容,contentSelector则应设置 为“#pjax-content”。如果未设置,将使用整个页面。
linkSelector 细绳 “a.yui3-pjax” 用于过滤链接点击事件的 CSS 选择器字符串,以便只有匹配它的链接才会应用 Pjax 的增强导航行为。当一个链接被点击并且该链接与这个选择器匹配时,Pjax 将尝试通过 Ajax 加载它。如果不支持 HTML5 历史记录,或者如果链接被中键单击、右键单击或在按下修饰键时单击,则浏览器将像处理任何旧链接一样处理链接单击。
navigateOnHash 布尔值 false 是否应增强导航到当前页面上的哈希片段标识符并navigate触发事件。默认情况下,当用户通过单击页内链接(例如Top of page)在页面内导航时,Pjax 允许浏览器执行其默认操作,并且不会尝试干扰或增强页内导航。
scrollToTop 布尔值 true 导航到 URL 后是否应将页面滚动到顶部。当用户点击浏览器的后退按钮时,将保持之前的滚动位置。
timeout 数字 30000 Ajax 请求应该超时的时间(以毫秒为单位)。当超时发生时,该error事件将被触发。
titleSelector 细绳 “title” CSS 选择器用于从通过 Pjax 加载的页面内容中提取页面标题。默认情况下,这设置为从title元素中提取标题,但您可以自定义它以从h1或任何其他元素中提取标题,如果这更适合您正在加载的内容。
阿里云爆款特惠服务器
版权声明:达西克 发表于 2022年 9月 18日 pm7:03。
转载请注明:javascript实现局部无刷新跳转,使用pjax方式跳转 | 达西克

相关文章

暂无评论

暂无评论...