如何在 iframe 中调用父窗口 JavaScript 函数答案

【问题标题】：How to Call Parent Window JavaScript Function inside iframe如何在 iframe 中调用父窗口 JavaScript 函数
【发布时间】：2013-10-24 18:02:47
【问题描述】：

这是我在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>

这是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>

当我单击“单击此处”链接时。我得到以下错误。

Uncaught SecurityError: Blocked a frame with origin “http://www.my-website.com”来自访问具有原点的框架 “http://my-localhost.com”。协议、域和端口必须匹配。

请帮我解决这个问题，或为此提供一些其他解决方案。

【问题讨论】：

你为什么要使用 IFrames？
那么为此我可以使用什么？实际上我的目的是我有固定的 html 页面，它将打开许多网站。而那些网站用户必须点击一个链接，并且该链接应该在固定的html页面中调用一个函数。

标签： javascript html iframe cross-domain

【解决方案1】：

您无法访问在不同来源的框架中加载的页面的 DOM。出于安全原因，这已被阻止（假设您访问的一个随机网站在隐藏的 iframe 中打开您的网络邮件服务，您就会明白原因）。

最接近的方法是使用web messaging api 在它们之间传递消息，但前提是你控制了这两个网站。

在一个页面中，编写一个函数来处理消息，然后将其添加为消息事件监听器。

function receiveMessage(event)
{
  alert(event.data);
}

addEventListener("message", receiveMessage, false);

另外，发送消息：

parent.postMessage("This is a message", "*");

见MDN for more information

【讨论】：

谢谢你会尝试 :) 让你知道
感谢此方法适用于 Chrome。但在 Safari 中它不起作用:(
@Quentin Neat。使用 Chrome，我收到了消息，但它没有显示 iframe 窗口位置。 Uncaught SecurityError: Blocked a frame with origin "http://fiddle.jshell.net" from accessing a frame with origin "http://stone.thecoreworlds.net". Protocols, domains, and ports must match.
@Chloe — 那是因为您必须使用 postMessage 来传递数据，而尝试读取位置的代码却没有。

【解决方案2】：

你可以使用 postMessage！

家长

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'
    );
}

参考

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

【讨论】：

使用## 作为标题。
这行得通！但是有没有办法动态填充“my-website.com”而不是硬编码？
我可以使用 location.ancestorOrigins[0]) 而不是硬编码的 'my-website.com'
我注意到 Window IE11 在函数 send() 上抛出了 SCRIPT70“权限被拒绝”。有办法解决吗？