WebView: Uncaught ReferenceError: Android is not defined

Question

I am creating a WebView with code rather than loading via an XML layout. The webview appears to be created properly, but I am seeing the errors:

W/AwContents( 4564): nativeOnDraw failed; clearing to background color.
I/chromium( 4564): [INFO:CONSOLE(1)] "Uncaught ReferenceError: Android is not defined", 
...

If I put the WebView in my XML layout, I don't get these errors. Notice that, if the script runs, it will change the onLoadEvent field value from "no" to "yes. That is happening, so evidently the script is running. It is not fetching the user name and password, though, indicating that "Android" is not defined.

I have also tried executing addView() before webView.loadData(); same errors.

Here's the code that creates the WebView:

  @SuppressLint("SetJavaScriptEnabled")
  private void onOk ()
  {
    Log.d ("RegTest", "onOk");
    webView = new WebView (this);
    webView.setLayoutParams (new ViewGroup.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT));    
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled (true);
    CharSequence cs = readAsset ("input_form");
    webView.loadData (cs.toString(), "text/html", "UTF-8");

    contentView.addView (webView);
  }

And here are snips of "input_form", which is the source for the WebView content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  ...
  <script type="text/javascript">
    function onLoadValues ()
    {
      document.getElementById ("onLoadEvent").value = "yes";
      document.getElementById ("FullName").value = Android.getFullName();
      document.getElementById ("EmailAddress").value = Android.getEmailAddr(); 
    }
  </script>
</head>

<body onload="onLoadValues()">
  <form name="catwebformform52174" method="post" ...>
    <fieldset>
      <div class="pure-control-group">
        <label for="onLoadValues">onLoadEvent</label>
        <input id="onLoadEvent" name="onLoadEvent" type="text" placeholder="no">
      </div>
      <div class="pure-control-group">
        <label for="FullName">Name</label>
        <input id="FullName" name="FullName" type="text" placeholder="Name">
      </div>
      <div class="pure-control-group">
        <label for="EmailAddress">Email Address</label>
        <input id="EmailAddress" name="EmailAddress" type="email" placeholder="Email Address">
      </div>
    </fieldset>
  </form>
</body>
</html>

IshRoid · Accepted Answer · 2015-03-14T21:49:47.197

9

You didn't defined Android as a javascripinterface you have to write below lines

 // If your callback methods are in same class then just same class object
 webView.addJavascriptInterface(this, "Android");

Syntax of addJavascriptInterface() method

      addJavascriptInterface(Object object, String name);        
   //  1. `object` – *the Java object to inject into this WebView’s JavaScript context.*
   //  2. `name` – *the name used to expose the object in JavaScript*

edited Mar 14 '15 at 21:49

answered Mar 14 '15 at 21:16

IshRoid

3,696
2
26
39

That sounds like a good idea. However JavascriptInterface is a Java interface; I need an actual class if this approach is to work. I'm looking, but please tell me if you already know. – Peri Hartman Mar 14 '15 at 21:23
In Which class you have method getFullName and getEmailAddr? Also Java Script Interface and Java Interface are different. – IshRoid Mar 14 '15 at 21:24
Ok, based on your original answer, I figured it out. You don't define a new JavascriptInterface. Instead, all I needed was this code: webView.addJavascriptInterface (this, "Android"); If you will correct your answer - for the sake of other readers - I'll mark it as correct. Thanks. – Peri Hartman Mar 14 '15 at 21:28
If you create your callback methods in same class then you just need to pass 'this' but if you have other class then you need to create a object of that class, ( Is my answer doesn't you ?) – IshRoid Mar 14 '15 at 21:32
Your reasoning is correct. The syntax in your post is not. You need to remove the first line. In the case where "this" won't work as the parameter, it would be whatever other object exists in your code containing the javascript-visible methods. – Peri Hartman Mar 14 '15 at 21:45
I update my code, now i think it is more understandable by other users also. Please correct me if am wrong. – IshRoid Mar 14 '15 at 21:51
Thanks so much. I guess when WebView is defined in xml, "this" is automatically added as a JavascriptInterface named "Android". – Peri Hartman Mar 14 '15 at 22:07
myWebView.addJavascriptInterface(new WebAppInterface(this), "Android"); may also can be used. – Bay Sep 21 '19 at 19:33

score 1 · Answer 2 · answered Nov 05 '21 at 14:00

If you are here because you were just following the walk through documentation they leave off a key piece of information that is only available on the reference documentation for addJavascriptInterface().

Note that injected objects will not appear in JavaScript until the page is next (re)loaded. JavaScript should be enabled before injecting the object. For example:

class JsObject {
  @JavascriptInterface
  public String toString() { return "injectedObject"; }
}
webview.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");

https://developer.android.com/reference/android/webkit/WebView#addJavascriptInterface(java.lang.Object,%20java.lang.String)

WebView: Uncaught ReferenceError: Android is not defined

2 Answers2

Linked