Detecting scroll on a webview
I'm trying to detect scroll (or even just click, any kind of interaction really) on a webview, but can't get it to work. Results are different across platforms. Initially I was trying to open a webview inside a scrollview, but was experiencing some problems getting the webview to actually show. Here, the webview never displays:
var win1 = Titanium.UI.createWindow({
backgroundColor:'#000'
});
var wv = Titanium.UI.createWebView({
html: '<html><body><h2>Webview in Scrollview Test</h2></body></html>',
top:0,
backgroundColor:'#fff'
});
var sv = Ti.UI.createScrollView({
backgroundColor:'#660000',
top:0,
height:320
});
sv.add(wv);
win1.add(sv);
win1.open();
So I decided to simplify, taking advantage of the fact that if the content of a webview is longer than the specified height, the view automatically scrolls. However, this code behaves strangely on iPhone and Android:
var win1 = Ti.UI.createWindow({
backgroundColor:'#fff'
});
var wv = Ti.UI.createWebView({
html: '<html><body><h2>Test</h2><p>Testing for touch.</p>
<p>I</p><p>need</p><p>to</p><p>be</p><p>longer</p>
<p>than</p><p>one</p><p>page</p><p>length</p>
<p>blah.</p><p>blah.</p><p>blah.</p><p>blah.</p>
<p>blah.</p><p>blah.</p><p>blah.</p><p>blah.</p>
<p>blah.</p></body></html>',
height:320
});
wv.addEventListener('touchend', function(e) {
Ti.API.info('"heard the touchend event"');
});
win1.add(wv);
win1.open();
- On Android, the event listener never triggers. ('click', 'touchmove', etc don't work either…)
- On the iPhone, the event listener triggers, but the webview is no longer scrollable.
Any ideas?
2 Answers
-
Accepted Answer
True on what Daniel said.
You can work with the scroll in the webview( so the webpage needs to handle this) and communicate with Titanium using events. -
On #2, refer to webview API doc, it says
"Since a webview internally wants to handle its own events, scrolling and other related touch events against it's own view surface, you cannot have both Titanium style events against the webview instance and internal Javascript events in the DOM. You must choose between one or the other."
So if you any touch, click or similar events on the webview, the webview events itself will not work, such as scrolling. Been there, done that.