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

Ourboke
Ourboke
Ourboke
16368
文章
148
评论
2022年1月14日10:35:33

我当时使用是因为想在博客中加入音乐播放器,然后因为超链接的跳转被影响到了,所以才想到了加入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方式的跳转了

 

历史上的今天
1月
14
Vue实现详情返回列表页记住滚动条位置 网站建设

Vue实现详情返回列表页记住滚动条位置

最近用 Vue 做移动端页面遇到一个问题,从列表页进入详情页,再返回到列表页,不管之前滚动到哪里,每次返回时都跳到列表最顶部。这样体验肯定不好,期望的应该是记住滚动条的位置,每次返回还是在原来的位置上...
Nginx开启gzip压缩的完整步骤记录 网站建设

Nginx开启gzip压缩的完整步骤记录

Nginx开启Gzip压缩功能,可以使网站的css、js 、xml、html文件在传输时进行压缩,提高访问速度,进而优化Nginx性能,下面这篇文章主要给大家介绍了关于nginx开启gzip压缩的相关...
python实现腾讯云轻量云流量超标自动关闭系统 网站建设

python实现腾讯云轻量云流量超标自动关闭系统

前几天在LOC上看到说良心云的轻量云流量超标后会额外扣超出的流量费,吓得我赶紧学着也弄了个脚本来监控轻量云,当流量超过自己设定的预警值后,自动关闭轻量云,避免超流量要付额外的流量钱。 但...