Pixiv - KiraraShss
pjax实现网站无刷新加载
pjax实现网站无刷新加载
前言
一般情况下，当我们点击一个超链接，浏览器就会发送一次请求，然后将请求到的页面渲染出来，页面也就会刷新一次。
为了避免网页加载过慢白屏导致体验不好，我们可以使用pjax实现网站无刷新加载
当然，pjax 对vue等单页面无用，常用于多页面
原理
pjax=ajax+pushState,在用户点击超链接时，pjax会拦截请求，并发送ajax请求并使用pushState，使用ajax局部刷新页面，使用pushState修改url而不跳转页面，从而实现无刷新加载。
安装
pjax分为两个版本，jquery版和无jquery版 jquery版 无jquery版
npm引入
npm i pjaxcdn引入
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>使用
使用pjax，需要相同的dom结构
一般网站可分为header,main,footer,而<head></head>中的script,style和link一般是无需变化的。
也就是说pjax加载时只需要对title和main发生变化即可
const pjax = new Pjax({
selector:['title','#main']
})重载JS脚本
一般地，每个网页有单独的脚本，pjax在加载时不会让网页脚本从上到下再次执行，所以我们需要重载JS函数
document.querySelectorAll("script[data-pjax],.js-pjax script").forEach((item: any) => {
const newScript = document.createElement("script");
const content = item.text || item.textContent || item.innerHTML || "";
Array.from(item.attributes).forEach((attr: any) =>
newScript.setAttribute(attr.name, attr.value)
);
newScript.appendChild(document.createTextNode(content));
item.parentNode.replaceChild(newScript, item);
});