前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给网站添加pjax无刷新,换页音乐不中断

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

作者头像
老K博客
发布2023-12-18 15:50:16
2090
发布2023-12-18 15:50:16
举报
文章被收录于专栏:老K博客

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

方法一

代码语言:javascript
复制
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
})

将以上代码放入页脚文件 foot.php 或者 footer.php 文件的最下面。

解释一下上面代码: siteUrl()?> 是typecho的自带函数,调用本站的首页地址!也就是只对本站的,并且没有 _blank 属性的,标签里不含 no-pjax 的链接实行pjax!局部刷新的区域是#pjax-container的部分!

其中 #pjax-container 是你的局部刷新部分,你可能没有这个div,你自己在添加一个

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

方法二

代码语言:javascript
复制
var pjax = new Pjax({
  elements: "a",
  // 在页面进行 PJAX 时需要被替换的元素或容器,一条一个 CSS 选择器,数组形式
  selectors: [
    "title",
    "meta[name=description]", // 如果是全部 meta 替换的话,只需要写 meta
    "main"
  ],
  cacheBust: false
})

和第一种方法一样,将以上代码放入页脚文件foot.php或者footer.php文件的最下面。

局部刷新的区域是main的部分!

其中main是你的局部刷新部分,你可能没有这个div,你自己在添加一个

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

测试(joe主题)

两种方法我这边都测试过了,最终第二种方法是成功的,然后由于我主题的特殊性,在成功之后出现跳转页面后出现内容显示不完全的BUG,解决的方法是把index.php文件和post.php文件中主体部分所有引用页面的部分全部都放在放在各自的页面里面。

如index.php中引用的

代码语言:javascript
复制
need('component/index.list.php'); ?>

就把component/index.list.php文件里的所有代码全部复制到index.php文件的下面即可。

由于joe主题引用的文件实在是太多,其实是懒得弄所以就此搁置!有兴趣的话自己可以尝试下。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023年10月24日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法一
  • 方法二
  • 测试(joe主题)
相关产品与服务
腾讯云服务器利旧
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档