• 游啊游
  • 信仰
  • 原点
  • 清明
  • 关不上的窗
  • 雨一直下-古筝
  • 你的样子
  • Sofía
  • Suddenly
  • Traveling Light
  • 城南花已开
  • 简单与秋夜
  • 最美的期待
Oo笑容太甜oO/

试水pjax


音乐播放器插件因为切换页面就中断,有点烦呢。

为了实现点击其他页面音乐不暂停,网上搜搜,貌似pjax可以实现,但是对于小白,pjax不懂啊o(╥﹏╥)o

晚上按网上资料试了试,居然OK了。过程如下:

一、引入jquery和jquery-pjax脚本

在标签内引入

<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-pjax@2.0.1/jquery.pjax.js" type="text/javascript"></script>
</head>

二、接管网站container容器内所有a标签跳转

注意我们这里不需要后台的话,记得一定要添加fragment指定为pjax容器

本主题
在之前加入以下代码:

<script type="text/javascript">
$(document).pjax('a[target!=_blank]', '#container', {fragment: '#container',timeout: 8000});
</script>

监控所有target!=_blank的链接,采用pjax更新链接页面中id为container的容器内容到本页面中id为container的容器中。若获取内容时间超过8秒,则直接跳转。

三、需要局部刷新的,

包裹在里面

<div id="container">……<div>

当然,音乐播放器要在container外面
然后就搞定了。

四、重新加载某些pjax导致未加载的js

某些插件例如代码高亮插件未加载,于是加上以下代码重新载入prism.js文件

 $(document).on('pjax:complete', function() {
        if(typeof prism == 'undefined'){
            $.getScript("***/prism.js");
        }
    });

后来发现这样页面切换次数多了就卡,于是换成这样:

<script type="text/javascript">
 $(document).on('pjax:complete', function() {
        self.Prism.highlightAll(event);
    });
</script>

就这样开启了全站pjax无刷新么?!手动狗头

https://www.jianshu.com/p/557cad38e7dd
https://keisawaakira.github.io/_posts/2020-06-01-pjax/
https://liuyib.github.io/2019/09/24/use-pjax-to-your-site/

暂无评论