locked
Send parameters to function inside iFrame

    Question

  • Hi all,

     

    Im using google map inside a iframe in windows 8 java script App. map is inside (map.html page)

    I embedded map.js file that have a mechanism to draw route path inside map.

    I need to invoke that function when button click on my parent  HTML page (default.html)

    How can i do it

    Tuesday, October 15, 2013 10:46 AM

Answers

  • The only communication method between app and iframe is postMessage, to which you supply a single string argument. What works best (I do this in Chapter 2 of my book linked below) is to build an object with your method name and arguments, JSON.stringify it, pass it to postMessage, and then in the iframe do JSON.parse or eval to get the object back, get the method name, and call it with the args. In my book I provide some generic code to do exactly this (as well as raise events from the iframe).

    To show the calling part of that code, here's the function for the app:

    function callFrameScript(frame, targetFunction, args) {
        var message = { functionName: targetFunction, args: args };
        frame.postMessage(JSON.stringify(message), "ms-appx-web://" + document.location.host);
    }
    

    Here's the postMessage handler for the 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; } var call = JSON.parse(msg.data); if (!call.functionName) { throw "Message does not contain a valid function name."; } var target = this[call.functionName]; if (typeof target != 'function') { throw "The function name does not resolve to an actual function"; } return target.apply(this, call.args); }


    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Also see second edition preview


    • Marked as answer by PrabathM Wednesday, October 16, 2013 8:47 AM
    Tuesday, October 15, 2013 10:25 PM

All replies

  • The only communication method between app and iframe is postMessage, to which you supply a single string argument. What works best (I do this in Chapter 2 of my book linked below) is to build an object with your method name and arguments, JSON.stringify it, pass it to postMessage, and then in the iframe do JSON.parse or eval to get the object back, get the method name, and call it with the args. In my book I provide some generic code to do exactly this (as well as raise events from the iframe).

    To show the calling part of that code, here's the function for the app:

    function callFrameScript(frame, targetFunction, args) {
        var message = { functionName: targetFunction, args: args };
        frame.postMessage(JSON.stringify(message), "ms-appx-web://" + document.location.host);
    }
    

    Here's the postMessage handler for the 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; } var call = JSON.parse(msg.data); if (!call.functionName) { throw "Message does not contain a valid function name."; } var target = this[call.functionName]; if (typeof target != 'function') { throw "The function name does not resolve to an actual function"; } return target.apply(this, call.args); }


    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Also see second edition preview


    • Marked as answer by PrabathM Wednesday, October 16, 2013 8:47 AM
    Tuesday, October 15, 2013 10:25 PM
  • The only communication method between app and iframe is postMessage, to which you supply a single string argument. What works best (I do this in Chapter 2 of my book linked below) is to build an object with your method name and arguments, JSON.stringify it, pass it to postMessage, and then in the iframe do JSON.parse or eval to get the object back, get the method name, and call it with the args. In my book I provide some generic code to do exactly this (as well as raise events from the iframe).

    To show the calling part of that code, here's the function for the app:

    function callFrameScript(frame, targetFunction, args) {
        var message = { functionName: targetFunction, args: args };
        frame.postMessage(JSON.stringify(message), "ms-appx-web://" + document.location.host);
    }

    Here's the postMessage handler for the 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; } var call = JSON.parse(msg.data); if (!call.functionName) { throw "Message does not contain a valid function name."; } var target = this[call.functionName]; if (typeof target != 'function') { throw "The function name does not resolve to an actual function"; } return target.apply(this, call.args); }


    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Also see second edition preview

    Kraig I did it and its working fine when Visual studio running on background. But when create app package and run it it isnt working


    Sunday, November 10, 2013 9:48 AM
  • Can you be more specific? Does it work when you have the project in VS and "Start without debugging"? What is the nature of the failure? And when you say "create an app package" do you mean you're then sideloading the app on another device or what?
    Monday, November 11, 2013 4:46 PM
  • Here is the issue...

    I have two pages inside iframe. One is pivot navigation page. Other one is its detail page. what i did is when click item on the pivot page i sent its id to the detail page . detail page has function to load items to detail page dynamically. I called it through your method.

    But case is some times that function not executed within runtime. sometime works.

    Unfortunately i cant share the code with you.

    if i have your email or any contact it will helpful for me. I need to fix this issue within few hours.

    Thursday, November 14, 2013 8:35 AM
  • Can you be more specific? Does it work when you have the project in VS and "Start without debugging"? What is the nature of the failure? And when you say "create an app package" do you mean you're then sideloading the app on another device or what?

    Here is the issue...

    I have two pages inside iframe. One is pivot navigation page. Other one is its detail page. what i did is when click item on the pivot page i sent its id to the detail page . detail page has function to load items to detail page dynamically. I called it through your method.

    But case is some times that function not executed within runtime. sometime works.

    Unfortunately i cant share the code with you.

    if i have your email or any contact it will helpful for me. I need to fix this issue within few hours.

    Thursday, November 14, 2013 8:41 AM
  • I don't know what might be happening, exactly. All I can suggest is to do a few more specific tests just using postMessage to check the message passing capability. If that works (using, say, text in some element in the iframe for output), then we'd have to investigate how the messages are being processed and go from there.
    Thursday, November 14, 2013 4:20 PM
  • Case is sometimes message have been passing. But some times not.
    Thursday, November 14, 2013 5:29 PM