首页 > 其他分享 >给网站添加pjax无刷新,换页音乐不中断

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

时间:2022-08-21 20:11:07浏览次数:75  
标签:container pjax 局部 换页 刷新 main

自从博客加了悬浮音乐播放器后就一直在折腾换页音乐不中断的功能
在网上查找后发现想要实现换页音乐不中断的功能必须要为博客加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,你自己在添加一个
包裹住你想局部刷新的部分就行了!

标签:container,pjax,局部,换页,刷新,main
From: https://www.cnblogs.com/wdysblog/p/16610720.html

相关文章

  • QT——解决代码修改table表格数据后,界面内容内有刷新的问题
    ui.tableWidget_gongkuang->setItem(_index,2,newQTableWidgetItem(QString::number(_Beng_JinChuKou_ZongYaCha)));//总压差ui.tableWidget_gongkuang->vi......
  • ajax无刷新加载更多
    https://bbs.csdn.net/topics/390980134如题,我对网站的一个列表页进行无刷新加载更多。采用ajax请求页面然后加载到当前页下面!可是无论我怎么改都是只能加载第一页,......
  • 刷新页面不记住滚动位置
    在浏览器的默认行为中,会默认记住滚动位置,刷新后会回到之前的滚动位置,在一些场景中,会希望每次刷新都回到页面的最顶端。下面介绍下实现的方法。history.scrollRestorationA......
  • vue监听浏览器主动刷新
    mounted(){window.addEventListener('beforeunload',e=>this.beforeunloadHandler(e))//监听页面刷新触发事件},methods(){......
  • 若依 | 点击顶部 tag 标签不自动刷新
    需求场景之前:只要点击若依顶部的标签,页面都会自动刷新。问题:A页面有查询结果,切换到B页面查看信息,再切回A页面,则A页面的查询结果不会保留。需求:点击标签,页面不自......
  • Vue 刷新页面,重载页面数据
      业务场景当我们在对页面的数据进行增删改查结束后,页面的数据还是未操作之前的数据,手动刷新后才会渲染我们操作后的数据,那么有没有什么方法可以不用手动刷新,而重新获......
  • React hooks state刷新不及时
    状态  constView:React.FC=(props)=>{const[data,setDate]=useState<any[]>(0); console.log(data)//10 consthandleDiv=()=>{setDate(10);console......