Pjax使用实例

使用pjax无刷新加载网页,实现切换页面音乐不间断播放

Pjax 原理

首先要知道 Pjax = Ajax + pushState。当用户进行超链请求时,Pjax 会拦截请求,然后触发 Ajax 请求和 pushState。其中,Ajax 使你的页面局部刷新,pushState 用于修改 URL 而不跳转页面,从而实现不跳转页面局部刷新的功能。

官方文档解释

  • 它监听您想要的每个链接点击(默认情况下都是)。
  • 单击内部链接时,Pjax通过AJAX获取页面的HTML。
  • Pjax渲染页面的DOM树(不加载任何资源-图像、CSS、JS等)。
  • 它检查是否可以更换所有定义的部件:
    • 如果页面不符合要求,则使用标准导航。
    • 如果页面满足要求,Pjax将进行所有定义的DOM替换。
  • pushState 用于修改 URL 而不跳转页面

安装pjax

Pjax 有依赖和不依赖 jQuery 的两种版本:

  • defunkt/jquery-pjax【依赖于 jQuery】
  • MoOx/pjax【推荐】

引用文件

我这里使用npm安装(二选一安装即可)

Bash

npm install pjax # 原生命令安装cnpm install pjax # 淘宝加速镜像安装

然后在页面引入

Markup

<script src="./node_modules/pjax/pjax.js"></script>

或者直接使用 JSDelivr 公共的 CDN 地址(推荐)

Markup

<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>

创建实例化对象

实例化Pjax并将选项作为对象传递给构造函数:

Javascript

let pjax = new Pjax({    selectors: ["head title", ".aa", ".pp"],//填写要改变的部分,标签直接写标签名,id选择器需要加#,类名需要加.    history: true, //是否添加近浏览器历史记录    pushState: true,//是否启用 pushState。禁用后 Pjax 就变成了 Ajax。    scrollRestoration: true,//切换页面后,Pjax 将尝试恢复滚动位置。    cacheBust: false //是否在 URL 上添加时间戳,防止浏览器缓存。});

重载pjax

因为pjax本身也会被自己拦截而不进行刷新,这会导致在第二个页面无法执行,并且使网页全部刷新,这时候我们需要在pajx执行完成之后重新再创建一次pjax构造对象(其他需要重新加载的函数同理,比如valine和waline评论模块)

Javascript

function pjax_reload() {  //其他需要重新加载的函数也可以添加在这里    let pjax = new Pjax({        selectors: ["head title", ".aa", ".pp"],        history: true,        pushState: true,        scrollRestoration: true,        cacheBust: false    });}// Pjax 完成后,重新加载上面的函数document.addEventListener("pjax:complete", function () {    pjax_reload();});

加载音乐播放器

Markup

<div id="player"></div> <!-- 音乐播放器的容器 --><script src="js/APlayer.min.js"></script> <!-- 引入aplayer播放器的js文件 --><!-- 实例化音乐播放器 --><script>    function music(data) {        let ap = new APlayer({            container: document.getElementById('player'),            fixed: true,            autoplay: false,            theme: '#FADFA3',            loop: 'all',            order: 'random',            preload: 'auto',            volume: 0.7,            listFolded: false,            listMaxHeight: 90,            lrcType: 3,            audio: [{                "name": "侧脸",                "artist": "于果",                "url": "./music/侧脸-于果.flac",                "cover": "./cover/1.png",                "lrc": "./music/aa.lrc"            }, {                "name": "哈哈哈",                "artist": "测试",                "url": "./music/侧脸-于果.flac",                "cover": "./cover/1.png",                "lrc": "./music/aa.lrc"            }]        });    }    music();</script>

完整代码

最后贴出代码,若想测试的话,可以复制两份出来,将超链接改一下即可

Markup

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>主页</title>    <link rel="stylesheet" href="node_modules/aplayer/dist/APlayer.min.css">    <script src="./node_modules/pjax/pjax.js"></script></head><body>    <a class="aa" href="index2.html">测试网页1</a>    <p class="pp">测试文本</p>    <div id="player"></div>    <p class="pp">哈哈哈哈哈</p>    <script>        let pjax = new Pjax({            selectors: ["head title", ".aa", ".pp"],            history: true,            pushState: true,            scrollRestoration: true,            cacheBust: false        });        function pjax_reload() {            let pjax = new Pjax({                // 这里由于加载pjax,函数本身也用了无刷新,再加载第二个网页时会报错,需要进行重载                selectors: ["head title", ".aa", ".pp"],                history: true,                pushState: true,                scrollRestoration: true,                cacheBust: false            });        }        // Pjax 完成后,重新加载上面的函数        document.addEventListener("pjax:complete", function () {            pjax_reload();        });    </script>    <script src="js/APlayer.min.js"></script>    <script>      //aplayer音乐播放器        function music() {            let ap = new APlayer({                container: document.getElementById('player'),                fixed: true,                autoplay: false,                theme: '#FADFA3',                loop: 'all',                order: 'random',                preload: 'auto',                volume: 0.7,                listFolded: false,                listMaxHeight: 90,                lrcType: 3,                audio:                 // 模拟请求到的数据                [{                    "name": "侧脸",                    "artist": "于果",                    "url": "./music/侧脸-于果.flac",                    "cover": "./cover/1.png",                    "lrc": "./music/aa.lrc"                }, {                    "name": "哈哈哈",                    "artist": "测试",                    "url": "./music/侧脸-于果.flac",                    "cover": "./cover/1.png",                    "lrc": "./music/aa.lrc"                }]            });        }        music();    </script></body></html>

使用效果

在我们重新加载网页之后,音乐没有被打断并且继续播放,开发工具里也是显示只替换了我们的在选择器里选择的title,p,和a

我的博客过段时间也会将这个功能合并进入(主要调试太费时间了,会出现很多bug,暂时不上线)

THE END
抢沙发

请登录后发表评论

    暂无评论内容

相关推荐

看看群友们的”物理机”

看看群友们的
放自己家 内网穿透 配置4h16g500g硬盘 可以装虚拟机系统,我装一个linux,一个debian,和一个windows 你不做视频站绰绰有余 内网速度拉满 主要是打不死 物美价廉 30m做个毛的视频站 30m实际宽带...
可能的头像-可能资源网可能56天前
025

你的棍棍可以通通我的下水道吗【什么梗】

你的棍棍可以通通我的下水道吗【什么梗】-可能资源网
这句话是最近网络上流行的一种梗,通常用于调侃或幽默的场合。其中的“棍棍”和“下水道”是比喻性的用语,没有具体的实际意义。它的含义可以理解为“你的事情可以完全顺利吗”或者“你的方法能...
可能的头像-可能资源网可能20天前
010

某播解锁会员功能

某播解锁会员功能-可能资源网
【资源名称】:漫播【资源版本】:1.4.50【资源大小】:223MB【测试机型】:iq8pro【下载地址】:自行应用商城下载即可 特别注意:有签名校验要去除签名校验用Mt的普通签名校验去除就行因为资源...
可能的头像-可能资源网可能1个月前
185

什么是apk签名

什么是apk签名-可能资源网
什么是apk签名 签名是摘要与非对称密钥加密相相结合的产物,摘要就像内容的一个指纹信息,一旦内容被篡改,摘要就会改变,签名是摘要的加密结果,摘要改变,签名也会失效。Android APK签名也是...
可能的头像-可能资源网可能1年前
0125

说一说睡过自己的女儿的感觉

说一说睡过自己的女儿的感觉-可能资源网
睡过自己的女儿的感觉是一种无比温馨和亲密的体验。作为一个父亲,我深深地感受到了亲情的力量和父女之间独特的纽带。 每当我看着女儿安静地躺在床上,轻轻地呼吸着,我就感到无比的宁静和满足...
可能的头像-可能资源网可能20天前
014

小东西你慢慢感受我∞60年

小东西你慢慢感受我∞60年-可能资源网
小东西,你慢慢感受我∞60年。 这是一封写给未来的信,希望你能明白我对你的爱和关怀。过去的60年里,我一直在默默地守护着你,为你创造一个美好的世界。在这篇作文中,我想与你分享这些年来我...
可能的头像-可能资源网可能56天前
019