允许父窗口调用不同域的子iframe的功能

Question

我有一个iframe，其中src是不同的域，我试图从父窗口调用iframe中的方法。然后在下面给出：

Uncaught SecurityError: Blocked a frame with origin " http://localhost:8080 " from accessing a frame with origin " http://stage.xyz.com ". Protocols, domains, and ports must match.

在主窗口中我有这样的：

launchUPwidget(widgetParams); 
function launchUPwidget(widgetParams){ 
    document.getElementById('iframe').contentWindow.invokeUPWidget(widgetParams);  
} 

在IFRAME：

window.invokeUPWidget = invokeWidget; 

所以，我怎么能叫儿童iframe的形式父窗口的功能iframe src是不同的域名？

这里protocals是相同的，但域是不同的。

Answer 1

你不能使用JavaScript访问，如果你可以这样做，这将是一个巨大的安全漏洞。
对于same-origin policy，每个浏览器都会阻止任何尝试访问具有不同来源的帧的脚本。尽管同源策略会阻止脚本访问不同来源站点的内容，但如果您拥有这两个页面，则可以使用window.postMessage及其相关消息事件在两页之间发送消息来解决此问题，像这样：

在您的主页：

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 

在你（包含在主要页面）：

window.addEventListener('message', function(event) { 

    // IMPORTANT: Check the origin of the data! 
    if (event.origin.indexOf('http://yoursite.com')) { 
     // The data has been sent from your site 

     // The data sent with postMessage is stored in event.data 
     console.log(event.data); 
    } else { 
     // The data hasn't been sent from your site! 
     // Be careful! Do not use it. 
     return; 
    } 
}); 

有一个similar question。你可以在那里阅读更多。