Frame
//wiki.ralfbarkow.ch/assets/pages/cold-boot/cold-boot.html HEIGHT 300
The following script reshapes the wiki page so you can debug Elm inline. It locates the first iframe (your Elm app), wraps it in a new vertical container, and then inserts a second iframe underneath to host the Elm Debugger. It adjusts the sandbox so the app frame can be patched, then injects a helper that redirects Elm’s built-in `window.open` call into the lower debugger frame. After reloading the app iframe, any interaction with your Elm app will cause the debugger UI to appear directly beneath it, stacked on the same page.
(() => { // always operate on the TOP document let topWin = window; while (topWin.parent !== topWin) topWin = topWin.parent; const topDoc = topWin.document; const frames = [...topDoc.querySelectorAll('iframe')]; const app = frames[0]; if (!app) { console.warn('Elm app iframe not found at that index'); return; } // Make a vertical wrapper and move app into it (idempotent) let wrap = topDoc.getElementById('elm-stack'); if (!wrap) { wrap = topDoc.createElement('div'); wrap.id = 'elm-stack'; wrap.style.cssText = 'display:flex; flex-direction:column; gap:8px; height:90vh; margin:8px 0;'; app.parentElement.insertBefore(wrap, app); } app.style.cssText = 'flex:0 0 300px; border:1px solid #ddd;'; // fixed height for app if (app.parentElement !== wrap) wrap.appendChild(app); // Add / reuse the debugger iframe beneath let dbg = topDoc.getElementById('elm-debug'); if (!dbg) { dbg = topDoc.createElement('iframe'); dbg.id = 'elm-debug'; dbg.name = 'elm-debug'; dbg.style.cssText = 'flex:1; border:1px solid #ddd;'; // fills remaining height wrap.appendChild(dbg); } // Relax sandbox so we can inject into the app iframe (no popups needed) app.setAttribute('sandbox', 'allow-scripts allow-same-origin'); // Inject AFTER load; retry if contentDocument not ready yet const inject = () => { const doc = app.contentDocument; if (!doc) { console.log('waiting for app.contentDocument…'); return false; } const s = doc.createElement('script'); s.textContent = ` (function(){ // Redirect Elm debugger's window.open into the lower frame const getDbg = () => parent.document.getElementById('elm-debug')?.contentWindow; window.open = function(_url, _name, _features){ const w = getDbg(); if(!w) return null; try { w.document.open(); w.document.write('<!doctype html><title>Elm Debugger</title>'); w.document.close(); } catch(_) {} return w; }; console.log('✅ Elm debugger redirection installed inside app iframe'); })(); `; (doc.head || doc.documentElement).appendChild(s); return true; }; // Ensure reload so new sandbox applies, then inject on load (+poll fallback) app.addEventListener('load', () => { let tries = 0; const t = setInterval(() => { if (inject() || ++tries > 20) clearInterval(t); }, 100); }, { once: true }); // force reload to apply changed sandbox app.src = app.src; console.log('➡️ Vertical stack ready; iframe reloading; debugger redirect will install on load.'); })();
pages/dm6-elm-bedded
HTML5 mp4 https://wiki.ralfbarkow.ch/assets/pages/dm6-elm-bedded/dm6-elm-bedded.mp4 Time travel debugging