Spaces:

whitphx
/

static-url-param-sync-example

Running

App Files Files Community

static-url-param-sync-example / index.html

whitphx

Update comment

904843c about 2 years ago

raw

history blame contribute delete

1.98 kB

	<!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>