给网站添加pjax无刷新,换页音乐不中断
自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能
在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加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无刷新,换页音乐不中断的更多相关文章
- 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- Pjax无刷新跳转页面实现,支持超链接与表单提交
什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...
- 黄聪:Pjax 无刷新开发web,更好用户体验
什么Ajax.Pjax.Njax...神马玩意? 有Njax吗? 木有...不过真有Pjax!! 其实pjax就是用到了html5的新history api: pushState和replaceSta ...
- 整合pjax无刷新
一:整合pjax的准备工作: 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 1.新浪CDN提速:<script type="text/javascri ...
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- typecho开启pjax,ajax,无刷新
1.引入jquery和pjax 检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入 https://files.cnblogs.com/files/fan-bk/pjax. ...
- jquery 无刷新添加/删除 input行 实时计算购物车价格
jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...
- [Ajax] AJAX初体验之-在博客中添加无刷新搜索
现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大 ...
- 使用 pjax 实现无刷新切换页面
一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...
随机推荐
- 七牛云创建存储空间并绑定自定义域名-https协议
七牛云创建存储空间并绑定自定义域名-https协议 一.准备 0.绑定自定义域名的前提:你起码拥有过一个备案过的域名[一级域名] 1.在七牛云创建一个存储空间 2.存储空间绑定自定义域名(cdn加速) ...
- 我大抵是卷上瘾了,横竖睡不着!竟让一个Bug,搞我两次!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言:一个Bug 没想到一个Bug,竟然搞我两次! 我大抵是卷上瘾了,横竖都睡不着,坐起来 ...
- 告别单调,Django后台主页改造 - 使用AdminLTE组件
前言 之前我做了个Django的项目,为了让管理后台更加美观,我对Django(应该说是SimpleUI的)默认的Admin后台主页进行改造,具体可以看这篇文章:项目完成 - 基于Django3.x版 ...
- bat-注册表修改win11右键风格
展开:reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32&q ...
- Python selenium 实现大麦网自动购票过程
一些无关紧要的哔哔: 大麦网是中国综合类现场娱乐票务营销平台,业务覆盖演唱会. 话剧.音乐剧.体育赛事等领域今天,我们要用代码来实现他的购票过程 开搞! 先来看看完成后的效果是怎么样的 开发环境 版 ...
- Windows 启动过程
引言 启动过程是我们了解操作系统的第一个环节.了解 Windows 的启动过程,可以帮助我们解决一些启动的问题,也能帮助我们了解 Windows 的整体结构. 以下内容将分为[加载内核].[内核初始化 ...
- Java已知图片路径下载图片到本地
public static void main(String[] args) { FileOutputStream fos = null; BufferedInputStream bis = null ...
- Mybatis-Plus介绍
Mybatis-Plus介绍 Mybatis-Plus概念 Mybatis-Plus介绍 官网https://mybatis-plus/或https://mp.baomidou.com/ mybati ...
- P1494 小Z的袜子 莫队
题干 就是将$add$和$del$函数里的$ans$变化变成组合数嘛, 先预处理出$x$只相同袜子一共有$f[x] = 1+2+...+$$(x-1)$种组合, 要注意,由于$f[x]$是一直加到$x ...
- Linux系统安全与应用
补充:重定向 类型 操作符 ...