Question

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

Uncaught SecurityError：阻止具有原点的帧＆＃34; http://localhost:8080＆＃34;从访问原始框架＆＃34; http://stage.xyz.com＆＃34 ;.协议，域和端口必须匹配。

在主窗口我有这个：

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

关于iframe：

window.invokeUPWidget = invokeWidget;

那么如何调用iframe src是不同域的子窗口父窗口中的函数呢？

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

Answer 1

您无法使用Javascript访问<iframe>，如果可以的话，这将是一个巨大的安全漏洞。
对于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。你可以在那里阅读更多内容。

允许父窗口调用其子域的iframe上的函数

1 个答案: