从 iframe 中加载的 html 页面上的源脚本获取 Javascript 变量

Question

跟进这里的这个问题：Accessing JavaScript variable in an iframe, from the parent window on same domain

为了在这里发布可测试的内容，我有一个 src.js 文件设置如下：

var foo = {"foo":"bar"};

然后我可以在 HTML 页面 test1.html 中添加以下行：

<script src="src.js" type="text/javascript"></script>

然后我有另一个 HTML 页面 test2.html，

<iframe src="test1.html"></iframe>

如何从 test2.html 访问 foo？我尝试了以下方法，但找不到 foo（运行从 test2.html 中的 div 单击按钮）

  console.log("foo: " + typeof foo);
  console.log("foo: " + window.foo);
  console.log("Frame window: " + window.frames[0].window); //this works
  console.log("Sections: " + window.frames[0].window.foo);

注意：在iframe中，肯定有foo

Answer 1

以下是最终对我有用的方法。在 JS 库中：

const foo = {"foo":"bar"};

window.getFoo = function() {
  return foo;
}

在带有 iFrame 的页面上（test2.html）：

  var iframe = document.getElementById("mainPanel"); //mainPanel is the id of the iframe
  var iWindow = iframe.contentWindow;
  var foo = iWindow.getFoo();

从 iframe 中加载的 html 页面上的源脚本获取 Javascript 变量

Getting Javascript variable from a source script on an html page loaded in an iframe

html

javascript

iframe