Webview Load Event
I'm currently using a webview to display various local html pages, I'm wanting to pass data back and forth between the web view and my application but I seem to be running into a couple of issues.
To provide my webview with data I'm adding a webview load event listener than in turn fires off a "populateData" event which the page picks up, this works fine for the page that is loaded first in the web view, the problem is it doesn't work for subsequent pages. The load event is definitely being fired on each page load but the populateData event is never fired, this seems a logical way of providing data to each page of a webview. Code samples below:
app.js
webview.addEventListener('load', function() {
alert("Webview Load");
Ti.App.fireEvent('populateData', {
'patient': patient,
'settings': {
'name': Ti.App.Properties.getString('name'),
'email': Ti.App.Properties.getString('email')
}
});
});
HTML Pages
Ti.App.addEventListener('populateData', function(data) {
alert("Populate Data Fired");
});
In the instance above the alert box "Populate Data Fired" only ever appears once but "Webview Load" appears on each page load. If anyone can shed any light on this particular issue it would be much appreciated.
5 Answers
-
Hi,
This code works for me:
Titanium.UI.setBackgroundColor('#000'); var win = Ti.UI.createWindow({ title:'Test', backgroundColor:'#fff' }); var wv = Ti.UI.createWebView({ url: 'http://www.google.hu' }); wv.scalesPageToFit = false; Ti.App.addEventListener('populateData', function(data) { alert("Populate Data Fired"); }); wv.addEventListener('load', function() { alert("Webview Load"); Ti.App.fireEvent('populateData', {}); }); win.add(wv); win.open();
Every time I click on a link, all of the alerts show. I use the SDK v1.4.0. I've tried it on iPhone and Android as well.
I don't know, what is your problem. In my example (with your code) works good. Is your patient variable defined? Is it global or local?
Maybe you could try to add events to webview, not Ti.App. Like this:
wv.addEventListener('populateData', function(data) { alert("Populate Data Fired"); }); wv.addEventListener('load', function(e) { alert("Webview Load"); e.source.fireEvent('populateData', {}); });
-
Our examples are slightly different, I'm using Ti.App.addEventListener in my Javascript on included HTML pages which works for the first loaded page.
e.g.
<script type="text/javascript"> Ti.App.addEventListener('populateData', function(data) { alert("Populate Data Fired"); }); </script>
-
I tried the example you gave but unfortunately this doesn't seem to work, I appreciate your efforts though!
There seems to be something more sinister at play here (possibly local to my installation since it works for you), I can't fire or listen for events once I have navigated away from the initially loaded page within a web view, actually upon closer inspection it seems Ti and Titanium are undefined when landing on a new page.
It does work if I re-create the web view every time I want to navigate to another page but obviously this isn't very efficient, however I may have to resort to that if I continue to have trouble because unfortunately I have deadlines to meet!
-
Seems like the bug is still around. Thanks to Adam that it can be work-around.
-
Hmmm, I've played a little bit around this. It seems to be a Titanium bug. The onload function is called only once as well. You could report it on https://appcelerator.lighthouseapp.com/ .
I've found a workaround though.
This is the app.js code:wv.lastURL = null; wv.addEventListener('load', function(e) { if (e.url != wv.lastURL && wv.lastURL) { wv.url = e.url; // refresh webview } else { Ti.App.fireEvent('populateData'); } wv.lastURL = e.url; });
And this is the code in your HTML:
Ti.App.addEventListener('populateData', function(data) { alert("Populate Data Fired"); Ti.App.removeEventListener('populateData', this); //important });