Funzione callback Delphi da TWebBrowser con javascript su Delphi XE6 per tutte le piattaforme (incluso iOS, ANDROID)?

Question

Ho bisogno di creare un'applicazione su Delphi XE6 per Android e iOS. Questa applicazione deve essere utilizzata da TWebBrowser per mostrare Google Maps, quindi ho bisogno di "inviare" da Delphi a javascript e di "ricevere" il comando da javascript a Delphi. In questo modo posso mostrare un mercato sulla mappa e quindi sapere quando l'utente fa clic sull'indicatore. Ho trovato questo article sul web per eseguire javascript con il codice Delphi.

Ma non ho idea di come possa chiamare una procedura delphi da javascript. Per esempio io ho questa procedura su Delphi:

procedure JSFeekback(aParm1, aParm2, aParm3, aParm4: string); 

e voglio utilizzare codice Javascript sul TWebBrowser chiamarlo un pass 4 parametri. Ho trovato domande simili ma solo per applicazioni Windows e le risposte non funzionano su Android (non ho provato su iOS).

Answer 1

Con JavaScript è molto comune accedere ai server HTTP, ad esempio su jQuery. Se è possibile rendere disponibile il codice Delphi tramite HTTP, sia come server locale sul Web, il codice JavaScript può richiamare il codice Delphi inviando una richiesta HTTP e ricevere i dati dalle funzioni Delphi come risposta HTTP.

Un'altra opzione sono WebSockets. Sono un'estensione di HTTP, funzionano in modo asincrono in modo che il server Delphi possa inviare dati allo script, senza dover prima attendere una richiesta (nota come server push/Comet).

Questa sarebbe una soluzione ampiamente utilizzata, basata su standard, che non si basa su un particolare client Web. La libreria gratuita open source Internet Direct (Indy) può essere utilizzata su tutte le piattaforme supportate per creare server HTTP, stand-alone o integrati con l'applicazione.

Altri protocolli disponibili per la comunicazione tra JavaScript e server potrebbero anche essere degni di attenzione, ad esempio STOMP.

Per la vostra funzione specifica, la chiamata HTTP potrebbe utilizzare una richiesta GET con i parametri:

http://localhost/JSFeekback?par1=val1&par2=val2&par3=val3&par4=val4 

Answer 2

Il modo corretto per farlo è con la funzione addJavascriptInterface del WebView Android, come si può vedere here, here e here.

Firemonkey TWebBrowser non espone questa funzione per impostazione predefinita.

C'è un controllo del wrapper WebView personalizzato in DPF Android come si può vedere here.

È possibile modificare tale controllo per aggiungere la funzione addJavascriptInterface.

Per TWebBrowser su IOS è possibile utilizzare i controlli personalizzati del browser Web in sourceforge e here.

Un altro modo possibile per farlo è con l'evento OnShouldStartLoadWithRequest di TWebBrowser.Si potrebbe fare qualcosa di simile:

<script language=”javascript” type=”text/javascript”> 
window.location.href=”#param1&param2&param3&param4”; 
</script> 

o

<script language=”javascript”> 
window.navigate(”javascript:thisisatest();”); 
</script> 

E vedere se la proprietà URL del OnShouldStartLoadWithRequest contiene #param1&param2&param3&param4 o javascript:thisisatest();.

Fondamentalmente l'idea è di passare a un URL che non modifica l'URL della pagina esistente e raccogliere quell'URL nell'evento OnShouldStartLoadWithRequest.

Answer 3

TWebBrowser.URL può essere modificata entro javascript:

window.location.href=”#param1&param2&param3&param4”; 

quindi eseguire un timer per controllare TWebBrowser.URL, ottenere i params, chiamare il JSFeekback, reimpostare l'URL.

O nessun timer, il codice come questo:

wb1.EvaluateJavaScript("window.location.href=”#param1&param2&param3&param4”;"); 
    getParams(wb1.URL); 
    JSFeekback(p1, p2, p3, p4);