receiver.postMessage('Hello Kid!', '*'); window.parent.postMessage("Hello parent", '*');

[M_skovborg]

Hi I'am trying to get the postMessage to work in Finesse, with no luck

I have created a XML doc like this:

---SNIP----

<fieldset id="userfieldset" class="outline">

           <div>1916</div>

            <p>

            <div id="message"></div>

          </p>

           <br>

         <button id="send">Send Message</button>

         </p>

          <iframe id="receiver" src="http://myWebserver/finesse/SimpelHTML/receiver.html" width="100%" height="800">

              <p>Your browser does not support iframes.</p>

          </iframe>

----SNIP----

And a JS like this:

----SNIP----

// A function to handle sending messages.

    function sendMessage(e) {

        // Prevent any default browser behaviour.

        e.preventDefault();

        // Send a message with the text 'Hello Kid!' to the receiver window.

        receiver.postMessage('Hello Kid!', 'http://mywebserver/');

    }

    function receiveMessage(e) {

        // Check to make sure that this message came from the correct domain.

        //if (e.origin !== "http://s.codepen.io")

        //return;

        // Update the div element to display the message.

        messageEle.innerHTML = "Message Received: " + e.data;

    }

---SNIP----

It works when I use it outside Finesse, but not in Finesse.

Please advise

Br,

Morten Skovborg

[dlender]

You cannot send messages between gadgets with postMessage, you need to use the OpenSocial hub to send messages between gadgets.

See the HubTopicSampleGaget here: https://github.com/CiscoDevNet/finesse-sample-code/tree/master/HubTopicSampleGadget 

You basically need to initialize the hub to use whatever hub topic you want to use (I used sampleGadget.info as my hub topic).

gadgets.Hub.subscribe("sampleGadget.info", _dataRequestHandler);

you then publish to the hub this way:

gadgets.Hub.publish("sampleGadget.info", data);

and receive messages in your _dataRequestHandler(topic, data)

[dlender]

I see you aren’t trying to communicate between gadgets, you are trying to communicate from a gadget to an iframe within the gadget. You said your page and iframe work outside of Finesse.

Do your documents work when it is an iframe within an iframe?

[dlender · Accepted solution]

I was able to create a gadget that sends a message to a page in an iframe in the gadget and receives a message back from the iframe window to the gadget.

I will attach my gadget to this post.

Here is the page iframe.html that will be displayed in an iframe:

This is the iframe page that will receive the message from parent
// Called sometime after postMessage is called
function receiveMessage(event)
{
// Do we trust the sender of this message?
//if (event.origin !== "http://example.com:8080")
// return;

// event.source is window.opener
alert(event.data);
// event.data is "hello there!"

// Assuming you've verified the origin of the received message (which
// you must do in any case), a convenient idiom for replying to a
// message is to call postMessage on event.source and provide
// event.origin as the targetOrigin.
event.source.postMessage("hi there yourself! the secret response " +
"is: rheeeeet!",
event.origin);
}

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

Here is what I added to SampleGadget_Final of the Learning Sample Gadget

SNIP

"

Send Message

gadgets.HubSettings.onConnect = function () {
finesse.modules.SampleGadget.init();
$('#bing').attr('src',"http://localhost/iframe.html");
};

function sendMessage(e) {
// Prevent any default browser behaviour.
// e.preventDefault();
alert("Sending Message");
// Send a message with the text 'Hello Kid!' to the receiver window.
bing.postMessage('Hello Kid!', 'http://localhost');
}

window.addEventListener("message", receiveMessage, false);
// Called sometime after postMessage is called
function receiveMessage(event)
{
// Do we trust the sender of this message?
//if (event.origin !== "http://example.com:8080")
// return;

// event.source is window.opener
alert(event.data);
// event.data is "hello there!"

}