Html 如何在 iframe 中调用父窗口 JavaScript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19406541/
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
How to Call Parent Window JavaScript Function inside iframe
提问by rkaartikeyan
Here is my code on http://my-localhost.com/iframe-test.html
这是我的代码 http://my-localhost.com/iframe-test.html
<html>
<head><title>Welcome Iframe Test</title></head>
<body>
<iframe src="http://www.my-website.com/index.html" width="500" height="500"></iframe>
<script type="text/javascript">
function alertMyMessage(msg){
alert(msg);
}
</script>
</body>
</html>
Here is code on http://www.my-website.com/index.html
这是代码 http://www.my-website.com/index.html
<html>
<head></title>Welcome to my Server</title></head>
<body>
<h1>Welcome to My Server</ht>
<a href="javascript:void(0)" title="Click here" onClick="parent.alertMyMessage('Thanks for Helping me')">Click Here</a>
</body>
</html>
When i Click the "Click Here" Link. i got following Error.
当我单击“单击此处”链接时。我得到以下错误。
Uncaught SecurityError: Blocked a frame with origin "http://www.my-website.com" from accessing a frame with origin "http://my-localhost.com". Protocols, domains, and ports must match.
未捕获的安全错误：阻止了来源为“ http://www.my-website.com”的框架访问来源为“ http://my-localhost.com”的框架。协议、域和端口必须匹配。
Please Help me to Fix this Issue, or give some other solution for this.
请帮我解决这个问题，或者为此提供一些其他解决方案。
回答by Quentin
You cannot access the DOM of a page loaded in a frame in a different origin. This is blocked for security reasons (imagine a random website you visited opening your web mail service in a hidden iframe and you can see why).
您无法访问在不同来源的框架中加载的页面的 DOM。这是出于安全原因而被阻止的（想象一下您访问的随机网站在隐藏的 iframe 中打开您的网络邮件服务，您可以看到原因）。
The closest you can come, and then only if you control both websites, is to pass messages between them using the web messaging api.
最接近的方法是使用Web 消息传递 api在它们之间传递消息，并且只有在您控制这两个网站的情况下。
In one page, write a function to handle the messages and then add it as a message event listener.
在一页中，编写一个函数来处理消息，然后将其添加为消息事件侦听器。
function receiveMessage(event)
{
alert(event.data);
}
addEventListener("message", receiveMessage, false);
In the other, send the message:
在另一个中，发送消息：
parent.postMessage("This is a message", "*");
回答by emilianoeloi
You can use postMessage!
您可以使用 postMessage！
PARENT
家长
if (window.addEventListener) {
window.addEventListener ("message", receive, false);
}
else {
if (window.attachEvent) {
window.attachEvent("onmessage",receive, false);
}
}
function receive(event){
var data = event.data;
if(typeof(window[data.func]) == "function"){
window[data.func].call(null, data.params[0]);
}
}
function alertMyMessage(msg){
alert(msg);
}
IFRAME
框架
function send(){
window.parent.window.postMessage(
{'func':'alertMyMessage','params':['Thanks for Helping me']},
'http://www.my-website.com'
);
}
REFERENCE
参考
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
