音乐播放器插件因为切换页面就中断,有点烦呢。
为了实现点击其他页面音乐不暂停,网上搜搜,貌似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/