Spaces:
Running
Running
| <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> | |