Merge pull request #12 from waldyrious/iframe-reload-fix

Fix iframe reload bug

index.html

@@ -17,10 +17,8 @@
       <label for="rst-input">reStructuredText input</label>
       <label for="html-output">HTML output</label>
       <textarea name="rst_input" id="rst-input"></textarea>
-      <output name="html_output" id="html-output" for="rst-source"></output>
+      <iframe id="html-output"></iframe>
     </form>
-    <hr/>
-    <iframe id="iframe0" src="" frameborder="0"></iframe> <!-- src="data:text/html,<p>WHAT??</p>" -->
     <button onclick="rstToHtml()">Run</button>
 
     <script src="script.js"></script>

script.js

@@ -1,19 +1,15 @@
-// Attempt to prevent caching of the iframe source
-// https://stackoverflow.com/a/52507285/266309
-// This seems to break the page upon reload...
-// var myIFrame = document.getElementById("output-iframe");
-// myIFrameUrl = myIFrame.contentWindow.location.href;
-// myIFrame.src = myIFrameUrl + '?timestamp=' + new Date().getTime();
+const inputTextarea = document.getElementById("rst-input");
+const outputFrame = document.getElementById("html-output");
 
-const output = document.getElementById("html-output");
-const input = document.getElementById("rst-input");
-
-output.value = "Initializing...\n";
+outputFrame.contentDocument.write("Initializing...\n");
 
 // init Pyodide
 async function main() {
   let pyodide = await loadPyodide();
-  output.value += "Ready!\n";
+  outputFrame.contentDocument.write("Ready.\n");
+  // This makes the browser favicon stop the loading spinner
+  outputFrame.contentDocument.close();
+
   return pyodide;
 }
 let pyodideReadyPromise = main();
@@ -24,7 +20,7 @@ async function rstToHtml() {
     // TODO: also load pygments for syntax highlighting
     await pyodide.loadPackage("docutils");
 
-    pyodide.globals.set('input_text', input.value);
+    pyodide.globals.set('input_text', inputTextarea.value);
 
     let result = await pyodide.runPythonAsync(`
       # https://stackoverflow.com/a/6654576/266309
@@ -35,13 +31,11 @@ async function rstToHtml() {
       #       (see https://docutils.sourceforge.io/docs/api/publisher.html)
       #       so that the output can be just the plain inner content and not have to be placed in an iframe
     `);
-    // Set HTML document as the contents of an iframe
-    // https://stackoverflow.com/a/4199540/266309
-    iframe = document.getElementById("iframe0").contentDocument;
-    iframe.open();
-    iframe.write(result);
-    iframe.close();
+
+    outputFrame.srcdoc = result;
   } catch (err) {
-    output.value = err;
+    const pre = document.createElement('pre');
+    pre.textContent = err;
+    outputFrame.srcdoc = pre.outerHTML;
   }
 }

style.css

@@ -4,10 +4,12 @@ form {
   grid-template-columns: calc((100% - 1em) / 2) calc((100% - 1em) / 2);
   column-gap: 1em;
 }
-textarea, output {
+textarea, iframe {
   border: 1px solid grey;
   border-radius: 3px;
   padding: 0.5em;
   margin: 0;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
 }
-output { white-space: pre; }