Cross Domain communication in windows phone/tablet using WinJS

Question

I am developing an Windows tablet/phone application using Worklight(Hybrid technologies). I have jQuery, angular JS and WinJs in my application. I need to communicate between a page and its child iframe. But getting error "permission denied". I tried CONTENTWINDOW, CONTENTDOCUMENT, PARENT, TOP.XXXX scenarios but getting "PERMISSION DENIED". POSTMESSAGE concept also not working.

Is there any way to communicate between parent and child(IFRAME). Actually Domain is showing same for PARENT and IFRAME (Application ID is shown as domain).

Answer 1

PostMessage works, but you need to have the origins set correctly both in the app code and in the iframe. The example I show in Chapter 2 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, does exactly this. Here's a summary:

First of all, here's the markup for the iframe in the default.html of the app:

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

where map.html is in my package but running in the web context, of course.

To PostMessage from the app to the iframe, the origin has to be ms-appx-web plus the host page:

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

Inside the iframe, verify the origin this way:

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.
}

To post from the iframe to the app:

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

And to process it in the app:

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.
}

The code in the book has some generic code to use postMessage to call events in the iframe code and raise events to the app from the iframe, if that's useful. Details and links to background docs are also in that chapter if you care to know why the origin needs to be as it is.