0

I have a Javascript Windows Store Application that hosts an iframe. The webpage inside of my iframe is not aware of my app, so it doesn't have any PostMessage interface to my app.

The iframe will set a cookie when I 'log in' in the iframe. But in my app, I don't believe that there is a way that I can get the iframe cookie. Is this correct?

What if the web page knows about my application? (i.e. I can change the webpage in the iframe) Do I use PostMessage?

Youngjae
  • 24,352
  • 18
  • 113
  • 198
louis.luo
  • 2,921
  • 4
  • 28
  • 46

1 Answers1

0

You can use PostMessage that your main page will receive the message.

Here is working example in Win8 Developer Preview:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024, height=768" />
<title>WinWebApp1</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<script src="/winjs/js/ui.js"></script>
<!-- WinWebApp3 references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
        <script type="text/javascript">

            window.attachEvent("onmessage", receiveMessage);

            function receiveMessage(e) {
                if (e.origin == "http://www.scrumpt.com")
                    document.getElementById("target-element-id").innerHTML = e.data;

            }
</script>
</head>
<body>
    <iframe src="http://www.scrumpt.com/frametest2.html" style="display: block; width: 699px; height: 296.95px; left: -499px; top: 0px;"></iframe>
<div data-win-control="WinJS.UI.ViewBox" style="display: block; top: 50%;">
        <div class="fixed-layout">
        <div id="target-element-id">Click on Send Message above</div>
    </div>
    </div>
</body>
</html>

On the server (it is live at this moment on http://www.scrumpt.com/frametest2.html) you have:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function send() {
      parent.postMessage('hello world', '*');
}
</script>
</head>
<body>
<a href="javascript:send()">Send message</a>
</body>
</html>

make sure that your div ("target-element-id") has the correct id when if you copy paste the code above. VS might change the id to "Div1" when pasting.

  • Thank you very much @TiagoAndradeSilva, but in my question, I pointed out that the "server" (using your terminology :P) is not aware of my app, which means it is not doesn't have this postMessage set up. So That's why I am asking whether this is impossible. – louis.luo Jan 18 '12 at 01:28
  • message passing is a client feature, ie, it's completely supported by the browser and you can use it to allow communication between "components" loaded by the browser (besides communication with frames, messages are also used to allow communication with workers).So, you don't need any special configuration in the server to support message passing between your document and an iframe which loads remote content. The only thing I'd "change" is I'd probably call the toStaticHtml method to sanitize the received data before passing it to the innerHTML property. – Luis Abreu Jan 18 '12 at 09:39
  • Thanks for the reply @LuisAbreu . First, this is an app, not a browser situation. Second, let say we are in a browser, I thought the same origin policy applied here, so how will you be able to use other domain's cookie without postingMessage? – louis.luo Jan 18 '12 at 17:40
  • RFC 2109 specifies that the Domain setting on cookies must have two periods. So, The Metro app would not be able to read the cookie despite the setting that you put in "domain" when setting the cookie. So you are right. You cannot share information from the Web with a Metro app using cookies. – Tiago Andrade e Silva Jan 18 '12 at 23:31