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

在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加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. Docker-Compose实现Mysql主从

    1. 简介 通过使用docker-compose 搭建一个主从数据库,本示例为了解耦 将两个server拆分到了两个compose文件中,当然也可以放到一个compose文件中 演示mysql版本:5 ...

  2. 在jupyternotebook中写C/C++

    在jupyter notebook中写C/C++,最大的好处就是不用写main()函数,直接调用写好的函数即可执行. #include<stdio.h> int sum(int a,int ...

  3. Citus 11 for Postgres 完全开源,可从任何节点查询(Citus 官方博客)

    Citus 11.0 来了! Citus 是一个 PostgreSQL 扩展,它为 PostgreSQL 添加了分布式数据库的超能力. 使用 Citus,您可以创建跨 PostgreSQL 节点集群透 ...

  4. 一次 MySQL 误操作导致的事故,「高可用」都顶不住了!

    这是悟空的第 152 篇原创文章 官网:www.passjava.cn 你好,我是悟空. 上次我们项目不是把 MySQL 高可用部署好了么,MySQL 双主模式 + Keepalived,来保证高可用 ...

  5. 安装ImageMagick7.1库以及php的Imagick扩展

    由于ImageMagick7以下不支持heic等图片格式,所以重新安装了ImageMagick7.1版本支持heic格式,并写此文章记录一下. 如果安装过程中遇到一些未知的错误,https://ima ...

  6. QT工程构建目录下,将生成的中间文件和可执行文件分离

    在QT工程中,当我们选择了构建目录后,编译生成程序后,总会发现在debug目录下会有混淆着各类文件,如下图 很多时候,我们又仅仅只需要可执行文件或者自定义的动态链接库.如下图 当然,如果不觉得麻烦,有 ...

  7. DAST 黑盒漏洞扫描器 第六篇:运营篇(终)

    0X01 前言 转载请标明来源:https://www.cnblogs.com/huim/ 当项目功能逐渐成熟,同时需要实现的是运营流程和指标体系建设.需要工程化的功能逐渐少了,剩下的主要工作转变成持 ...

  8. MySQL 锁常见知识点&面试题总结

    节选自 <MySQL 常见知识点&面试题总结> 表级锁和行级锁了解吗?有什么区别? MyISAM 仅仅支持表级锁(table-level locking),一锁就锁整张表,这在并发 ...

  9. 52 条 SQL 语句性能优化策略,建议收藏

    本文会提到 52 条 SQL 语句性能优化策略. 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在where及order by涉及的列上建立索引. 2.应尽量避免在where子句中对字段进行nul ...

  10. Docker容器搭建android编译环境

    Docker容器搭建android编译环境 目录 1 部署容器 1.1 手动部署 1.1.1 配置docker 1.1.2 启动容器 1.1.3 配置环境 1.2 Dockerfile 2 镜像管理 ...