Javascript：从 iframe 调用父级中的函数

Question

您好 StackOverflow 社区，

我的 和 JavaScript 遇到问题。假设我有一个index.html，正文中有一个iframe。在 index.html 中，我将其放在 标记中：

<script type="text/javascript">
    function alertTest() {
        alert("Testing");
    }
</script>

在 iframe 的 src="iframe.htm" 中（位置与index.html 是同一域）。在该 iframe.htm 页面中，我有：

<a href="javascript:void(0);" onclick="window.parent.alertTest();">Click here.</a>

问题是它没有加载警报，并且在 Google Chrome 中返回错误：

“未捕获类型错误：对象 [object DOMWindow] 的属性“alertTest”不是函数

我尝试过的函数 window.parent.alertTest();、window.top.alertTest();、top.alertTest();、parent.alertTest(); 以及我搜索的类似问题中出现的几乎所有内容

似乎您无法调用 。功能定位在非 iframe 中，从位于所述非 iframe 中的 iframe

请帮忙！

PS 本质上，在实际的最终结果中，我正在尝试调用 Lightbox 打开图像函数（使用 slimbox 因为我能够调用打开图像函数）我也尝试过使用 target="_parent" 属性来实现最终结果。

Answer 1

尝试像这样定义您的函数：

window.alertTest = function () {
  alert("Testing");
};

...并以与问题中相同的方式调用它;-)

在浏览器中，javascript 中的所有内容都是 window 对象的子级。当您以 function funcName() { ... } 的形式定义函数时，您实际上是在定义 window 对象的私有方法。正常情况下这并不重要，因为所有代码都是在window范围内执行的，所以它可以访问这些私有方法。

但是，当您尝试从外部访问 window 对象（即另一个 window 对象，即您的 iframe 的对象）时，您将无法访问它。如果您以 window.funcName = function () { ... }; 的形式定义函数，您将创建一个特权方法，该方法可以从外部访问，但也可以访问私有方法和属性（即脚本中的变量），因此当您尝试从 iframe 调用它时它将起作用。

如果您想了解有关私有/特权成员及其可访问性的更多信息，请阅读本文。

Answer 2

使用parent.functionName。看看这个 链接

Answer 3

像这样编写你的函数：

alertTest = function(){

  alert("Testing")

}

然后从 iframe 调用它：

parent.alertTest();