Question

我目前正在使用动态创建的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代码，输入＆＃34;尚未初始化＆＃34;分支并执行＆＃34;初始化＆＃34;警报。

它可以在Firefox和Internet Explorer中使用，但Chrome似乎在重绘时保留myObj，因此当用户点击＆＃34;重新运行iframe代码＆＃34;浏览器将进入＆＃34;已经初始化＆＃34;分支。

任何提示我如何确保Chrome也会在每次重绘时从空白框架开始？

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

上面的示例只是问题的简要版本，并未显示整个游戏。当然，我可以在我的示例代码中清理myObj - 但在实际情况下这不是一个选项。
不：跟iframe一起不是我的决定。
不：我无法改变。
只是简单的JavaScript - 没有jQuery。

Answer 1

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

＆＃13;

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

＆＃13;

在Safari上测试，似乎表现得像Chrome

Answer 2

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

function redrawFrame() {
    var frameElement = document.getElementById('resultsframe');
    frameElement.outerHTML = frameElement.outerHTML;

    var doc=iframe.document;
    counter++;
    // ... see above ...

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

2 个答案: