Cordova iframe工作，但子与父通信被阻塞

Question

在我的应用程序中，我正在加载一个iFrame到一个模态;iFrame的源是我的服务器。iframe内容正确加载，但我试图让父窗口和子窗口相互交谈，并得到以下错误:

Blocked a frame with origin "https://api.myappdomain.com" from access a cross-origin frame

在控制器中，当模态加载时，我启动以下内容:

function iFrameMsg(d) {
console.log(d.data) ;
}
$scope.modalOpen = function() {
window.document.addEventListener('iframeMsg', iFrameMsg, false) ;
$scope.iframeModal.show() ;
}

在模态模板中:<iframe ng-src="https://myappdomain.com/content/index.html"></iframe>

服务器上index.html的脚本如下:

<script>
function sendMsg(data) {
var event = new CustomEvent('iframeMsg', { data: data }) ;
window.parent.document.dispatchEvent(event) ;
}    
</script>

在页面中有一个测试按钮:<button onclick="sendMsg({'some': 'data value'});"> This is a button </button>

单击将消息发送回父节点的按钮将生成错误。是否有一些我需要添加到我的应用程序，或网页，以允许iframe服务器页面和应用程序父窗口之间的通信工作?或者这种技术根本不起作用?如果不是，那么有什么办法呢?

Answer 1

你可以使用postMessage API在你的Cordova应用程序和iframe中的网页之间发送消息:

科尔多瓦的应用:

// Listen for messages from child frames
const onFrameMessage = (event) => {
const name = event.data[0],
data = JSON.parse(event.data[1]);
};
window.addEventListener('message', onFrameMessage, false);

// Send message to child frame
const postMessageToiFrame = (name, data) => {
iframe.contentWindow.postMessage([name, JSON.stringify(data)], "https://your.server.domain");
};

iframe中的网页

// Listen for messages from Cordova app
const onFrameMessage = (event) => {
const data = event.data;
};
window.addEventListener('message', onFrameMessage, false);
// Send message to Cordova app
const postMessageToApp = (name, data) => {
window.parent.postMessage([name, JSON.stringify(data)], "*");
}