使用WinJS在windows手机/平板电脑中进行跨域通信

Question

我正在使用Worklight（混合技术）开发Windows平板电脑/手机应用程序。我的应用程序中有jQuery、angular JS和WinJs。我需要在页面和它的子iframe之间进行通信。但获取错误"权限被拒绝"。我尝试了CONTENTWINDOW、CONTENTDOCUMENT、PARENT、TOP.XXX场景，但得到了"拒绝许可"。POSTMESSAGE概念也不起作用。

父母和孩子之间是否有任何沟通方式（IFRAME）。实际上，对于PARENT和IFRAME，Domain显示的是相同的（应用程序ID显示为域）。

Answer 1

PostMessage可以工作，但您需要在应用程序代码和iframe中正确设置起源。我在我的免费电子书第2章中展示的例子，用HTML、CSS和JavaScript编程Windows商店应用程序，第2版，正是这样做的。总结如下：

首先，这里是应用程序default.html中iframe的标记：

<iframe id="map" src="ms-appx-web:///html/map.html" aria-label="Map"></iframe>

其中map.html在我的包中，但当然是在web上下文中运行的。

要将消息从应用程序发布到iframe，来源必须是ms-appx-web加上主机页：

frame.postMessage(message, "ms-appx-web://" + document.location.host);

在iframe内部，通过以下方式验证来源：

window.addEventListener("message", processMessage);
function processMessage(msg) {
    //Verify data and origin (in this case the local context page)
    if (!msg.data || msg.origin !== "ms-appx://" + document.location.host) {
        return;
    }
    //Message is from the app, process with confidence.
}

从iframe发布到应用程序：

window.parent.postMessage(message, "ms-appx://" + document.location.host);

并在应用程序中处理：

window.addEventListener("message", processFrameEvent);
function processFrameEvent (message) {
    //Verify data and origin (in this case the web context page)
    if (!message.data || message.origin !== "ms-appx-web://" + document.location.host) {
        return;
    }
    //Message is from iframe.
}

书中的代码有一些通用代码，可以使用postMessage调用iframe代码中的事件，并从iframe向应用程序引发事件（如果有用的话）。如果你想知道为什么起源需要原样，那么该章中也有详细信息和后台文档的链接。