Clean the cache of iframe

Question

I have an erroneous html+javascript. It returns a Uncaught ReferenceError: number is not defined , which is expected:

<!DOCTYPE html>
   <meta name="robots" content="noindex">
   <html>
   <body>
     <p id="demo"></p>
     <script>
       document.getElementById("demo").innerHTML = number();
     </script>
     <script id="jsbin-javascript">
       function number() {
        return 1;
       }
     </script>
   </body>
</html>

However, if I run the code as a string by iframe twice ( plnkr ), the second run oddly returns a result. It is because the number function is cached somewhere by the first run, which is not what I want.

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <iframe></iframe>

    <script>
          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();
    </script>
  </body>
</html>

So does anyone know how to clean the cache, such that each run of iframe is completely a new one?

Edit 1 Following the answer of @LeonidVasilyev, I have added in html:

<section id="output">
  <iframe></iframe>
</section>

And in JavaScript of my playground:

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();
}

What is odd is that, every time I reload/refresh the page, the paper icon in the Chrome tab and the reload round icon each flash twice . It is because of placeholder.appendChild(iframe) , because if i remove this line, it flashes once.

Does anyone know how to avoid this icon twice-flashing?

Answer 1

That is a Chrome bug . In your case document.open() must create new global object. Excerpt from description of document.open() algorithm in HTML specification:

Call the JavaScript InitializeHostDefinedRealm() abstract operation with the following customizations:

For the global object, create a new Window object window .

For the global this value, use the current browsing context's associated WindowProxy.

Let realm execution context be the created JavaScript execution context.

Firefox 51 and Internet Explorer 11 properly create new Window object.

As a workaround you can create new iframe node on each iteration:

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="placeholder"></div>
    <script>
      var placeholder = document.getElementById("placeholder");
      var iframe = null;

      iframe = document.createElement("iframe");
      placeholder.appendChild(iframe);
      var iframe_doc = iframe.contentDocument;
      iframe_doc.open();
      iframe_doc.write(source);
      iframe_doc.close();

      iframe = document.createElement("iframe");
      placeholder.appendChild(iframe);
      var iframe_doc = iframe.contentDocument;
      iframe_doc.open();
      iframe_doc.write(source);
      iframe_doc.close();  
    </script>
  </body>
</html>

Clean the cache of iframe

Question

1 answers

solution1
0 2017-02-06 11:29:49

Clean the cache of iframe

Question

1 answers

solution1 0 2017-02-06 11:29:49

solution1
0 2017-02-06 11:29:49