diff --git a/components/page.js b/components/page.js index 217dcf7..e3c141a 100644 --- a/components/page.js +++ b/components/page.js @@ -1,3 +1,32 @@ +const frameHtml = ` + + + Frame + + + + + + +` + export class Page extends HTMLElement { constructor() { super() @@ -31,5 +60,31 @@ export class Page extends HTMLElement { } ` this.shadowRoot.append(style) + if (path.startsWith('/sandbox/')) { + this.initFrame() + } + } + + initFrame() { + const tmp = document.createElement('iframe') + tmp.sandbox = "allow-same-origin allow-scripts" + const url = new URL( + '/-/frame', location.href + ) + url.searchParams.set( + 'csp', + "default-src 'self'" + ) + url.searchParams.set('html', frameHtml) + tmp.src = url.href + this.shadowRoot.insertAdjacentHTML( + 'beforeend', tmp.outerHTML + ) + const frames = this.shadowRoot.getElementsByTagName('iframe') + this.frame = frames[frames.length - 1] + this.textArea.addEventListener('blur', e => { + const msg = ['srcdoc', e.target.value] +this.frame.contentWindow.postMessage(msg) + }) } } \ No newline at end of file