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

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

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

给网站添加pjax无刷新,换页音乐不中断的更多相关文章

  1. 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

  2. Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

  3. 黄聪:Pjax 无刷新开发web,更好用户体验

    什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...

  4. 整合pjax无刷新

    一:整合pjax的准备工作: 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 1.新浪CDN提速:<script type="text/javascri ...

  5. emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题

    想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...

  6. typecho开启pjax,ajax,无刷新

    1.引入jquery和pjax 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 https://files.cnblogs.com/files/fan-bk/pjax. ...

  7. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

  8. [Ajax] AJAX初体验之-在博客中添加无刷新搜索

    现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大 ...

  9. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

随机推荐

  1. Java系列之运算符

    运算符 算术运算符:+ (加).-(减) .*(乘)./(除).%(模).++(自增) . --(自减) 赋值运算符:= 关系运算符:>.<.>= <= == != insta ...

  2. WTM框架使用技巧之:CI/CD(持续集成/持续部署)

    1. 什么是WTM框架? 一个快速.灵活.社区活跃.最最最最高效的.netcore 后台管理系统.详见 https://wtmdoc.walkingtec.cn/ 欢迎大家付费支持WTMPlus,反哺 ...

  3. Linux yum搭建私有仓库

    搭建yum仓库需要两种资源: rpm包 rpm包的元数据(repodata) 搭建好仓库后需要使用三种网络协议共享出来 http或https ftp 范例: 使用http协议搭建私有仓库 (本示例使用 ...

  4. Python递归函数的定义和几个小例子

    递归函数 (1)什么是递归函数? 我们都知道,一个函数可以调用其他函数.如果这个函数在内部调用它自己,那么这个函数就叫递归函数. (2)递归函数的作用 举个例子,我们来计算阶乘 n! = 1 * 2 ...

  5. map集合中对应key的value为null处理办法

    问题: Map集合中对应key的value为null,但是现在需要将这个value转为Integer类型,这个value如果不是null,那么get到的是long类型或者是Bigdecimal类型 处 ...

  6. tauri+vue开发小巧的跨OS桌面应用-股票体检

    最近打算写一个用于股票体检的软件,比如股权质押比过高的股票不合格,ROE小于10的股票不合格,PE大于80的股票不合格等等等等,就像给人做体检一样给股票做个体检.也实现了一些按照技术指标.基本面自动选 ...

  7. 一个思维导图,带你深入理解 Linux 网络

    说明 思维导图 目录 内核接收网络包 内核与用户进程协作 内核发送网络包 TCP 连接 网络性能优化 GitHub 项目 说明 经朋友推荐发现一本好书:<深入理解 Linux 网络>,本文 ...

  8. 2022-7-14 java_2 第七组 刘昀航

    @ 目录 一.java约定规范 1.关于建包 2.控制台输入(Scanner) 关于Scanner的bug 计算器小练习: 二. 1.数组 建立数组的三种方式: 数据类型的初始值: 2.二维数组 使用 ...

  9. vivo官网APP全机型UI适配方案

    vivo 互联网客户端团队- Xu Jie 日益新增的机型,给开发人员带来了很多的适配工作.代码能不能统一.apk能不能统一.物料如何选取.样式怎么展示等等都是困扰开发人员的问题,本方案就是介绍不同机 ...

  10. for_in循环练习题_100到999之间的水仙花数

    水仙花数 153 == 3**3 + 5**3 + 1**3 点击查看笔者代码 for i in range(100, 1000): a = i % 10 b = i // 100 c = (i // ...