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