Instantly share code, notes, and snippets.

vsajip/htmx-metadata.js

CreatedJune 25, 2023 05:02

Select an option
Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/vsajip/1dc77c7c4c8e217abdbd2cc3240bbf9e.js"></script>
Save vsajip/1dc77c7c4c8e217abdbd2cc3240bbf9e to your computer and use it in GitHub Desktop.

Clone this repository at <script src="https://gist.github.com/vsajip/1dc77c7c4c8e217abdbd2cc3240bbf9e.js"></script>

Save vsajip/1dc77c7c4c8e217abdbd2cc3240bbf9e to your computer and use it in GitHub Desktop.

Htmx swapping metadata

	htmx.on('htmx:beforeSwap',(htmxEvent)=>{
	letincomingDOM=newDOMParser().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
	letselector="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);
	}
	})
	});

Movatterモバイル変換