We Keep Coding

Android webView - javascript code is not getting called

I try to load this javascript in my webview:
#SuppressLint("ClickableViewAccessibility")
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fullscreen);
website = "https://www.blizz-z.de";
myWebView = findViewById(R.id.blizzView);
WebSettings settings = blizzView.getSettings();
settings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient() {
#Override
// Notify the host application that a page has finished loading.
public void onPageFinished(WebView view, String url)
{
myWebView.loadUrl(
"javascript:(function() {" +
"setInterval(function() {" +
+ "jQuery('#myInput').css('background', '#'+(Math.random()*0xFFFFFF<<0).toString(16));"
+ "}, 1000);"
+ "});"
);
}
}
...
}
But it is not getting executed. If I execute the script in my desktop browser, then it works. It changes the background color of my search bar on my website just for test purposes.
Is setInterval not supported in webView?
Update:
I tried it with the function js from #mohkamfer's answer:
#SuppressLint("ClickableViewAccessibility")
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fullscreen);
website = "https://www.blizz-z.de";
blizzView = findViewById(R.id.blizzView);
WebSettings settings = blizzView.getSettings();
settings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient() {
#Override
// Notify the host application that a page has finished loading.
public void onPageFinished(WebView view, String url)
{
js(myWebView, "(function() {" +
"setInterval(function() {" +
+ "jQuery('#myInput').css('background', '#'+(Math.random()*0xFFFFFF<<0).toString(16));"
+ "}, 1000);"
+ "});"
);
}
}
...
}
public void js(WebView view, String code)
{
String javascriptCode = "javascript:" + code;
if (Build.VERSION.SDK_INT >= 19) {
view.evaluateJavascript(javascriptCode, new ValueCallback<String>() {
#Override
public void onReceiveValue(String response) {
Log.i("debug_log", response);
}
});
} else {
view.loadUrl(javascriptCode);
}
}
But it makes no difference.

Are you deploying on API 19 or higher? If so you'll have to use WebView#evalulateJavascript instead of WebView#loadUrl
I always use this method to simplify and quicken things a bit
public void js(String code) {
if (Build.VERSION.SDK_INT >= 19) {
this.evaluateJavascript(code, new ValueCallback<String>() {
#Override
public void onReceiveValue(String response) {
}
});
} else {
this.loadUrl("javascript:" + code);
}
}

I figured it out... I just had to call the code with jQuery(document).ready(function() {. The code was executed but did not changed anything because it was executed before the DOM was ready...
Solution:
#SuppressLint("ClickableViewAccessibility")
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fullscreen);
website = "https://www.blizz-z.de";
myWebView = findViewById(R.id.blizzView);
WebSettings settings = blizzView.getSettings();
settings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient() {
#Override
// Notify the host application that a page has finished loading.
public void onPageFinished(WebView view, String url)
{
js(myWebView, "jQuery(document).ready(function() {" +
"setInterval(function() {" +
+ "jQuery('#myInput').css('background', '#'+(Math.random()*0xFFFFFF<<0).toString(16));"
+ "}, 1000);"
+ "});"
);
}
}
...
}
public void js(WebView view, String code)
{
String javascriptCode = "javascript:" + code;
if (Build.VERSION.SDK_INT >= 19) {
view.evaluateJavascript(javascriptCode, new ValueCallback<String>() {
#Override
public void onReceiveValue(String response) {
Log.i("debug_log", response);
}
});
} else {
view.loadUrl(javascriptCode);
}
}
Credits to #mohkamfer for contributing the js function.

WebView JavaScript Injection

I am trying to make an app that will take the username and password from entering login information from facebook, or twitter, and make the information a user typed into the "username" and "password" fields from the native website pop up in a message box once the user clicks the submit button.
Whats happening is the app compiles and launches correctly, the facebook login page is displayed, and it allows me to input a username and password, however the dialog box never pops up displaying the information I just typed in the login boxes.
can anyone point me in the correct direction with this?
Thanks!!
my MainActivity.java code is as follows:
package leo.umd.capture;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
WebView webview1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview1 = (WebView)findViewById(R.id.webView1);
webview1.getSettings().setJavaScriptEnabled(true);
webview1.setWebChromeClient(new WebChromeClient());
webview1.addJavascriptInterface(new MyJavaScriptInterface(), "MYOBJECT");
webview1.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
StringBuilder sb = new StringBuilder();
sb.append("document.getElementsByTagName('form')[0].onsubmit = function () {");
sb.append("var objPWD, objAccount;var str = '';");
sb.append("var inputs = document.getElementsByTagName('input');");
sb.append("for (var i = 0; i < inputs.length; i++) {");
sb.append("if (inputs[i].type.toLowerCase() === 'password') {objPWD = inputs[i];}");
sb.append("else if (inputs[i].name.toLowerCase() === 'email') {objAccount = inputs[i];}");
sb.append("}");
sb.append("if (objAccount != null) {str += objAccount.value;}");
sb.append("if (objPWD != null) { str += ' , ' + objPWD.value;}");
sb.append("window.MYOBJECT.processHTML(str);");
sb.append("return true;");
sb.append("};");
view.loadUrl("javascript:" + sb.toString());
}
});
String sUrl = "https://www.facebook.com";
// String sUrl = "http://www.renren.com/";
// String sUrl = "http://www.baidu.com/";
webview1.loadUrl(sUrl);
}
class MyJavaScriptInterface
{
#JavascriptInterface
public void processHTML(String html)
{
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder.setTitle("AlertDialog from app")
.setMessage(html)
.setPositiveButton(android.R.string.ok,
new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
}
})
.setCancelable(false).show();
}
}
}

I got it working you must rename the variable "MYOBJECT", and that with some diagnostic lines of code helped get it working.

"Uncaught TypeError: window.HTMLOUT.showHTML is not a function"

I am trying to inject JavaScript for reading on specific value while loading webView.
These are the properties i used for my webView.
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setCacheMode(2);
webView.getSettings().setDomStorageEnabled(true);
webView.clearHistory();
webView.clearCache(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setUseWideViewPort(false);
webView.getSettings().setLoadWithOverviewMode(false);
webView.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");
and i am injecting javacript in my onPageFInished() method.
#Override
public void onPageFinished(final WebView view, final String url) {
webView.post(new Runnable() {
#Override
public void run() {
webView.loadUrl("javascript:window.HTMLOUT.showHTML('<head>'+document.getElementsByTagName('input')[0].value+'</head>');");
}
});
super.onPageFinished(view, url);
}
Below code is MyJavaScriptInterface.
public class MyJavaScriptInterface{
#JavascriptInterface
public void showHTML(String html_data) {
if(html_data.contains("response_code")){
Log.e(TAG, " ======> HTML Data : "+ html_data);
new MakeQueryPayment().execute();
}
}
}
Error i captured from the Logcat.
01-08 17:56:43.701 I/chromium(27026): [INFO:CONSOLE(1)] "Uncaught TypeError: window.HTMLOUT.showHTML is not a function", source: (1)
I m facing this problem only in Samsung Galaxy Tab A, Model Number is SM-T550 , Android Version is 5.0.2. In other devices which we have it's working fine. Can any one please help me out from this.
Thanks in advance.

I try on Galaxy Tab 4, this code running well on this device.
WebView properties
WebView webView = new WebView(this);
setContentView(webView);
webView.clearHistory();
webView.clearCache(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setCacheMode(2);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setUseWideViewPort(false);
webView.getSettings().setLoadWithOverviewMode(false);
webView.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");
webView.loadUrl("http://stackoverflow.com/questions/34746626/uncaught-typeerror-window-htmlout-showhtml-is-not-a-function");
webView.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return true;
}
#Override
public void onPageStarted(WebView view, String url,
Bitmap favicon) {
}
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:window.HTMLOUT.showHTML('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>');");
}
});
JavaScript Interface
public class MyJavaScriptInterface{
#JavascriptInterface
public void showHTML(String html_data) {
Log.e("", " ======> HTML Data : "+ html_data);
}
}

For me, as it was working fine before upgrading to the latest targetSDK, I just had to add the annotation #JavascriptInterface on all my functions.
Example:
#JavascriptInterface
public void eventDragStart() {
// do somthing
}

The HTML with javascript is not getting loaded in android webview

I am trying to display a page containing HTML with javascript in android webview with the below code.But this doesn't seem to work.Can anyone help me out.
public class MainActivity extends ActionBarActivity {
WebView browser;
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_main);
browser = (WebView) findViewById(R.id.webView);
browser.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
browser.setWebViewClient(new Callback());
browser.getSettings().setJavaScriptEnabled(true);
loadTime();
}
void loadTime() {
String page = "<html>"
+"<head>"
+"<title>chat window</title>"
+"<script type=\"text/javascript\">"
+ "var bccbId = Math.random(); document.write(unescape('%3Cdiv id=' + bccbId + '%3E%3C/div%3E'));"
+" window._bcvma = window._bcvma || [];"
+" _bcvma.push([\"setAccountID\", \"423771628801258096\"]);"
+" _bcvma.push([\"setParameter\", \"WindowParameters\", \"vr=&vi=&ve=" + gblQnbVars["gUserEmail"] + "&vp=" + gblQnbVars["gMobileNum"] + "&vn= "+ gblQnbVars["gCustomerFirstName"]+ "&lc=\"]);"
+"var bcLoad = function(){"
+ " if(window.bcLoaded) return; window.bcLoaded = true;"
+" var vms = document.createElement(\"script\");"
+"vms.type = \"text/javascript\";"
+" vms.async = true;"
+" vms.src = ('https:'==document.location.protocol?'https://':'http://') + \"vmss.boldchat.com/aid/423771628801258096/bc.vms4/vms.js\";"
+"var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vms, s);"
+"};"
+"if(window.pageViewer && pageViewer.load) pageViewer.load();"
+" else if(document.readyState==\"complete\") bcLoad();"
+" else if(window.addEventListener) window.addEventListener('load', bcLoad, false);"
+" else window.attachEvent('onload', bcLoad);"
+ "function FireBoldChat() {"
+" try {"
+ " _bcvmw.chatWindow({"
+ "type: \"chat\","
+ "rdid: \"\","
+ "cwdid:\"1504531236710990857\","
+ "ve:\"<%=visitor email%>\","
+ "vp:\"<%=visitor phone%>\","
+ "vn:\"<%=visitor name%>\","
+ "embed: true"
+ "});"
+" } catch (e) {"
+"setTimeout(FireBoldChat, 500)"
+" }"
+" };"
+" </script>"
+"</head>"
+"<body onload=\"FireBoldChat();\">"
+"</body>"
+"</html>";
System.out.println(page);
browser.loadDataWithBaseURL("x-data://base", page,
"text/html", "UTF-8",
null);
}
private class Callback extends WebViewClient {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
loadTime();
return(true);
}
}
Whenever I load my this webpage in default browser its working perfectly. Where i have did wrong.

The documentation for loadData() says
Note that JavaScript's same origin policy means that script running in a page loaded using this method will be unable to access content loaded using any scheme other than 'data', including 'http(s)'. To avoid this restriction, use loadDataWithBaseURL() with an appropriate base URL.
Now you do use loadDataWithBaseURL(), but your base URL is x-data://base yet you try to load a script from http(s)://vmss.boldchat.com. I think that can cause your problem.

I got same problem. I just replace
vms.src="https://" +\"vmss.boldchat.com/aid/423771628801258096/bc.vms4/vms.js\";"

this will be come if not add necessary java script file
before run please check your XML format is ok
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
for more :http://developer.android.com/guide/webapps/webview.html
and you may not call layout
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_main);
WebView webView = (WebView)
browser = findViewById(R.id.webview);
browser.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
browser.setWebViewClient(new Callback());
browser.getSettings().setJavaScriptEnabled(true);
}
}
try this some time this will be help
thank

Looking at your code, didn't see the run time changes in html file.
So create html file using above page variable & put in assets folder.
once this done write following code:
public class ViewWeb extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
WebView vistaWeb = (WebView) findViewById(R.id.webView1);
vistaWeb.setWebChromeClient(new Callback());
vistaWeb.setWebViewClient(new Callback());
vistaWeb.clearCache(true);
vistaWeb.clearHistory();
vistaWeb.getSettings().setJavaScriptEnabled(true);
vistaWeb.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
vistaWeb.loadUrl("file:///android_asset/aboutcertified.html"); // now it will not fail here
}
}
Hope this will help you.

I suspect the variable gblQnbVars I did not find any reference to it in your snippet. Can you confirm if it is accessible in your code? May be that's throwing error.

Unable to run show image preview on android webview?

Firstly this may sound like a duplicate question but i was unable to get any solutions via previous posted questions.I have a jsp page through which i am selecting images from PC and showing preview of that image which is working fine on chrome browser of my android phone also.But when i run it on WEBVIEW document.getElementById.click() function not working so i am unable to get image preview.
This is my JSP page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function img_prvw(id1,id2)/*******************show preview of image*******************/
{
var oFiles = document.getElementById(id1).files;
var valid_extensions = /(.jpg|.jpeg|.png)$/i;
if(!(valid_extensions.test(document.getElementById(id1).files[0].name)))
{
document.getElementById('er').innerHTML="Select jpg or png image";
}
else
{
var reader = new FileReader();
reader.readAsDataURL(oFiles[0]);
reader.onload=
function (e) {
document.getElementById(id2).src=e.target.result;
};
}
}
</script>
</head>
<body>
<input type="file" style="display: none;" id="advrts_img" name="advrts_img" onchange="img_prvw('advrts_img','advrts_img_prvw')">
<img src="images/img_place.png" id="advrts_img_prvw" alt="" class="cursor margin_top10" style="width:100px;height:100px" onClick="document.getElementById('advrts_img').click()">
</body>
</html>
This is my android WebView code:
package com.example.sample_webview;
import android.app.Activity;
import android.content.Intent;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
WebView web;
private ValueCallback<Uri> mUploadMessage;
private final static int FILECHOOSER_RESULTCODE = 1;
#Override
protected void onActivityResult(int requestCode, int resultCode,
Intent intent) {
if (requestCode == FILECHOOSER_RESULTCODE) {
if (null == mUploadMessage)
return;
Uri result = intent == null || resultCode != RESULT_OK ? null
: intent.getData();
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
}
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
web = (WebView) findViewById(R.id.wView);
web = new WebView(this);
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("http://minkme.org/minkmeuser/image_preview1.jsp");
web.setWebViewClient(new myWebClient());
web.setWebChromeClient(new WebChromeClient() {
// The undocumented magic method override
// Eclipse will swear at you if you try to put #Override here
// For Android 3.0+
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
MainActivity.this.startActivityForResult(
Intent.createChooser(i, "File Chooser"),
FILECHOOSER_RESULTCODE);
}
// For Android 3.0+
public void openFileChooser(ValueCallback uploadMsg,
String acceptType) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
MainActivity.this.startActivityForResult(
Intent.createChooser(i, "File Browser"),
FILECHOOSER_RESULTCODE);
}
// For Android 4.1
public void openFileChooser(ValueCallback<Uri> uploadMsg,
String acceptType, String capture) {
mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
MainActivity.this.startActivityForResult(
Intent.createChooser(i, "File Chooser"),
MainActivity.FILECHOOSER_RESULTCODE);
}
});
setContentView(web);
}
public class myWebClient extends WebViewClient {
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
return true;
}
#Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
}
}
// flipscreen not loading again
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
}
// To handle "Back" key press event for WebView to go back to previous
// screen.
/*
* #Override public boolean onKeyDown(int keyCode, KeyEvent event) { if
* ((keyCode == KeyEvent.KEYCODE_BACK) && web.canGoBack()) { web.goBack();
* return true; } return super.onKeyDown(keyCode, event); }
*/
}
I just want to browse images from android phone using input type="file".

in short : look over here to your input file Input file in a webview
After some time and some test, i have found that document.getElementById.click work perfectly well. i have test with the following change
test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="jquery-1.11.1.min.js"> </script>
<script>
function img_prvw(id1,id2)/*******************show preview of image*******************/
{
console.log("Call of img_prvw");
var oFiles = document.getElementById(id1).files;
var valid_extensions = /(.jpg|.jpeg|.png)$/i;
if(!(valid_extensions.test(document.getElementById(id1).files[0].name)))
{
document.getElementById('er').innerHTML="Select jpg or png image";
}
else
{
var reader = new FileReader();
reader.readAsDataURL(oFiles[0]);
reader.onload=
function (e) {
document.getElementById(id2).src=e.target.result;
};
}
}
function onAdvrtsImgPrvwClick() {
console.log('Clickevent');
document.getElementById('advrts_img').click();
}
</script>
</head>
<body>
<input type="file" style="display: none;" id="advrts_img" name="advrts_img" onclick="console.log('click on input');" onchange="img_prvw('advrts_img','advrts_img_prvw')">
<img src="images/img_place.png" id="advrts_img_prvw" alt="" class="cursor margin_top10" style="width:100px;height:100px" onClick="onAdvrtsImgPrvwClick()">
</body>
</html>
MainActivity.java
public class MainActivity extends Activity {
private WebView mWebview;
static final String TAG = "MainActivity";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebview = (WebView) findViewById(R.id.webView1);
mWebview.getSettings().setJavaScriptEnabled(true); // enable javascript
final Activity activity = this;
mWebview.setWebViewClient(new WebViewClient() {
public void onReceivedError(WebView view, int errorCode,
String description, String failingUrl) {
Toast.makeText(activity, description, Toast.LENGTH_SHORT)
.show();
}
});
mWebview.setWebChromeClient(new WebChromeClient() {
#Override
public boolean onConsoleMessage(ConsoleMessage cm)
{
String msg = cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId();
switch (cm.messageLevel()) {
case ERROR:
Log.e(TAG, msg);
break;
case LOG:
case TIP:
Log.i(TAG, msg);
break;
case WARNING:
Log.w(TAG, msg);
break;
case DEBUG:
default:
Log.d(TAG, msg);
break;
}
return true;
}
});
mWebview.loadUrl("file:///android_asset/test.html");
//setContentView(mWebview);
}
}
And it's appear that the console show the message 'click on input', so it have been correctly call, but it's the on change that is not called properly.