title: Clean the cache of iframe
body: <p>I have an erroneous html+javascript. It returns a <code>Uncaught ReferenceError: number is not defined</code>, which is expected:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
     &lt;meta name="robots" content="noindex"&gt;
     &lt;html&gt;
     &lt;body&gt;
       &lt;p id="demo"&gt;&lt;/p&gt;
       &lt;script&gt;
         document.getElementById("demo").innerHTML = number();
       &lt;/script&gt;
       &lt;script id="jsbin-javascript"&gt;
         function number() {
          return 1;
         }
       &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, if I run the code as a string by <code>iframe</code> <strong>twice</strong> (<a href="https://plnkr.co/edit/IVFVtvJQCmE68yJ98IWS?p=preview" rel="nofollow noreferrer">plnkr</a>), the second run oddly returns a result. It is because the <code>number</code> function is cached somewhere by the first run, which is not what I want.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;iframe&gt;&lt;/iframe&gt;
  
      &lt;script&gt;
            var iframe = document.querySelector('iframe');
            var iframe_doc = iframe.contentDocument; 
            iframe_doc.open();
            iframe_doc.write(source);
            iframe_doc.close();
  
            var iframe = document.querySelector('iframe');
            var iframe_doc = iframe.contentDocument;
            iframe_doc.open();
            iframe_doc.write(source);
            iframe_doc.close();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So does anyone know how to clean the cache, such that each run of <code>iframe</code> is completely a new one?</p>
  
  <p><strong>Edit 1</strong> Following the answer of @LeonidVasilyev, I have added in html:</p>
  
  <pre><code>&lt;section id="output"&gt;
    &lt;iframe&gt;&lt;/iframe&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And in JavaScript of my playground:</p>
  
  <pre><code>this.render = function (code) {
  
      var source = prepareSource(code);
  
      var placeholder = document.getElementById("output");
      while (placeholder.firstChild) {
          placeholder.removeChild(placeholder.firstChild);
      }
      var iframe = document.createElement("iframe");
      placeholder.appendChild(iframe); 
  
      var iframe_doc = iframe.contentDocument;
      iframe_doc.open();
      iframe_doc.write(source);
      iframe_doc.close();
  }
  </code></pre>
  
  <p>What is odd is that, <strong>every time I reload/refresh the page, the paper icon in the Chrome tab and the reload round icon each flash twice</strong>. It is because of <code>placeholder.appendChild(iframe)</code>, because if i remove this line, it flashes once.</p>
  
  <p>Does anyone know how to avoid this icon twice-flashing?</p>
  
  <p><a href="https://i.stack.imgur.com/0GCgH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0GCgH.png" alt="enter image description here"></a></p>