whitphx HF staff commited on
Commit
9f854a8
1 Parent(s): b9c5a8f

Add examples of reading the initial query and hash and reading the updated hash

Browse files
Files changed (1) hide show
  1. index.html +43 -9
index.html CHANGED
@@ -6,17 +6,38 @@
6
  <title>Static Space URL sync example</title>
7
  </head>
8
  <body>
9
- <label for="">
10
- Query string
11
- <input type="text" id="query">
12
- </label>
13
- <label>
14
- Hash
15
- <input type="text" id="hash">
16
- </label>
17
- <button onclick="sync()">Sync</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
 
19
  <script>
 
20
  function sync() {
21
  const queryString = document.getElementById("query").value;
22
  const hash = document.getElementById("hash").value;
@@ -27,6 +48,19 @@
27
  hash,
28
  }, "https://huggingface.co");
29
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  </script>
31
  </body>
32
  </html>
 
6
  <title>Static Space URL sync example</title>
7
  </head>
8
  <body>
9
+ <div>
10
+ <h2>Sync the query string and the hash to the parent page URL</h2>
11
+ <label for="">
12
+ Query string
13
+ <input type="text" id="query">
14
+ </label>
15
+ <label>
16
+ Hash
17
+ <input type="text" id="hash">
18
+ </label>
19
+ <button onclick="sync()">Sync</button>
20
+ </div>
21
+
22
+ <div>
23
+ <h2>Read the initial query and hash</h2>
24
+ <label>
25
+ Initial query
26
+ <input type="text" readonly id="initial-query">
27
+ </label>
28
+ <label>
29
+ Initial hash
30
+ <input type="text" readonly id="initial-hash">
31
+ </label>
32
+ </div>
33
+
34
+ <div>
35
+ <h2>Read the hash reactively</h2>
36
+ <input type="text" readonly id="read-hash-reactive">
37
+ </div>
38
 
39
  <script>
40
+ // Sync query and hash from this embedded app to the parent page URL
41
  function sync() {
42
  const queryString = document.getElementById("query").value;
43
  const hash = document.getElementById("hash").value;
 
48
  hash,
49
  }, "https://huggingface.co");
50
  }
51
+
52
+ // Read the initial query and hash
53
+ const initialQuery = window.location.search;
54
+ const initialHash = window.location.hash;
55
+ document.getElementById("initial-query").value = initialQuery ?? "";
56
+ document.getElementById("initial-hash").value = initialHash ?? "";
57
+
58
+ // Read the updated hash reactively
59
+ window.addEventListener("hashchange", (event) => {
60
+ console.log("hash change event", event);
61
+ const currentHash = window.location.hash;
62
+ document.getElementById("read-hash-reactive").value = currentHash;
63
+ });
64
  </script>
65
  </body>
66
  </html>