I am trying to make an app where two users can interact through webview. I want to get a String variable from javascript to Java so that I can save it in my Sqlite database.(And vice versa)
Calling Java/Kotlin code from JavaScript
There's a feature of Android WebView called Javascript Interface which is what you should look for.
It allows you to run your java/kotlin code from your javascript code.
You can define an interface by
val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")
Here, WebAppInterface defines the methods which you want to be called from javascript.
/** Instantiate the interface and set the context */
class WebAppInterface(private val mContext: Context) {
/** Show a toast from the web page */
#JavascriptInterface
fun showToast(toast: String) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
}
}
"Android" here is an interface added to your webview and can be used in your javascript code to call Android methods.
Once this is done, you can call the methods from your javascript,
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
Keep in mind that the interface callbacks are not always called in main thread. So, if you want to perform any UI operations, make sure you use runOnUiThread.
Calling JavaScript function from Java/Kotlin code
There's a feature of Android WebView called Evaluate Javascript for API 19+ to call your javascript functions from java/kotlin code.
For example, for the following javascript:
<script type="text/javascript">
function printName(name) {
console.log(name);
}
</script>
You can write this code to call this JS function:
yourWebview.evaluateJavascript("printName(\'TEST\')")
Related
I am creating an ActiveX control for a hardware (card swiper) device. I have understanding of ActiveX development and working, but I am little stuck with my specific scenario. Device SKD (dll files) have method to activate swiper/chip reader in order to be in listening state. Assume the following:
SDK sdk = new SDK();
sdk.RegisterCallback(GlobalCallback);
sdk.ActivateSwiper();
public void GlobalCallback(op, .., ..)
{
switch(op) {
case Swiped:
readCardData();
break;
case TransactionData:
readData();
break;
//. . . .
}
Above code is just for example. SDK has a global callback method for any event triggered through device (eg, card swiped, ICC seated, etc). If the SDK is being used in WPF/WinForm app, it is super easy get it working. But in my case, I must need to handle the raised event in javascript on my web page.
So, I have exposed a method in ActiveX to turn on the device, which works perfect:
[Guid("4794D615-BE51-4a1e-B1BA-453F6E9337C4")]
[ComVisible(true)]
[ClassInterface(ClassInterfaceType.None)]
[ComSourceInterfaces(typeof(IComEvents))]
public class MyComObject : IComObject
{
[ComVisible(true)]
public string ActivateDevice()
{
SDK sdk = new SDK();
sdk.RegisterCallback(GlobalCallback);
string resultCode = sdk.ActivateSwiper();
return resultCode;
}
//. . <other code> . . .
}
and use it in webpage as:
<object id="myComComponent" name="myComComponent" classid="clsid:4794D615-BE51-4a1e-B1BA-453F6E9337C4"></object>
<script language="javascript" type="text/javascript">
var returnCode = myComComponent.ActivateDevice(); //or by creating ActiveXObject
</script
I have also got the idea about how to handle events using ActiveX on webpage. I learnt it from HERE. But the event is handled by calling the exposed method to raise event. And in my case, when card is swiped, the call will go to GlobalCallback() method.
Questioins:
Is there any workaround, I can implement handler in my scenario, to make it usable on javascript?
I am thinking of something like PropertyChanged event, bound to a string property, which holds the derived card data. and the handlers returns this property value. Is there any workaround possible like this? I need little help with this.
I am thinking this as:
public static string CARD_DATA;
public void GlobalCallback(op, .., ..)
{
switch(op) {
case Swiped:
CARD_DATA = readCardData();
//and CARD_DATA is bound to property-changed event, and its handler returns its value.
//other code
Is this even possible? If so, What to be exposed? and How to use it? as this property will be changed internally, when card is swiped, and case Swiped: is executed. Is there any workaround?
Other Info:
Web App is MVC 4 famework based
Device is The Augusta (IDTech). (they don't have actieX/plugin for web)
I'm writing a JavaFX App, which Interacts with the JavaScript, Using WebView and WebEngine (.executeScript() Method).
Here, I have this part of code from Medow.java, which loads map.html(Contains JavaScript Code), And This Code Works Pretty well:
add_button.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent ea5) {
// webEngine.executeScript("document.fun();"); // For Drawing Shapes
if (add == false) {
webEngine.executeScript("document.fun();"); // For Drawing Shapes
add = true;
}
// }
else {
webEngine.executeScript("document.reSet();"); // To remove Drawing Shapes
add = false;
}
}
});
In Here
webEngine.executeScript();
Is Invoking Appropriate JavaScript function's
But Now, I want my Java Code to Invoke Some JS function, when the Program Starts, So I'm directly writing :
webEngine.executeScript("document.draw();");
right Under/after the code, which loads the map.html file.
So, now as Both of the
webEngine.execute("document.fun();"); and webEngine.executeScript("document.draw();"); are nearly similar, I cannot Understand what Difference does, it makes to be inside the <button>.setOnAction block and to be outside it, Because both WebEngine and webView are declared as Global Variables.
cannot invoke document.draw() function using HTML's onLoad options, because i need to pass some Values To function draw from java.
The Exception Generated is :
netscape.javascript.JSException: TypeError: undefined is not a function (evaluating 'document.draw()')
how can i make this work? thank you
While Continuously trying to figure out whats the cause, I Discovered That the HTMLDocument Object, created using webEngine.load(), is for some reason visible only inside the handle method, And nowhere else, even though its been defined outside.
What happens here is that you want to call a JavaScript function before the content is loaded completely. Therefore the function draw is not defined. So the only way is to wait until the page is loaded. There are two ways that might prove useful:
Add a changelistener on the state and execute the JavaScript once the loading has succeeded:
String htmlURL = ...
webView.getEngine().load(htmlURL);
webView.getEngine().stateProperty().addListener(new ChangeListener<Worker.State>() {
#Override
public void changed(ObservableValue<? extends Worker.State> ov, Worker.State t, Worker.State t1) {
if (t1 == Worker.State.SUCCEEDED) {
// this will be run as soon as WebView is initialized.
webView.getEngine().executeScript("document.draw()");
}
}
});
The other way is more of a solution within JavaScript. You first have to register a bridge between Java and your html page (has to be done in the SUCCEEDED state change as well, see WebView callback from Javascript):
JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("app", this);
Now this JavaObject is referenced in your JavaScript. Let's say that you have a method on the class that is of the above type of this:
public void executeOnPageLoaded() {
...
}
Then you can call this method from Javascript. If you are using jQuery it could look like this:
$( document ).ready(function() {
console.log( "ready!" );
app.executeOnPageLoaded();
});
This second approach is more complex but in the long run may give you more flexibility.
When you start working with JavaScript in the WebView is is a good idea to have Firebug lite in there as well, so investigate what is happening but mainly to have a means to seed the console output of JavaScript. See Java FX application onload event
I'm looking for a way to make async calls to Android's native code from JS
I have a Main Activity with the following code to make accessible native code to JS:
webView.addJavascriptInterface(new BindingHelper(this), "Android");
webView.loadUrl("file:///android_asset/www/index.html");
The BindingHelper Class contains something like this:
#JavascriptInterface
public void showToast(String toast) {
Toast.makeText(theContext, toast, Toast.LENGTH_SHORT).show();
}
#JavascriptInterface
public String SuperDuperComplexFunction () {
//A function that will need some time to finish...
return "{}";
}
The previous Methods can be called from the Index.html linked JS as follows:
<script type="text/js">
Android.showToast("Toast");
</script>
In that way the showToast() function is executed synchronously. What I need is to call the method SuperDuperComplexFunction(); in a aSync way (just like an AJAX Request), and when the method success take some action.
Any ideas?
One option is to use an Http Server in java code and then make the AJAX call on localhost. That way the Javascript call would be the exact same as any other AJAX call, and since you control the Http Server you can just have it call your SuperDuperComplexFunction()
I've used NanoHttpd in the past for something kind of similar but not quite the same.
I'm porting my website to Android, and using an Webview to show the content to user. There are a lot of Javascript functions in my website, and I want to intercept them. I already seen a "solution" here.
However, I think there should be a more proper way, using Javascript Interface:
this.webView.addJavascriptInterface(this.webJavascriptInterface, "Android");
This way, I have to modify my website to call both myFunction() and Android.myFunction(). I tried to leave a blank String in the interface:
this.webView.addJavascriptInterface(this.webJavascriptInterface, "");
but the result was as I guess, it couldn't work. Is there a way to override current Javascript functions in Webview?
// android
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
webView.loadUrl("javascript:function inputClick(val){native.abcd(val);}"); // override js function
}
});
webView.loadUrl("file:///android_asset/test.html");
webView.addJavascriptInterface(new Object() {
#JavascriptInterface
public void abcd(int val) {
Log.e(TAG, "#js abcd" + val);
}
}, "native");
<!-- html -->
<input type="button" onclick="inputClick(2)" value="button">
== add some explain at Sep 07,2015
because javascript function could be override, so you can override javascript function while page finished.
if not, normal implement maybe like this:
// js code
function inputClick(val) {
native.abcd(val); // native and abcd defined in WebView method addJavascriptInterface
}
but this normal implement is seems not work in iOS(Object-C), and must edit HTML page.
is just move the java-javascript bridge code from HTML to Java. (see method onPageFinished in example code)
You can do this by injecting a new javascript that redefines old function, basically you can override existing function with this.
For example, to override window.print() function, I use this
webView.loadUrl("javascript:window.print = function() {Android.printPage();}")
I want to let my android app call a function written in javascript and expect a return value from that.
I understand that WebView.loadUrl works asynchronously, so what I am doing now is to let javascript notify my android app when it is done and pass in the return value by calling a java function using javascriptinterface.
I wonder if there are better ways of doing this and whether anyone has noticed any message loss between javascript and android.
I just got your problem.
Have a JS function like this.
function androidResponse() {
window.cpjs.sendToAndroid("I am being sent to Android.");
}
Set up Android (Java).
Have a final class like this
final class IJavascriptHandler {
IJavascriptHandler() {
}
// This annotation is required in Jelly Bean and later:
#JavascriptInterface
public void sendToAndroid(String text) {
// this is called from JS with passed value
Toast t = Toast.makeText(getApplicationContext(), text, 2000);
t.show();
}
}
Then on your WebView load have.
webView.addJavascriptInterface(new IJavascriptHandler(), "cpjs");
Call JS function
webView.loadUrl("javascript:androidResponse();void(0)");
UPDATED
Also I had a very bad time experiencing problems while passing hundreds of lines of string to JS from Java and I have subsequent post on StackOverflow with no good answers but finally resolved it knowing problme was of special characters inside string so take of special characters when you use string passing to and fro.
Passing Data From Javascript To Android WebView
HTML String Inside Nested String
HTML TextArea Characters Limit Inside Android WebView