动态(重新）创建iframe内容不会重置Chrome中的JS对象

Dynamic (re)creation of iframe content does not reset JS objects in Chrome

本文关键字：Chrome 中的 对象 JS 重新 创建 iframe 动态      更新时间：2023-09-26

我目前正在开发一个使用动态创建的iframe内容的网页。在这个iframe中，我需要运行自己的JavaScript代码。

HTML:

<iframe id="resultsframe" name="resultsframe"></iframe>
<a id="redrawer" href="#">Rerun iframe code</a>

JavaScript：（只是基本的东西）

var iframe=window.frames['resultsframe'];
var counter = 0;
function redrawFrame() {
    var doc=iframe.document;
    counter++;
    doc.open();
    doc.writeln("<html><body>");
    doc.writeln("Counter: " + counter);
    doc.writeln("<" + "script>");
    doc.writeln("  if (typeof myObj === 'undefined') { var myObj = {}; }");
    doc.writeln("  if (!myObj.initialized) {");
    doc.writeln("    alert('initialize');");          // want this all the time
    doc.writeln("    myObj.initialized = true;");
    doc.writeln("  } else {");
    doc.writeln("    alert('already initialized');"); // ... never this
    doc.writeln("  }");
    doc.writeln("</" + "script>");
    doc.writeln("</body></html>");    
    doc.close(); 
}
redrawFrame();
document.getElementById('redrawer').addEventListener('click', redrawFrame);

请在此处尝试：http://jsfiddle.net/BlaM/3n8d5zwz/3/

我想要的是，每次重新绘制iframe时，都会在框架中添加HTML代码（如果需要，可以用新页面重新启动）并执行javascript代码，进入"尚未初始化"分支并执行"初始化"警报。

它适用于Firefox和Internet Explorer，但Chrome似乎即使在重新绘制时也会保留myObj，因此当用户单击"重新运行iframe代码"时，浏览器将进入"已初始化"分支。

有什么提示我可以确保Chrome在每次重画时也会从一个空白框开始吗？

只是为了说明显而易见的，因为我知道这些问题会出现：

  • 上面的例子只是问题的浓缩版本，并没有显示整个游戏。当然，我可以在示例代码中清除myObj，但在实际情况下这不是一个选项
  • 不：选择iframes不是我的决定
  • 不：我不能改变
  • 只是简单的JavaScript-没有jQuery

使用匿名函数包装代码怎么样？

var iframe = window.frames['resultsframe'];
var counter = 0;
function redrawFrame() {
  var doc = iframe.document;
  counter++;
  doc.open();
  doc.writeln("<html rel='" + Math.random() + "'>");
  doc.writeln("	<head>");
  doc.writeln("		<meta http-equiv=content-type content='"text/html; charset=iso-8859-1'" />");
  doc.writeln("	</head>");
  doc.writeln("	<body bgColor='"#cccccc'">");
  doc.writeln("Counter: " + counter);
  doc.writeln("<" + "script>");
  doc.writeln("(function() {");
  doc.writeln("  if (typeof myObj === 'undefined') { var myObj = {}; }");
  doc.writeln("  alert('in iframe code');");
  doc.writeln("  if (!myObj.initialized) {");
  doc.writeln("    alert('initialize');");
  doc.writeln("    myObj.initialized = true;");
  doc.writeln("  } else {");
  doc.writeln("    alert('already initialized');");
  doc.writeln("  }");
  doc.writeln("})()");
  doc.writeln("</" + "script>");
  doc.writeln("   </body>");
  doc.writeln("</html>");
  doc.close();
  doc = null;
}
redrawFrame();
document.getElementById('redrawer').addEventListener('click', redrawFrame);

在Safari上测试，其行为似乎与Chrome 类似

正如@Vikash所建议的，现在我的工作解决方案是用新创建的iframe替换iframe。这样做比预期的要容易——即使需要复制所有属性：

function redrawFrame() {
    var frameElement = document.getElementById('resultsframe');
    frameElement.outerHTML = frameElement.outerHTML;
    var doc=iframe.document;
    counter++;
    // ... see above ...
相关文章：