Detect if a specific button has been clicked in Android WebView
Let me provide you a full example.
For your specific website of http://store.nike.com/ch/de_de/pd/mercurial-superfly-v-tech-craft-2-herren-fussballschuh-fur-normalen-rasen/pid-11229711/pgid-11626158
{
...
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.addJavascriptInterface(new MyJavaScriptInterface(this), "ButtonRecognizer");
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
loadEvent(clickListener());
}
private void loadEvent(String javascript){
webview.loadUrl("javascript:"+javascript);
}
private String clickListener(){
return getButtons()+ "for(var i = 0; i < buttons.length; i++){\n" +
"\tbuttons[i].onclick = function(){ console.log('click worked.'); ButtonRecognizer.boundMethod('button clicked'); };\n" +
"}";
}
private String getButtons(){
return "var buttons = document.getElementsByClassName('add-to-cart'); console.log(buttons.length + ' buttons');\n";
}
});
webview.loadUrl("http://store.nike.com/ch/de_de/pd/mercurial-superfly-v-tech-cra\u200C\u200Bft-2-herren-fussballschuh-fur-normalen-rasen/pid-11229711/pgid-11626158");
...
}
class MyJavaScriptInterface {
private Context ctx;
MyJavaScriptInterface(Context ctx) {
this.ctx = ctx;
}
@JavascriptInterface
public void boundMethod(String html) {
new AlertDialog.Builder(ctx).setTitle("HTML").setMessage("It worked")
.setPositiveButton(android.R.string.ok, null).setCancelable(false).create().show();
}
}
That'll change the onClick for the button to what you need.
For everyone else, it looks like there's either a page-specific issue with getElementById() or an Android issue, but getting the elements by class (getElementsByClassName()) worked as expected.
Furthermore, it might be necessary to replace getElementsByClassName() by getElementsByName() such as for example on this website: https://www.digitec.ch/de/s1/product/lexon-flip-wecker-3522142.
Where you would put getElementsByName('AddProductToCart')
Info: the \n and the weird combination of strings inside the clickListener method are set like this, because of the IDE. ( ";" are causing problems inside a string).
Detect click on HTML button through javascript in Android WebView
I finally got it on my own after some reading. Kind of hard when you know nothing about javascript and when the doc is quite thin on the subject.
Here is my solution, hope this will help others :
With an HTML page containing 2 buttons at the end like that :
<div>
<button type="button" id="ok" style="font-weight: 700; margin-right: 20px;" onclick="validClick();">J'accepte</button>
<button type="button" id="no" onclick="refuseClick();">Je refuse</button>
</div>
I send the event of the click to the javascript at the top of my HTML page :
<script language="javascript">
function validClick()
{
valid.performClick();
document.getElementById("ok").value = "J'accepte";
}
function refuseClick()
{
refuse.performClick();
document.getElementById("no").value = "Je refuse";
}
</script>
valid
and refuse
are 2 java objects that I passed through the javascript interface to use their methods. So in java, I created 2 buttons (not really displayed in the Activity, only here for their methods and are sort of shadows of the HTML buttons :
valid = new Button(ctx);
valid.setOnClickListener(this);
refuse = new Button(ctx);
refuse.setOnClickListener(this);
Then I added javascript to my WebView
:
// Enablejavascript
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
// Add the interface to record javascript events
wv.addJavascriptInterface(valid, "valid");
wv.addJavascriptInterface(refuse, "refuse");
And finally, handle the click events in the onClick method :
@Override
public void onClick(View v) {
if (v.equals(valid)) {
//do Something
} else if (v.equals(refuse)) {
//do Something else }
}
Hope this will help some people
Html button click event detection in Android webview
i found solution for above my question. Android (Android.getViewId(_id)) keyword only work on when your javascript inside in html page not external js file.
How to detect button click in WebView Android?
I assume "FC.checkout" is the problem. Google docs told us name the name used to expose the object in JavaScript . In JavaScript "FC.checkout" it's 2 objects:
FC and checkout
so you are trying to create checkout object inside FC object, but FC object doesn't exist in the browser and I suppose you can catch "object is undefined" exception.
I'm not sure and can't check it right now but I will check and update the answer.
Update:
The assumption were correct. Just replace FC.checkout with FC (or anything else that meet JS naming rquirments) in both Java code and HTML
Detect click on HTML option tag through javascript in Android WebView
You need to listen for onchange
event on select field.
<div class="label"><b>Type :</b></div>
<div class="field">
<select name="type" onchange="onSelectFieldChange(this)">
<option value="video" selected="selected">video</option>
<option value="image">image</option>
</select>
</div>
</div>
Now you write onSelectFieldChange
function which handles redirection based on the selected option.
function onSelectFieldChange(element) {
switch(element.value) {
case 'video':
videos.performClick()
break;
case 'image':
images.performClick()
break;
default:
break;
}
}
How to perform a button click inside a Webview Android
if your Button is in your Html page so you can simply run javaScript code to simulate click event like this:
view.loadUrl("javascript:clickFunction()");
also you need to define clickFunction in your Html page:
function clickFunction() {
//click event
}
or you can add above function by javascript too:
view.loadUrl("javascript:clickFunction(){ //click event })()");
UPDATE:
<html>
<head>
<script>
function clickFunction(){
var form = document.getElementById("myform");
form.submit();
}
</script>
</head>
<body>
<form id="myform" name="pg_frm" method="post" action="https://www.paygol.com/pay" >
<input type="hidden" name="pg_serviceid" value="333818">
<input type="hidden" name="pg_currency" value="EUR">
<input type="hidden" name="pg_name" value="Donation">
<input type="hidden" name="pg_custom" value="">
<input type="hidden" name="pg_price" value="0.5">
<input type="hidden" name="pg_return_url" value="">
<input type="hidden" name="pg_cancel_url" value="">
<input type="image" name="pg_button" src="https://www.paygol.com/webapps /buttons/en/white.png" border="0" alt="Make payments with PayGol: the easiest way!" title="Make payments with PayGol: the easiest way!" >
</form>
</body>
</html>
Related Topics
How to Detect the Mime Type of Data Url
Javascript:Change the Function of the Browser'S Back Button
Input Quantity Button Plus and Minus
Vue.Js - How to Concat One Key Value to Another Key'S Value
Expanding Only One Row When Button Clicked
Using Js Remove Comma from Number from Existing Data
How to Merge the Property With Same Key in Two Object Array
Owl Carousel, Navigation Disabled After Reaching First/Last Item
Exclude Weekends in JavaScript Date Calculation
How to Hide Code from Cells in Ipython Notebook Visualized With Nbviewer
Process a Dictionary and Return Each Entry in React
Angular 6 Store Data from Json Array Inside Json
Slick.Js: Get Current and Total Slides (Ie. 3/5)
How to Check Whether Dynamically Attached Event Listener Exists or Not
Angular:Onclick on HTML Element According to Its Class
Check Whether Elements from One Array Are Present in Another Array
Laravel Reactjs:Changes Are Not Reflecting After Change in My Js(Reactjs) File