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

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

时间2023-04-20 15:28:01发布访客分类CMS浏览659
导读:博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能,在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加pjax,于是又苦苦寻找并尝试了一番,最后发现网上实现pjax功能基本上是两种方法。方法一<script src="h...

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

方法一

script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js">
    /script>
    script src="https://cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js">
    /script>
    script>
    $(document).pjax('a[href^="{
$host}
"]:not(a[target="_blank"], a[no-pjax])', {
        container: '#pjax-container',        fragment: '#pjax-container',            timeout: 8000    }
    )/script>

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

解释一下上面代码:{ $host} 是zblog的自带函数,调用本站的首页地址!也就是只对本站的,并且没有_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> 包裹住你想局部刷新的部分就行了

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 给网站添加pjax无刷新,换页音乐不中断
本文地址: https://pptw.com/jishu/4034.html
亚马逊腾讯云服务器买哪个 亚马逊腾讯云服务器买哪个好 Zblog定时插件themeolds的详细使用方法

游客 回复需填写必要信息