从同一域中的父窗口访问iframe中的JavaScript变量

Question

我对JavaScript相当新，正在尝试从嵌入的iframe中获取变量的值。我已经采用基本测试来确保我正确使用了该方法...

我已经尝试了常见的建议，但是一切都返回“未定义”。我希望在onclick事件中使用此变量。

在iframe内容中，我已经剥离了所有内容，仅供测试使用：

<script>
var test = "test";
</script>

在父窗口中，我已经做了这个：

<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>

<script>
var myVar = window.frames[0].window.test;
</script>
<a href="#" onclick='alert(myVar)' id="link">Click</a>

我尝试了这里建议的选项：grab global variable from an embedded iframe

无论我做什么都会返回undefined……我是不是在做基本错误的事情？

提前感谢。

- Faldinio

---

你的JS代码可能在iFrame加载完成之前就已经运行了。 - gen_Eric

Answer 1

在<iframe>加载完成之前，您已经执行了脚本，因此它的test是undefined。要么等待iframe的load事件，要么在单击时获取变量：

<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>

<script>
var myFrame = window.frames[0].window;
</script>
<a href="#" onclick='alert(myFrame.test)' id="link">Click</a>

- Bergi

Answer 2

你似乎在访问myVar之前没有等待框架内容加载完成。可能是当你这样做时，框架中的<script>元素尚未被获取或执行。

尝试延迟变量赋值，直到框架内容完全加载：

<iframe src="iframe.html" id="iframe" onload="frameLoaded();" width="200" height="100"></iframe>

<script>
    var myVar;
    function frameLoaded() {
        myVar = window.frames[0].window.test;
    }
</script>

作为一则附言，由于您的问题标签中包含jquery，我建议您编写类似以下内容的代码：

<iframe src="iframe.html" id="iframe" width="200" height="100"></iframe>

<script>
    $("#iframe").on("load", function() {
        var myVar = this.window.test;
        $("#link").on("click", function() {
            alert(myVar);
        });
    });
</script>

- Frédéric Hamidi

---

两种方法都不起作用。使用纯JavaScript时，Firebug会报错说myVar未定义，因此onclick事件不会发生。使用jQuery选项时，Firebug告诉我this.window.test未定义。 - Faldinio

@Faldinio，确实，这是因为myVar在我的答案中是局部变量。我没有理解你想要将它放在全局范围内。答案已相应更新。 - Frédéric Hamidi

说实话，我应该发现它是在函数内定义的，而不是在外面，但是我一直盯着同样的代码看了很久！它可以使用更新后的答案。 - Faldinio

Answer 3

试着使用这个

 <iframe src="iframe.html" id="iframe" onload="loader()" width="200" height="100">    </iframe>

<script>
    var myVar
    function loader(){
        myVar = window.frames[0].window.test;
    }
</script>
<a href="#" onclick='alert(myVar)' id="link">Click</a>

- fkabeer

Answer 4

在旁边的解决方案中，我只是想指出当你使用jquery的onload事件处理程序函数并且想访问jquery的"this"对象时，你必须使用$(this.attr)的表示法。

- emmmdeee