|
<!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> |
|
|
|
function sync() { |
|
const queryString = document.getElementById("query").value; |
|
const hash = document.getElementById("hash").value; |
|
|
|
|
|
window.parent.postMessage({ |
|
queryString, |
|
hash, |
|
}, "https://huggingface.co"); |
|
} |
|
|
|
|
|
const initialQuery = window.location.search; |
|
const initialHash = window.location.hash; |
|
document.getElementById("initial-query").value = initialQuery ?? ""; |
|
document.getElementById("initial-hash").value = initialHash ?? ""; |
|
|
|
|
|
|
|
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> |
|
|
