音乐播放器
kwnote
 
文章 标签
17

萌ICP备20221235号 | Theme: Fog
载入天数...
载入时分秒...
总访问量:  |   访问人数:

给网站添加pjax无刷新,换页音乐不中断

  热度: loading...

自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能
在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番
最后发现网上实现pjax功能基本上是两种方法。

方法一

  • 第一种方法是来自大佬友人C的博客。
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
})
</script>

将以上代码放入页脚文件的最下面。

解释一下上面代码:siteUrl()?>是typecho的自带函数,调用本站的首页地址!也就是只对本站的,并> 且没有_blank属性的,标签里不含no-pjax的链接实行pjax!局部刷新的区域是#pjax-container的部分!
其中#pjax-container是你的局部刷新部分,你可能没有这个div,你自己在添加一个
包裹住你想局部刷新的部分就行了!

方法二

  • 第二种方法是来自大佬保罗的小宇宙的博客。
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
<script>
var pjax = new Pjax({
  elements: "a",
  // 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
  selectors: [
    "title",
    "meta[name=description]", // 如果是全部 meta 替换的话,只需要写 meta
    "main"
  ],
  cacheBust: false
})
</script>

同上

局部刷新的区域是main的部分!
其中main是你的局部刷新部分,你可能没有这个div,你自己在添加一个
包裹住你想局部刷新的部分就行了!