Android Calling JavaScript functions in WebView

Question

I am trying to call some javascript functions sitting in an html page running inside an android webview   Pretty simple what the code tries to do below - from the android app  call a javascript function with a test message  which inturn calls a java function back in the android app that displays test message via toast   The javascript function looks like   function testEcho message        window JSInterface doEchoTest message       From the WebView  I have tried calling the javascript the following ways with no luck   myWebView loadUrl  javascript testEcho Hello World      mWebView loadUrl  javascript  function           testEcho Hello World                  I did enable javascript on the WebView  myWebView getSettings   setJavaScriptEnabled true      register class containing methods to be exposed to JavaScript myWebView addJavascriptInterface myJSInterface   JSInterface       And heres the Java Class  public class JSInterface   private WebView mAppView  public JSInterface   WebView appView            this mAppView   appView             public void doEchoTest String echo           Toast toast   Toast makeText mAppView getContext    echo  Toast LENGTH SHORT           toast show              I ve spent a lot of time googling around to see what I may be doing wrong   All examples I have found use this approach   Does anyone see something wrong here   Edit   There are several other external javascript files being referenced  amp  used in the html  could they be the issue

User · Answer

activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout     xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent  gt        lt WebView         android id    id webView          android layout width  match parent          android layout height  match parent   gt    lt  RelativeLayout gt    MainActivity java   import android support v7 app AppCompatActivity  import android os Bundle  import android webkit WebView  import android webkit WebViewClient   import com bluapp androidview R   public class WebViewActivity3 extends AppCompatActivity       private WebView webView        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity web view3           webView    WebView  findViewById R id webView           webView setWebViewClient new WebViewClient             webView getSettings   setJavaScriptEnabled true           webView loadUrl  file    android asset webview1 html              webView setWebViewClient new WebViewClient                public void onPageFinished WebView view  String weburl                   webView loadUrl  javascript testEcho  Javascript function in webview                                          assets file   lt  DOCTYPE html PUBLIC  -  WAPFORUM  DTD XHTML Mobile 1 0  EN   http   www wapforum org DTD xhtml-mobile10 dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt  lt title gt WebView1 lt  title gt   lt meta forua  true  http-equiv  Cache-Control  content  max-age 0   gt   lt  head gt    lt body style  background-color  212121  gt   lt script type  text javascript  gt  function testEcho p1   document write p1      lt  script gt   lt  body gt    lt  html gt

User · Answer

public void run final String scriptSrc             webView post new Runnable                  Override             public void run                      webView loadUrl  javascript     scriptSrc

User · Answer

I figured out what the issue was   missing quotes in the testEcho   parameter   This is how I got the call to work   myWebView loadUrl  javascript testEcho  Hello World

User · Answer

Modification of  Ilya Gazman answer      private void callJavaScript WebView view  String methodName  Object   params           StringBuilder stringBuilder   new StringBuilder            stringBuilder append  javascript try             stringBuilder append methodName           stringBuilder append               String separator               for  Object param   params                               stringBuilder append separator               separator                    if param instanceof String                   stringBuilder append                                     stringBuilder append param toString   replace                           if param instanceof String                   stringBuilder append                                        stringBuilder append    catch error  console error error message               final String call   stringBuilder toString            Log i TAG   callJavaScript  call   call             view loadUrl call           will correctly create JS calls e g   callJavaScript mBrowser   alert    abc    def      javascript try alert  abc   def   catch error  console error error message    callJavaScript mBrowser   alert   1  true   abc      javascript try alert 1 true  abc   catch error  console error error message      Note that objects will not be passed correctly - but you can serialize them before passing as an argument   Also I ve changed where the error goes  I ve diverted it to the console log which can be listened by       webView setWebChromeClient new CustomWebChromeClient       and client  class CustomWebChromeClient extends WebChromeClient       private static final String TAG    CustomWebChromeClient         Override     public boolean onConsoleMessage ConsoleMessage cm            Log d TAG  String format   s    d   s   cm message                    cm lineNumber    cm sourceId              return true

User · Answer

I created a nice wrapper to call JavaScript methods  it also shows JavaScript errors in log   private void callJavaScript String methodName  Object   params       StringBuilder stringBuilder   new StringBuilder        stringBuilder append  javascript try         stringBuilder append methodName       stringBuilder append           for  int i   0  i  lt  params length  i              Object param   params i           if param instanceof String               stringBuilder append                   stringBuilder append param toString   replace                           stringBuilder append                         if i  lt  params length - 1               stringBuilder append                           stringBuilder append    catch error  Android onError error message           webView loadUrl stringBuilder toString         You need to add this too   private class WebViewInterface        JavascriptInterface     public void onError String error           throw new Error error             And add this interface to your webview   webView getSettings   setJavaScriptEnabled true   webView addJavascriptInterface new WebViewInterface     AndroidErrorReporter

User · Answer

Yes you have the syntax error  If you want to get your Javascript errors and printing statements in your logcat you must implement the onConsoleMessage ConsoleMessage cm  method in your WebChromeClient  It gives the complete stack traces like Web console Inspect element   Here is the method   public boolean onConsoleMessage ConsoleMessage cm                 Log d  Message   cm message       -- From line                                  cm lineNumber       of                                  cm sourceId              return true          After implementation you will get your Javascript errors and print statements  console log  on your logcat

User · Answer

Here is an example to load js script from the asset on WebView  Put script to a file will help reading easier I load the script in onPageFinished because I need to access some DOM element inside the script  to able to access it should be loaded or it will be null   Depend on the purpose of the script  we may load it earlier assets myjsfile js document getElementById  quot abc quot   innerText    quot def quot  document getElementById  quot abc quot   onclick   function         document getElementById  quot abc quot   innerText    quot abc quot     WebViewActivity webView settings javaScriptEnabled   true webView webViewClient   object   WebViewClient             override fun onPageFinished view  WebView   url  String             super onPageFinished view  url           val script   readTextFromAsset  quot myjsfile js quot           view loadUrl  quot javascript   script quot            fun readTextFromAsset context  Context  fileName  String   String       return context assets open fileName  bufferedReader   use   it readText

User · Answer

From kitkat onwards use evaluateJavascript method instead loadUrl to call the javascript functions like below      if  android os Build VERSION SDK INT  gt   android os Build VERSION CODES KITKAT            webView evaluateJavascript  enable      null         else           webView loadUrl  javascript enable

[javascript] Android Calling JavaScript functions in WebView

Examples related to javascript

Examples related to android

Examples related to webview

Examples related to android-webview