Detecting when webview content has been loaded

[James Mortensen]

I'm aware that postMessage can be used to communicate both to and from a webview element.  However, our app must do this as soon as the chrome-extension page loads.  When using DOMContentLoaded or the load events, both of these fire BEFORE the webview content is done loading.

I tried to see if I could add listeners to the webview to detect when it loads; however, there is no addEventListener on the contentWindow or the parent element.  Is there a way to detect when this remote content has completed loading so I can send it a message?

This is Canary, the latest and greatest on Mac OS X.

Thank you,

James

[James Mortensen]

Here is what I'm doing for now:

var webviewListener = null;

window.addEventListener("DOMContentLoaded", function() {

    webviewListener = setInterval(function() {

        if(document.getElementById("feedback").contentWindow === undefined) 

            console.warn("undefined!!! Keep trying...");

        else {

           console.info("feedbackWrapper load...");

   var message = { message: "Hello world" };

   document.getElementById("feedback").contentWindow.postMessage(message,"*");

           clearInterval(webviewListener);

        }

    },500);

    

}, false);

This is really lame, but it's working until something better, like an actual event, comes along.

James

[Joe Marini]

Try this:

webview.addEventListener("loadstop", function(e) {
  webview.contentWindow.postMessage(...);

});

--
You received this message because you are subscribed to the Google Groups "Chromium Apps" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-app...@chromium.org.
To post to this group, send email to chromi...@chromium.org.
Visit this group at http://groups.google.com/a/chromium.org/group/chromium-apps/?hl=en.
For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.
 
 

--
Joe Marini

Developer Advocate / Chrome

joem...@google.com | +Joe Marini | @joemarini

[James Mortensen]

Thank you Joe Marini, this is exactly what I was looking for.

For anyone else wanting to use this, keep in mind that the webview listener must be bound AFTER the DOMContentLoaded event fires, in order to make sure the element exists on the page before trying to add the listener.

James

[George Crawford]

Hi Joe, James,

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.

[Fady Samuel]

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

with

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

That ought to do the trick.

Fady

[George Crawford]

Aah, great Fady. Thanks for clearing that up!




George

___________________

George Crawford
Labs developer, FT Labs [labs.ft.com | 0870 085 2038 | @ftlabs]

--

------------------------------

[Hummingbird Sales]

Ugh, my app is not going into the application, only going to index.html, and not going to the configuration page

-- 

Sales Representative

Hummingbird Point of Sale

PO Box 298

Elm Grove, WI 53122

www.hummingbirdpos.com

The information transmitted, including any attachments, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited, and all liability arising therefrom is disclaimed. If you received this in error, please contact the sender and delete the material from any computer.

 

Follow Us On Facebook & Twitter!