postMessage from webview to parent?

[KD]

Is it possible for the webview to send a postMessage to the parent (the chrome app) ? I read in another post that the other was is possible (parent sending message to webview) 

I watched the chrome apps office hours video, but could not figure that out.  

Any help would be appreciated. 

[Renato Mangini]

Yes, it is possible, as long as the webview content have received a message from the embedder before. In the page shown in the webview, you need a code like:

  onmessage = function(event) {

    if (event.origin.indexOf('chrome-extension://') != 0) {

      return;

    }

    // first message, store appWindow and appOrigin

    if (!appWindow || !appOrigin) {

      appWindow = event.source;

      appOrigin = event.origin;

    }

     

    ... // do whatever you want here

  }

and when you need to comunicate back:

  function messageApp(type, param) {

    if (!appWindow || !appOrigin) {

      log('Don\'t know where to send messages to, app hasn\'t initialized us yet.');

      return;

    }

    appWindow.postMessage({type: type, param: param}, appOrigin);

  }

Renato Mangini | Chrome Developer Advocate | man...@google.com | +55 11 2395-8608

--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-apps/-/IxzlaePxze4J.
To post to this group, send email to chromi...@chromium.org.
To unsubscribe from this group, send email to chromium-app...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/?hl=en.

[George Crawford]

Hi all,

I'm trying to do the same thing, but I'm struggling to get a message back from the <webview> to the host window.

window.js:

var webview,

targetOrigin = "http://example.com";

window.addEventListener('load', function() {

webview = document.getElementById('webview');

console.log('got webview:', webview);

webview.addEventListener("loadstop", function(event) {

webview.addEventListener("message", function(event) {

console.log('window received message:', event.data)

});

webview.contentWindow.postMessage({

command: 'handshake'

}, '*');

});

// Set webview src attribute

webview.src = targetOrigin;

});

Inside the webview:

function _receiveMessage(event) {

// First message: store appWindow and appOrigin

if (!appWindow || !appOrigin) {

appWindow = event.source;

appOrigin = event.origin;

if (DEBUG) _debug('Opened communication with the Chrome wrapper app.');

_sendMessage({

command: 'handshakereply'

});

}

if (DEBUG) _debug('Received message:', event.data);

}

function _sendMessage(data) {

if (!appWindow || !appOrigin) {

return console.error('Cannot send message to Chrome wrapper app - communication channel has not yet been opened');

}

appWindow.postMessage(data, appOrigin);

if (DEBUG) _debug('Sent message:', data);

}

window.addEventListener('message', _receiveMessage); 

The webview JS receives the handshake, and the reply is sent. However, the listener in window.js never logs a received message. I'm doing something wrong with the webview event listener in window.js - any suggestions?

---

This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL.  Registered in England and Wales with company number 53723.

[James Mortensen]

Hi George,

Can you show the HTML in the webview as well as the HTML in the remote content?  

Also, what error messages are you seeing?  You should be sure to post them and **all** relevant code and clearly identify what code is remote and what code exists in the app.

Only thing I can think of without seeing more is that you need:

appWindow = null;

appOrigin = null;

So that they won't be undefined when you go to check if values have been set.

James

[George Crawford]

Hi James,

Thanks for your reply. I actually double-posted, and got my answer in the other thread: https://groups.google.com/a/chromium.org/d/msg/chromium-apps/8SJH5gl-7bc/X3lWGidwsR0J.

Thanks all the same.

George