diff --git a/src/main.ts b/src/main.ts index 0f3585e..75c0adc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,44 +3,53 @@ import './style.css' const setAppContent = (content: string) => document.querySelector('#app')!.innerHTML = content; +const makeListContainer = () => `
`; +const prependListElement = (content: string = "") => { + const list = document.getElementById('list')!; + list.innerHTML = `
  • ${new Date().toLocaleTimeString()}: ${content}
  • ` + list.innerHTML; +} + let state: "https" | "http" | "unknown" = window.location.protocol === 'https:' ? "https" : window.location.protocol === 'http:' ? "http" : "unknown"; +if (window.isSecureContext && state === 'http') + state = 'https'; // for localhost const params = new URLSearchParams(window.location.search); - if (params.has('protocol')) { state = params.get('protocol') === 'https' ? 'https' : 'http'; } + switch (state) { case "https": - console.log('This page is served over HTTPS'); const inputID = 'input' const buttonID = 'button' setAppContent(`
    + ${makeListContainer()}
    `); + let count = 0; + window.addEventListener('message', ({ data }) => prependListElement(data)); document.getElementById(buttonID)!.addEventListener('click', () => { const url = (document.getElementById(inputID) as HTMLInputElement).value; - const otherWindow = window.open(url); - if (!otherWindow) { - alert('Please allow popups for this website'); - return; - } - setInterval(() => otherWindow.postMessage('Hello from HTTPS site', url), 1000); + const popup = window.open(url); + if (!popup) + return alert('Please allow popups for this website'); + + setInterval(() => popup.postMessage(`HTTPS msg ${count++}`, url), 100); }); break; case "http": - console.log('This page is served over HTTP'); - setAppContent(`

    Open console to view messages being received.

    `); + setAppContent(`
    Messages: ${makeListContainer()}
    `); window.addEventListener('message', (event) => { - console.log('Received message:', event.data); + prependListElement(event.data); + event.source!.postMessage(`HTTP msg ${event.data}`, { targetOrigin: event.origin }); }); break; case "unknown":