I am developing an android app with a web app loading on WebView. I want to invoke the web app button actions. I have implemented some changes on webpage to invoke native methods as shown below.
mWebview.addJavascriptInterface(new Object() {
#JavascriptInterface // For API 17+
public void callNativeHome() {
Log.d("btnsetup", "btnsetup");
}
}, "btnsetup");
But now I can't make any changes on web end as it's not my web screen. How I can access the button click events by ID or class name?
Web access is mandatory to Bind JavaScript code to Android code.
Android:
val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")
Web:
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
You can simply follow Bind JavaScript code to Android code.
Another workaround is to find the navigation URL. You can check/compare the redirection URL called after clicking that button.
For more information, you can check Handle page navigation in webview.
Related
I am trying to use an Android Webview to display some "active" content (sets of images that vary depending on some input settings). The content will be local (offline).
I would like to use Angular.js to control the media that will be displayed on the page.
So, to the problem... how can my Angular app receive JSON data on startup? The problem that I see is that the webview does not allow angular to lazy load additional files (I already ran into this while trying to use html templates for a custom directive. This required enclosing the HTML templates into the single HTML file).
My Android activity can write out the options somewhere, but how is Angular going to be able to read them? In other words, is there a way around the security settings of the webview which does not allow Angular.js to lazy load additional files?
I think that I've figured this one out. I realized that I can create a method in my Android Java code that is exposed to JavaScript (via #JavascriptInterface). This would allow me to call this method from my AngularJS app to get the JSON in a string (see this link for info on JavascriptInterface: http://developer.android.com/guide/webapps/webview.html). I'll post some code once I've proven that this works.
Here is the code. It works great.
MainActivity.java
public class MainActivity extends Activity {
private String MY_JSON_EXAMPLE = "{\"name\":\"John Doe\",\"email\":\"jdoe#testco.com\"}";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv = (WebView) findViewById(R.id.myWebView);
wv.getSettings().setJavaScriptEnabled(true);
wv.addJavascriptInterface(this, "AndroidMainAct");
wv.loadUrl("file:///android_asset/mypage.html");
}
#JavascriptInterface
public String getMyJSONData() {
return MY_JSON_EXAMPLE;
}
}
mypage.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h3>Load Test</h3>
<div ng-controller="MyController">
<div id="dataWaiting" ng-show="!myData.length">
Loading JSON...
</div>
<div id="dataLoaded" ng-show="myData.length">
Data Loaded: {{myData}}
</div>
</div>
</body>
</html>
app.js
var myApp=angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.myData = '';
this.loadData = function() {
// get the data from android
return AndroidMainAct.getMyJSONData();
};
$scope.myData = this.loadData(); // load data on instantiation
}]);
Exposing the data through the android JavascriptInterface method works great.
I have a block of html that has javascript embedded in it:
<!DOCTYPE html>
<html>
<body>
<h1>Testing</h1>
<script type="text/javascript">
var paEmbedId = 461745;
var paEmbedWidth = 600;
var paEmbedOemId = 24500;
var paServer = 'http://www.ncataggies.com/';
var paIframe = true;
</script>
<script type="text/javascript" src="http://www.ncataggies.com/oemjs/0/PhotoAlbum2009Embed.js"></script>
</body>
</html>
When I put the code inside a text document and run it from a browser(as a HTML file), the code runs perfectly.
How can I do this using a WebView in android?
You can use loadData method of WebView widget:
String summary = "<html><body>You scored <b>192</b> points.</body></html>";
webview.loadData(summary, "text/html", null);
// ... although note that there are restrictions on what this HTML can do.
// See the JavaDocs for loadData() and loadDataWithBaseURL() for more info.
If JS is not enabled, then you can also enable JS in WebView:
webview.getSettings().setJavaScriptEnabled(true);
But before that, you may want to read this from Android:
By default, a WebView provides no browser-like widgets, does not
enable JavaScript and web page errors are ignored. If your goal is
only to display some HTML as a part of your UI, this is probably fine;
the user won't need to interact with the web page beyond reading it,
and the web page won't need to interact with the user. If you actually
want a full-blown web browser, then you probably want to invoke the
Browser application with a URL Intent rather than show it with a
WebView.
I am Working on Android on a simple app .And i am new to Android . I have small task on WebView.I am adding a HTML page to Webview .And its working fine .And the problem is how to give the click action to "Click Button " which is the type of the colored text in HTML page.
If i am used the click Action in my javascrip how i able to get that click Action in My Intent.
mwebview.addJavascriptInterface(new JavaScriptInterface(this), "Android");//in js add this fn
<script type="text/javascript">
function buttonclickAction(toast) {
Android.showToast(toast);
}
</script>
I have html form with two input fileds and submit button.
When i click on submit button it goes in my javascript function...but it does not call the ajax function written in it.
Instead of calling ajax function the page gets reloaded
You not only have to use event.preventDefault() (or return false) in your event handler but you have to specifically disable the AJAX navigation for the form so jQuery Mobile doesn't do it's own form submission:
Here is one way using data-ajax (recommended):
<form data-ajax="false">
You can also do this by changing a default of jQuery Mobile when the mobileinit event fires:
<script src="jQuery-Core.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jQuery-Mobile.js"></script>
Notice the order of the <script> tags. The downside to this method is that it disables AJAX navigation for all elements, not just the single form you're dealing with, that's why I recommend using the data attribute: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/globalconfig.html
have you disabled your form submit action using
e.preventDefaults()
can you show some of your code ?
Is there anyway to determine when a item inside of a WebView is clicked?
Such as another link in a WebView.
I want to listen for these clicks and repsond to them. is there anyway to go about doing this?
Call javascript onClick function and from there you can call java object which you passed using addJavaScriptInterface.
This link might help. Copied it from the link:
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
and Android is an object passed by writing following lines
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");
Hope this help!!!
Check out the WebViews addJavascriptInterface(mHandler, "testhandler");
mHandler is a plain class that you can define to handle calls from the javascript. Check out this link for more info.