Trouble using Titanium's webview to fire an API event

StackOverflow https://stackoverflow.com/questions/2685409

Question

I'm trying to fire an event from an external HTML page opened inside of Titanium's webview.

app.js file...

var group, now, tab, view, window;

now = new Date();
view = Titanium.UI.createWebView({url: 'http://MYWEBSITE.com/index.htm?time=' + now.getTime()});

window = Titanium.UI.createWindow({tabBarHidden: true, navBarHidden: true});
window.add(view);

Titanium.App.addEventListener('browse', function(e) {
    Ti.API.info("I received " + e.something + " from the webview.");
});

group = Titanium.UI.createTabGroup();
tab = Titanium.UI.createTab({title: 'window', window: window});
group.addTab(tab); 
group.open(tab);

js excerpt from web page...

$("#testButton").mousedown(function() {
    alert ("I got clicked.");
    Ti.App.fireEvent('browse', {something:'stuff'});
});

(I include the time in the URL to ensure the page is always fresh.)

Adding the event listener as shown above, or using view.addEventListener, compiles but ultimately doesn't work.

Using Titanium.UI.WebView.addEventListener produces an error message that the object doesn't exist.

Do I need to open the URL/webview in a different manner?

Also, since Titanium.App.fireEvent is not a recognized function, except to Titanium, how does one prevent a JavaScript error?

Thanks.

Was it helpful?

Solution 

// from web page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div id='testButton'>TEST BUTTON</div>
</body>

<script>
    var _button = document.getElementById ("testButton");
    _button.onmousedown = function () {
        alert (this.id);
        Ti.App.fireEvent('fromwebview', {name:this.id});
        return false;
    };

</script>
</html>

from apps.js

Ti.App.addEventListener('fromwebview', function(data) 
{ 
    Titanium.API.info("--> " + data.name);
});

OTHER TIPS

Just to warn you all - I don't think this works with remote pages anymore for security reasons. Spent ages trying fruitlessly!

You can make this work on your remote html page by including the Titanium Injection code. For sdk 1.8.3 it's the following. Now your remote html page can talk to the device.

var Ti = {_event_listeners:[],createEventListener:function(listener ){ var newListener={ listener:listener ,systemId:-1 ,index:this._event_listeners.length };this._event_listeners.push(newListener);return newListener;},getEventListenerByKey:function(key,arg){for(var i=0;i<this._event_listeners.length;i++){if(this._event_listeners[i][key]==arg){return this._event_listeners[i];}} return null;},API:TiAPI,App:{addEventListener:function(eventName,listener) {var newListener=Ti.createEventListener(listener);newListener.systemId=TiApp.addEventListener(eventName,newListener.index);return newListener.systemId;},removeEventListener:function(eventName,listener) {if(typeof listener=='number'){TiApp.removeEventListener(eventName,listener);var l=Ti.getEventListenerByKey('systemId',listener);if(l!==null){Ti._event_listeners.splice(l.index,1);}}else{l=Ti.getEventListenerByKey('listener',listener);if(l!==null){TiApp.removeEventListener(eventName,l.systemId);Ti._event_listeners.splice(l.index,1);}}},fireEvent:function(eventName,data) {TiApp.fireEvent(eventName,JSON.stringify(data));}},executeListener:function(id,data) {var listener=this.getEventListenerByKey('index',id);if(listener!==null){listener.listener.call(listener.listener,data);}}};var Titanium=Ti;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top