index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Static Space URL sync example</title>
	</head>
	<body>
		<div>
			<h2>Sync the query string and the hash to the parent page URL</h2>
			<label for="">
				Query string
				<input type="text" id="query">
			</label>
			<label>
				Hash
				<input type="text" id="hash">
			</label>
			<button onclick="sync()">Sync</button>
		</div>

		<div>
			<h2>Read the initial query and hash</h2>
			<label>
				Initial query
				<input type="text" readonly id="initial-query">
			</label>
			<label>
				Initial hash
				<input type="text" readonly id="initial-hash">
			</label>
		</div>

		<div>
			<h2>Read the hash reactively</h2>
			<input type="text" readonly id="read-hash-reactive">
		</div>

		<script>
			// Sync query and hash from this embedded app to the parent page URL.
			function sync() {
				const queryString = document.getElementById("query").value;
				const hash = document.getElementById("hash").value;

				// HF Spaces' spacial message type to update the query string and the hash in the parent page URL
				window.parent.postMessage({
					queryString,
					hash,
				}, "https://huggingface.co");
			}

			// Read the initial query and hash.
			const initialQuery = window.location.search;
			const initialHash = window.location.hash;
			document.getElementById("initial-query").value = initialQuery ?? "";
			document.getElementById("initial-hash").value = initialHash ?? "";

			// Read the updated hash reactively.
			// Note: there is no way to capture the query string update like this because updating query string causes page-reload (ref: https://stackoverflow.com/a/4291024).
			window.addEventListener("hashchange", (event) => {
				console.log("hash change event", event);
				const currentHash = window.location.hash;
				document.getElementById("read-hash-reactive").value = currentHash;
			});
		</script>
	</body>
</html>