You can use HTML 5's postMessage to communicate between contexts.
Below is an image of a simplistic example with the relevant code snippets following it; the Bing Maps trip optimizer example uses this same technique on a grander scale.
The main page (default.js), which is running in the local context, includes an IFRAME loaded in web context via the following markup (I left out the unchanged <head> element to save space):
<body onload="localContext.onLoad();">
<p style="margin-top: 150px">This is default.html in the local context</p>
<div style="background-color: azure; width: 300px">
<iframe src="ms-appx-web:///webpage.html" />
</div>
</body>
localContext
is defined in default.js as
var localContext = {
onLoad: function () {
window.attachEvent("onmessage",
function (msg) {
if (msg.origin == "ms-appx-web://bfddc371-2040-4560-a61a-ec479ed996b0")
new Windows.UI.Popups.MessageDialog(msg.origin).showAsync().then();
});
}
};
and it defines an onLoad
function for default.html that registers a listener to the onmessage
event, and when that event fires a MessageDialog is shown (or you can take whatever action you want to do in the local context).
Note that the parameter to the message
event callback (msg
here) also includes a origin property that you can check to make sure you're only handling messages from expected senders.
The web page hosted in the IFRAME calls postMessage in the onclick
event handler of a button (you'll probably want to pull the invocation a separate .js file versus in-line)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
This is webpage.html loaded into an iFrame
<button id="button" onclick="window.parent.postMessage('Hello from Web Context', '*');">Say Hello</button>
</body>
</html>