Detecting when webview content has been loaded

5,747 views
Skip to first unread message

James Mortensen

unread,
Feb 11, 2013, 11:17:25 AM2/11/13
to chromi...@chromium.org
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

unread,
Feb 11, 2013, 11:36:49 AM2/11/13
to chromi...@chromium.org
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

unread,
Feb 11, 2013, 3:25:22 PM2/11/13
to James Mortensen, Chromium Apps
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

James Mortensen

unread,
Feb 14, 2013, 3:49:28 PM2/14/13
to chromi...@chromium.org, 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

unread,
Mar 27, 2013, 8:18:08 AM3/27/13
to chromi...@chromium.org, James Mortensen
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

unread,
Mar 27, 2013, 10:37:29 AM3/27/13
to George Crawford, chromi...@chromium.org, James Mortensen
Replace:
webview.addEventListener("message", function(event) {

with

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

That ought to do the trick.

Fady

George Crawford

unread,
Mar 27, 2013, 10:39:52 AM3/27/13
to Fady Samuel, chromi...@chromium.org, James Mortensen
Aah, great Fady. Thanks for clearing that up!




George

___________________

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

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

Hummingbird Sales

unread,
Mar 27, 2013, 10:40:02 AM3/27/13
to Fady Samuel, George Crawford, Chromium Apps, James Mortensen
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!


Reply all
Reply to author
Forward
0 new messages