Trouble using Titanium's webview to fire an API event

问题

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.

回答1:

// 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);
});

回答2:

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

回答3:

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;

来源：https://stackoverflow.com/questions/2685409/trouble-using-titaniums-webview-to-fire-an-api-event

标签

webview

addeventlistener

titanium