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

标签 javascript google-chrome iframe

我目前正在开发一个使用动态创建的 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 - 但这在实际情况下不是一个选项。
  • 不:使用 iframe 不是我的决定。
  • 不:我无法改变这一点。
  • 只是简单的 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 类似

关于javascript - 动态(重新)创建 iframe 内容不会重置 Chrome 中的 JS 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29256850/

相关文章:

javascript - 更改img src不显示图像

javascript - 对于同一数据集,饼图布局在 Firefox 和 Chrome 上产生不同的排序

google-chrome - 扩展程序中的 Chrome 应用程序

JavaScript JQuery Ajax 问题 : POST Works fine in Firefox, IE、Safari 但不是 Chrome

extjs - 如何在 extjs webdesktop 上自动调整 iframe 内容的大小

javascript - 在页面刷新时使用 Javascript 定位 Div

javascript - 403 禁止使用 REST

javascript - 在球形条件下,给定3个点及其到第4个点的距离,如何找到其地理位置?

javascript - 在 Javascript 中编辑字符串

javascript - 拒绝在框架中显示,因为它将 'X-Frame-Options' 设置为 'SAMEORIGIN'