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

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

给网站添加pjax无刷新,换页音乐不中断 第2张插图

方法一

```<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>```

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

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

其中#pjax-container是你的局部刷新部分,你可能没有这个div,你自己在添加一个<div id="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>```

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

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

其中main是你的局部刷新部分,你可能没有这个div,你自己在添加一个<div id="main"></div>包裹住你想局部刷新的部分就行了!

测试(joe主题)

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

如index.php中引用的

```<!-- 列表 --> <?php $this->need('component/index.list.php'); ?> ```

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

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

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
如若转载,请注明出处:https://www.zxki.cn/3369.html

上一篇 2022-4-9 09:03
下一篇 2022-4-9 10:10

相关推荐

发表评论

为了防止灌水评论,登录后即可评论!

还没有评论,快来抢沙发吧!