Javascript：从 iframe 调用父级中的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7183388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Calling function in parent from iframe
提问by sittingbear
Hello StackOverflow community,
你好 StackOverflow 社区，
I was having a problem with my <iframe>and JavaScript. Let's say I have an index.html with an iframein the body. Within the index.htmlI have this in the <head>tags:
我的<iframe>JavaScript有问题。假设我iframe在正文中有一个 index.html 。在index.html我的<head>标签中有这个：
<script type="text/javascript">
function alertTest() {
alert("Testing");
}
</script>
In the iframe's src="iframe.htm"(The location is the same domain as index.html). Within that iframe.htmpage I have:
在 iframe 中src="iframe.htm"（该位置与 index.html 的域相同）。在该iframe.htm页面中，我有：
<a href="javascript:void(0);" onclick="window.parent.alertTest();">Click here.</a>
The problem is it is not loading the alert and in Google Chrome returns the error:
问题是它没有加载警报并且在谷歌浏览器中返回错误：
"Uncaught TypeError: Property 'alertTest' of object [object DOMWindow] is not a function
“未捕获的类型错误：对象 [对象 DOMWindow] 的属性 'alertTest' 不是函数
I have tried window.parent.alertTest();, window.top.alertTest();, top.alertTest();, parent.alertTest();and nearly everything that came up on similar problems I searched.
我已经试过window.parent.alertTest();，window.top.alertTest();，top.alertTest();，parent.alertTest();，近想出了在我搜索了类似的问题一切。
It seems you are unable to call a function located in a non-iframe, from the iframe located within said non-iframe.
您似乎无法从位于所述非 iframe 内的 iframe 中调用位于非 iframe 中的函数。
Please help!
请帮忙！
P.S. Essentially in the actual final outcome I'm trying to call a Lightbox open image function (Using slimbox because I am able to call the open image function with it from javascript rather than from a href). I have also tried in this final outcome using the target="_parent" property.
PS 基本上在实际的最终结果中，我试图调用 Lightbox 打开图像函数（使用 slimbox 因为我能够从 javascript 而不是从 href 调用打开图像函数）。我还使用 target="_parent" 属性尝试了这个最终结果。
回答by DaveRandom
Try defining your function like this:
尝试像这样定义你的函数：
window.alertTest = function () {
alert("Testing");
};
...and calling it in the same way you have in the question ;-)
...并以与问题相同的方式调用它;-)
In a browser, everything in javascript is a child of the windowobject. When you define a function in the form function funcName() { ... }you are effectively defining a private method of the windowobject. This doesn't matter under normal circumstances, because all code is executed within the scope of window, so it has access to these private methods.
在浏览器中，javascript 中的所有内容都是window对象的子对象。当您在表单中定义函数时，function funcName() { ... }您实际上是在定义window对象的私有方法。这在正常情况下没有关系，因为所有代码都在 的范围内执行window，因此它可以访问这些私有方法。
But when you try and access the windowobject from the outside (i.e. another windowobject, that of your iframe) you will not be allowed access to it. If you define the function in the form window.funcName = function () { ... };you are creating a privileged method, that is accessible from the outside but also has access to the private methods and properties (i.e. the variables in the script), so it will work when you try and call it from your iframe.
但是当您尝试window从外部访问该对象（即另一个window对象，即您的 iframe 的对象）时，您将不被允许访问它。如果您以window.funcName = function () { ... };创建特权方法的形式定义函数，该方法可以从外部访问，但也可以访问私有方法和属性（即脚本中的变量），因此当您尝试调用它时它将起作用从你的 iframe。
Read thisif you want to know more about private/privileged members and their accessibility.
如果您想了解更多有关私人/特权成员及其可访问性的信息，请阅读此内容。
回答by Jonathan Tonge
Write your function like this:
像这样写你的函数：
alertTest = function(){
alert("Testing")
}
Then call it from iframe:
然后从 iframe 调用它：
parent.alertTest();
