54 lines
1.9 KiB
JavaScript
54 lines
1.9 KiB
JavaScript
|
async function swap(url) {
|
||
|
|
const res = await fetch(url);
|
||
|
|
|
||
|
|
if (res.status !== 200) return;
|
||
|
|
if (!res.headers.get("content-type").startsWith("text/html")) return;
|
||
|
|
|
||
|
|
const text = await res.text();
|
||
|
|
const content = new DOMParser().parseFromString(text, "text/html");
|
||
|
|
|
||
|
|
const stylesheets = [...content.querySelectorAll("link[rel='stylesheet']")];
|
||
|
|
|
||
|
|
// swap title
|
||
|
|
document.title = content.title;
|
||
|
|
// swap body html
|
||
|
|
document.body.innerHTML = content.body.innerHTML;
|
||
|
|
// swap head html
|
||
|
|
document.head.innerHTML = content.head.innerHTML;
|
||
|
|
// swap stylesheets
|
||
|
|
// const old_sheets = document.head.querySelectorAll("link[rel='stylesheet']");
|
||
|
|
// stylesheets.forEach(stylesheet => { document.head.appendChild(stylesheet) });
|
||
|
|
// old_sheets.forEach(stylesheet => { stylesheet.remove(); });
|
||
|
|
// push history
|
||
|
|
window.history.pushState({}, "", url);
|
||
|
|
|
||
|
|
bind(document.body);
|
||
|
|
}
|
||
|
|
|
||
|
|
function bind(content) {
|
||
|
|
if (typeof(content) !== 'object' || content.nodeType !== Node.ELEMENT_NODE) return;
|
||
|
|
|
||
|
|
content.querySelectorAll("a[href]").forEach(element => {
|
||
|
|
if (element.href.includes("#")) return;
|
||
|
|
if (!element.href.startsWith(window.location.origin)) return;
|
||
|
|
const href = element.href.substring(window.location.origin.length);
|
||
|
|
if (href.includes(".")) return;
|
||
|
|
|
||
|
|
element.addEventListener("click", event => {
|
||
|
|
event.preventDefault();
|
||
|
|
swap(element.href);
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
content.querySelectorAll("[swap-url]").forEach(element => {
|
||
|
|
const href = element.attributes.getNamedItem('swap-url').value;
|
||
|
|
|
||
|
|
element.addEventListener("click", event => {
|
||
|
|
event.preventDefault();
|
||
|
|
swap(href);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
bind(document.body);
|