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.
Related
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.
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.
first time when i dynamic "vamp up" strings to a well-formed html.webview it worked well, including <input = 'text', but the next time the same webview doesn't work, especially <input = 'text'
When one touches it, the keyboard appears, but one can not enter any word.
The webView setting is as follows:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSaveFormData(false);
webView.getSettings().setSupportZoom(false);
webView.getSettings().setSavePassword(false);
webView.addJavascriptInterface(new runJavaScript(), "myjs");
webView.requestFocus();
webView.requestFocusFromTouch();
This only happens in SDK 2.0.1 & 2.1-update.
I got it. in xml file add linealayout,not webview , when make up html new webview ,new webview in java code, then add on linealayout, of couse linealayout removeallview first.
I have hosted a web project in my system.I need to run the html content in Android application using WebView. I did that.My requirement is I need to get the content of the html page or Javascript inside it, in my activity.I sit possible.Please help me.
My html page contains one checkbox and some content inside . I also have Save button. When I click the Save button I should get the content of the hidden fields inside the html page in My Activity .IS that possible. pls help me.
Finally I got the problem resolved.. In my activity I added a JavaScript interface with a javascript function named saved() in it.In my html page I added a javascript function named clicked().In this function I collected all the values as a String and passed to the saved().
The saved() function is in my activity and so I could use the values in my Activity.
In Oncreate()
{
mWebView.addJavascriptInterface(new DemoJavaScript(),"demo");
mWebView.loadUrl("file:///android_asset/index.html");
}
final class DemoJavaScript {
DemoJavaScript() {
}
// This is the javascript function
public void saved(String values) {
Toast.makeText(getApplicationContext(), values, Toast.LENGTH_SHORT).show();
}
}
// my html page
<script language="JavaScript">
var values;
function clicked()
{
values="";
values=document.getElementById('myvalue');
window.demo.saved(values);
}
</script>
<body>
<br />
<input type="hidden" name="myvalue" id="myvalue" value="reebok"/>
<br/>
<table>
<tr><td width="100" align=right><input type="button" name="save" value="Save" onClick="clicked()"/></td><td><input type="button" name="cancel" align=center value="Cancel"/></td></tr>
</table>
</body>
</html>