File size: 1,698 Bytes
1b2afe2
 
 
 
 
c24f1e1
1b2afe2
 
 
 
644c4fc
462b01b
 
 
 
3027b97
 
 
462b01b
 
 
 
 
 
 
 
 
 
 
 
644c4fc
 
3027b97
 
644c4fc
 
 
 
bc5e1bf
644c4fc
 
9fd54ef
3027b97
644c4fc
1b2afe2
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Space tester</title>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="card">
			<h1>Space tester</h1>
        </div>
        <form>
          <fieldset name="urlparams">
                <legend>URL params</legend>
                    <div>
                        Iframe src <pre></pre>
                    </div>
                    <div>
                        <label>Query params <input name="queryparams" type="text" placeholder="?key=value"></label>
                    </div>
                     <div>
                        <label>Hash <input name="hash" type="text" placeholder="#hash"></label>
                    </div>
                    <div>
                        <button type="button">Update embedder URL</button>
                    </div>
            </fieldset>
        </form>
		
        <script async>
            const urlparams = document.querySelector('[name="urlparams"]');
            const showIframeSrc = () => urlparams.querySelector('pre').textContent = window.location.href;
          
            urlparams.querySelector('button').addEventListener('click', () => {
                const queryString = urlparams.querySelector('[name="queryparams"]').value;
                const hash = urlparams.querySelector('[name="hash"]').value;
                if(hash || queryString) {
                  window.parent.postMessage({ hash, queryString }, '*');
                }
            });
            window.addEventListener('hashchange', showIframeSrc);
            showIframeSrc();
        </script>
	</body>
</html>