给网站添加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>
将以上代码放入页脚文件foot.php或者footer.php文件的最下面。
解释一下上面代码: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 时需要被替换的元素或容器,一条一个 C++SS 选择器,数组形式
selectors: [
\"title\",
\"meta[name=description]\", // 如果是全部 meta 替换的话,只需要写 meta
\"main\"
],
cacheBust: false
})
</script>
和第一种方法一样,将以上代码放入页脚文件foot.php或者footer.php文件的最下面。
局部刷新的区域是main的部分!
其中main是你的局部刷新部分,你可能没有这个div,你自己在添加一个
包裹住你想局部刷新的部分就行了!
测试(joe主题)
两种方法我这边都测试过了,最终第二种方法是成功的,然后由于我主题的特殊性,在成功之后出现跳转页面后出现内容显示不完全的BUG,解决的方法是把index.php文件和post.php文件中主体部分所有引用页面的部分全部都放在放在各自的页面里面。
如index.php中引用的
<!-- 列表 -->
<?php $this->need(\'component/index.list.php\'); ?>
就把component/index.list.php文件里的所有代码全部复制到index.php文件的下面即可。
由于joe主题引用的文件实在是太多,其实是懒得弄所以就此搁置!有兴趣的话自己可以尝试下。
1. 本站所有资源来源于网络,分享目的仅供大家学习和交流! 2. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 3. 本站提供的资源,都不包含技术服务请大家谅解! 4. 如有链接无法下载、失效或广告,请联系站长处理!
再次声明:如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
92源码网 » 给网站添加pjax无刷新,换页音乐不中断
常见问题FAQ
- 本站下载资源解压密码是什么?
- 本站所有资源解压密码均为www.92luntan.com(92luntan.com)或者www.jiuerym.com(jiuerym.com)
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
