locked
Can't post message to iframe from page fragment load RRS feed

  • Question

  • In an HTML5 Metro style app with fragment navigation, I have a Bing Map in an iframe and I'd like to post a message to it when the page fragment that contains it is loaded.

    in the map.js file, the event listener is being hooked up with

    window.addEventListener("message", receiveMessage, false);

    and I'm sending the message from the page's fragment load with this code (no errors thrown)

    document.frames["MapFrame"].postMessage(JSON.stringify(series), "ms-wwa-web://" + document.location.host);

    the frame is defined here:

    <iframe id="MapFrame" src="ms-wwa-web:///html/map.html" style="width: 100%; height: 100%;">
    < /iframe>

    Any suggestions?

    Thanks,

    Michael


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Thursday, December 29, 2011 11:33 PM

Answers

  • Michael,

    You cannot use the queueEvent to talk directly to the iframe, however I think you can get around the timing issue that I believe is caused by the fragment is still in the loaded state:

    In your fragment define a customer listener for the event and a function to handle it.  In this case myCustomEvent has only one property 'mycooldata'.  Add as many properties as you wish (separate with commas):

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        // Debug.enableFirstChanceException(true);
        WinJS.Application.addEventListener('myCustomEvent', onMyCustomEvent, true);
    
        
        function onMyCustomEvent(e) {
            Text1.innerText = e.mycooldata;
        }
    
    
    

    Inside of your append code where you are attempting the postmessage set up the customer event with whatever data you wish:

    WinJS.Application.queueEvent({ type: 'myCustomEvent', mycooldata: 'to fragment' });
    


    Instead of setting the innerText, post the message the way you were doing this in the fragment append handler: onMyCustomEvent above.

    This should allow the fragment to be appended and then queue the custom event allowing you to append.

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, January 3, 2012 5:40 PM
    Moderator

All replies

  • Hi Michael,

    When you say "no errors thrown" did you have the debugger javascript console window up and see if there is anything in there?  Where you able to validate that document.frames["MapFrame"] resolved correctly?

    -Jeff


    Jeff Sanders (MSFT)
    Friday, December 30, 2011 3:37 PM
    Moderator
  • I have figured out that it is a timing issue - if I wait one second by putting my postMessage in a setTimeout() it works.

    Michael


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    • Proposed as answer by Anuj Sethi Tuesday, April 3, 2012 10:06 AM
    Friday, December 30, 2011 4:57 PM
  • Cool,

    Without debugging your code it is difficult to know why that is for sure.

    It sounds like at that point the function has not yet unwound so the message does not get posted correctly.  By doing the setTimeout you queue that function and it will execute when the fragment load unwinds.

    If that is the underlying issue, you could probably also use: WinJS.Application.queueEvent

    -Jeff


    Jeff Sanders (MSFT)
    Friday, December 30, 2011 5:25 PM
    Moderator
  • Jeff,

    Please show an example of how to use the queueEvent() in this instance.

    Thanks,
    Michael


    Michael S. Scherotter
    Principal Architect Evangelist Microsoft Corporation,
    Blog, Twitter, Facebook

    Tuesday, January 3, 2012 4:00 PM
  • Michael,

    You cannot use the queueEvent to talk directly to the iframe, however I think you can get around the timing issue that I believe is caused by the fragment is still in the loaded state:

    In your fragment define a customer listener for the event and a function to handle it.  In this case myCustomEvent has only one property 'mycooldata'.  Add as many properties as you wish (separate with commas):

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        // Debug.enableFirstChanceException(true);
        WinJS.Application.addEventListener('myCustomEvent', onMyCustomEvent, true);
    
        
        function onMyCustomEvent(e) {
            Text1.innerText = e.mycooldata;
        }
    
    
    

    Inside of your append code where you are attempting the postmessage set up the customer event with whatever data you wish:

    WinJS.Application.queueEvent({ type: 'myCustomEvent', mycooldata: 'to fragment' });
    


    Instead of setting the innerText, post the message the way you were doing this in the fragment append handler: onMyCustomEvent above.

    This should allow the fragment to be appended and then queue the custom event allowing you to append.

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, January 3, 2012 5:40 PM
    Moderator