Question

我有一个错误的html + javascript。它返回Uncaught ReferenceError: number is not defined，这是预期的：

<!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>

但是，如果我按iframe 两次（plnkr）将代码作为字符串运行，则第二次运行会奇怪地返回结果。这是因为number函数在第一次运行时缓存在某处，这不是我想要的。

<!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>

那么有没有人知道如何清理缓存，这样每次iframe的运行都是新的？

编辑1 在@LeonidVasilyev的回答之后，我添加了html：

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

在我的游乐场的JavaScript中：

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

奇怪的是，每次重新加载/刷新页面时，Chrome标签页中的纸张图标和重新加载的圆形图标都会闪烁两次。这是因为placeholder.appendChild(iframe)，因为如果我删除这一行，它会闪烁一次。

有谁知道如何避免这个图标闪烁两次？

Answer 1

这是Chrome bug。在您的情况下，document.open()必须创建新的全局对象。摘自HTML规范中的description of document.open() algorithm：

使用以下自定义项调用JavaScript InitializeHostDefinedRealm（）抽象操作：



对于全局对象，创建一个新的Window对象窗口。



对于全局此值，请使用当前浏览上下文   关联的WindowProxy。



让realm执行上下文成为创建的JavaScript执行   上下文。

Firefox 51和Internet Explorer 11正确创建新的Window对象。

作为一种解决方法，您可以在每次迭代时创建新的iframe节点：

<!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>

清理iframe

1 个答案: