自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能

在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加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,你自己在添加一个

包裹住你想局部刷新的部分就行了!

最新文章

  1. HDU3466 Proud Merchants[背包DP 条件限制]
  2. xshell 语句
  3. curl post
  4. web.config 配置
  5. 转 makefile
  6. Saltstack pillar组件
  7. C语言面试
  8. 读&lt;jQuery 权威指南&gt;[5]-插件
  9. [php-src]窥探Php内核中的变量
  10. firefox与chrome中对select下拉框中的option支持问题
  11. Delphi 的 7zip 压缩算法
  12. Linux 和 Windows 下对long long的输出
  13. 智能家居项目(2):项目project框架的搭建
  14. 51 nod 1406 与查询
  15. js-图片预加载
  16. ReactRouter升级 v2 to v4
  17. 652. Find Duplicate Subtrees找出重复的子树
  18. jsp/servlet/mysql/linux基本概念和操作
  19. [COGS257]动态排名系统 树状数组套主席树
  20. vue中使用定时器时this指向问题

热门文章

  1. linux运维基础1
  2. camunda开源版与商业版的差异
  3. 【Spring】AOP实现原理(二):Advisor获取
  4. React中render Props模式
  5. 第六章、PXE高效网络装机、Kickstart无人值守安装
  6. TypeScript(7)泛型
  7. 从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)
  8. 【黑马pink老师的H5/CSS课程】(一)基本介绍
  9. resultMap自定义映射(一对多)
  10. nginx 日志按日期分隔