Develop Reference

Android WebView and JavaScript programmtically clicking button not working

I have a very simple use case i.e to programmatically call a button of a web page loaded inside my webview. Below is the code
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setAppCacheEnabled(false);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient(){
#Override
public void onPageFinished(WebView view, String url) {
//super.onPageFinished(view, url);
switch (view.getOriginalUrl()){
case Properties.LOGIN_URL:
webView.evaluateJavascript(
"javascript:" +
"var usernameField = document.getElementById('loginUserName');" +
"usernameField.value = '" + Properties.USERNAME + "';" +
"var passwordField = document.getElementById('loginPassword');" +
"passwordField.value = '" + Properties.PASSWORD + "';", null
);
webView.evaluateJavascript(
"javascript:" +
"document.getElementById('loginButton').click();", new ValueCallback<String>() {
#Override
public void onReceiveValue(String s) {
}
}
);
break;
}
}
});
view.loadUrl(Properties.LOGIN_URL);
The username and password field injection is working fine but the code to perform button click isn't working.
I have searched a lot and experimented a lot but no luck, Is this even possible?
EDIT:
The URL I'm accessing is private to our organization, is on http and not secured, not sure if it's relevant.
I have tried another public page with login fields and the same code works and the button gets clicked successfully.

Okay I found the reason. So the onPageFinished was getting called while all the DOM elements are not loaded hence the javascript was failing. For time being it to work I have added a delayed Handler with 5 sec delay and it worked. The right solution should be to check for the page to complete to load (may be use jquery to check when the document is ready).

You can handle the webview button click this way
#JavascriptInterface
public void handleClick(String id) {
startActivity(new Intent(mContext, MainActivity.class));
}
In javascript
Android.handleClick(_id);

Android WebView downloading then displaying later in AlertDialog

I am currently trying to display a webview in a small popup. But I would like to first load the view, then display it when properly available.
So what I tried to do was 2 functions:
public void fetchPopUp(String url, Context appContext)
{
webView = new WebView(appContext);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(url);
}
public void displayPopUp(Activity activity)
{
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
builder = new AlertDialog.Builder(activity, android.R.style.Theme_Material_Dialog_Alert);
} else {
builder = new AlertDialog.Builder(activity);
}
builder.setView(webView);
AlertDialog dial = builder.show();
webView.addJavascriptInterface(new TCWebAppInterface(dial, webView, activity), "WAIAndroid");
webView.loadUrl("javascript:WAIAndroid.resize(document.body.getBoundingClientRect().height)");
}
As for the WAIAndroid resize:
#JavascriptInterface
public void resize(final float height)
{
activity.runOnUiThread(new Runnable()
{
#Override
public void run()
{
Log.e("JIBA", "sizes\n" + activity.getResources().getDisplayMetrics().widthPixels + "\n" + height + "\n" + activity.getResources().getDisplayMetrics().density + "\n" + activity.getResources().getDisplayMetrics().heightPixels);
});
}
The strange thing is when I call both fetchPopup and displayPopup one after the other, it's working perfectly (beside size issue which was the point of the resize).
But when I call them separately, the popup display empty and the resize method is not called.
I tried to display every objects, the webview is still the good, I tried displaying when it's finished loading, it's called properly, I tried reloading, tried to make it invisible or gone then visible again, tried to reload in javascript. Nothing changes the fact that when I call the displayPop a bit later than right after the fetchPopup method, it doesn't work. I guessed that there's an issue after the url is loaded and "onPageFinished" is called. But I can't find how to work around this.
Any help would be greatly appreciated, I'm running out of ideas!
Thanks a lot SO!

Try to move your code:
webView.addJavascriptInterface(new TCWebAppInterface(dial, webView, activity), "WAIAndroid");
to your fetchPopUp function before loadUrl, like this:
public void fetchPopUp(String url, Context appContext){
webView = new WebView(appContext);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new TCWebAppInterface(dial, webView, activity), "WAIAndroid");
webView.loadUrl(url);
}

Removing specific class/tag from WebView Android

I'm trying to remove this part of a webpage in side my WebView
<header class="page-header" data-type="fixed" role="banner"
This is what I tried so far
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceStatus){
View view = inflater.inflate(R.layout.fwebview, container, false);
webView = (WebView) view.findViewById(R.id.webView);
String url = getArguments().getString("link");
final String js = "javascript:"
+ "function () {"
+ " var element = document.getElementsByClassName('page-header');"
+ " element[0].parentNode.remove(element[0]);"
+ "} ();";
// Enable Javascript
webView.getSettings().setJavaScriptEnabled(true);
//set the WebViewClient before calling loadUrl
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url)
{
webView.loadUrl(js);
}
});
webView.loadUrl(url);
return view;
}
Somehow this doesn't work. I tried various methods to achieve what I want but somehow it won't remove the header. Can anyone help me fix this problem? It's really anoying

you need also WebChromeClient set for your WebView
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient()); //after setJavaScriptEnabled
also enabling DOM storage may be helpful
webView.getSettings().setDomStorageEnabled(true);

Remove some part of a webpage in android webview and then display it

I have been able to successfully remove a part of a webpage using the below code, but the only problem is that the webview first display the complete webpage and then it removes the element 'header-text-nav-container' although I am calling it onPageFinished(). I tried many different ways but all in vain. How to display the webpage in the webview only after successfully removing the element 'some-part' in my case 'header-text-nav-container'. Please help
public class myWebClient extends WebViewClient
{
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
view.loadUrl("javascript:(function() { " +
"document.getElementById('header-text-nav-container').style.display='none'; " +
"})()");
if (progressDialog.isShowing()) {
progressDialog.dismiss();
}
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
}

I finally solved the problem by showing a progress dialog and then dismissing the progress dialog when the 'header' is successfully removed. Thus I solved the problem partially.

Set html page padding in android WebView

I'd like to set top padding in a html source using JS function.The point is to not reload the page when this function will take effect, that's why I supposed to use innerHTML property.
My actual source is:
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView web, String url) {
web.loadUrl("javascript:(function(){document.body.innerHTML = document.body.innerHTML.style.paddingTop = 100px");
}
});
this solution is not working, giving me warning:
I/chromium: [INFO:async_pixel_transfer_manager_android.cc(56)] Async pixel transfers not supported

You need to write
webView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView web, String url) {
web.loadUrl("javascript:(function(){ document.body.style.paddingTop = '100px'})();");
}
});