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