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

前端2年前 (2022)更新达西克

5.5K 0 0

前言

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

使用Pjax的优缺点

pjax优点

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

pjax缺点

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

开始使用

引入YUI的JS工具类

<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>

创建一个新的 Pjax 实例，container是当前页面需要被跳转后的页面替换调的元素。更多用法可参考后面的介绍
```
<script>
YUI().use('pjax', function (Y) {
 new Y.Pjax({container: '#content'});
});
</script>
```

在需要触发的超链接处加入”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>

以上就完成了一个简单的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或任何其他元素中提取标题，如果这更适合您正在加载的内容。