Oo笑容太甜oO/

试水pjax


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

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

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

一、引入jquery和jquery-pjax脚本

在<head>标签内引入

<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容器

本主题
在</footer>之前加入以下代码:

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

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

三、需要pjax方式局部刷新的,用<div id="container">……<div>包裹

当然,音乐播放器要在<div id="container">……<div>之外。然后就搞定了。

四、重新加载某些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无刷新么?!手动狗头