Skip to content

Instantly share code, notes, and snippets.

@croxton

croxton/htmx-metadata.js

Created October 13, 2022 13:46
Show Gist options
  • Save croxton/8a12a19e10f3b8a395d5546ff070aa93 to your computer and use it in GitHub Desktop.
Save croxton/8a12a19e10f3b8a395d5546ff070aa93 to your computer and use it in GitHub Desktop.
Download ZIP
Htmx swapping metadata
Raw
htmx-metadata.js
htmx.on('htmx:beforeSwap', (htmxEvent) => {
let incomingDOM = new DOMParser().parseFromString(htmxEvent.detail.xhr.response, "text/html");
// Transpose <meta> data, page-specific <link> tags and JSON-LD structured data
// Note that hx-boost automatically swaps the <title> tag
let selector = "head > meta:not([data-revision]), head *[rel=\"canonical\"], head *[rel=\"alternate\"], body script[type=\"application/ld+json\"]";
document.querySelectorAll(selector).forEach((e) => {
e.parentNode.removeChild(e);
});
incomingDOM.querySelectorAll(selector).forEach((e) => {
if (e.tagName === 'SCRIPT') {
document.body.appendChild(e);
} else {
document.head.appendChild(e);
}
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment