允許父窗口調用不同域的子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。你可以在那裏閱讀更多。