Search code examples
javascriptandroidwebviewandroid-webview

Injecting JavaScript onclick() event inside WebView

I have an Android app, running a WebView that loads a certain page, and also part of the app

  1. I want to generate one of button onclick() event inside the WebView page
  2. How to load JavaScript file to WebView page which is inside the Android assets?

Thanks.

Solution

  • Finally I found the answer...

    webView.loadUrl("javascript:(function(){document.getElementById('buttonClick').click();})()");

    here is the complete source code 

    import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class Huddle extends Activity {
private WebView wv;
EditText editText;
TextView textView;
Button button,buttonClick;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    editText = (EditText)findViewById(R.id.titlebar);
    textView = (TextView)findViewById(R.id.txt_html);
    button = (Button)findViewById(R.id.button);
    buttonClick = (Button)findViewById(R.id.buttonClick);

    wv = (WebView) findViewById(R.id.webview);

    wv.getSettings().setJavaScriptEnabled(true);
    wv.getSettings().setUserAgentString("Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)");
    wv.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");

    wv.setWebChromeClient(new MyChromeClient());
    wv.loadUrl("file:///android_asset/www/index.html");
    wv.requestFocus();

    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String txt = editText.getText().toString();
            wv.loadUrl("javascript:sayHelloFromJS('"+txt+"')");
        }
    });
    buttonClick.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            wv.loadUrl("javascript:(function(){document.getElementById('buttonClick').click();})()");
        }
    });
}

class MyJavaScriptInterface
{
    @SuppressWarnings("unused")
    public void showHTML(final String html)
    {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Huddle.this.textView.setText(html);
            }
        });
    }
}

class MyChromeClient extends WebChromeClient{
}

class MyWebClient extends WebViewClient {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

    }
 }
}

    index.html

    add this index.html to assets\www\index.html 

    <html>
<script language="JavaScript">
function sayHelloFromJS(value) {
  document.getElementById("namefromAndroid").value =   value;
}

function setHtml(){
  var HTML = ""+document.getElementById("namefromjs").value;
  window.HTMLOUT.showHTML(HTML);
}

function doAlert() {
 alert("JavaScript says: Hello Android !!! How are you?");

}
</script>
</head>
<body>
 <p> Enter your name here <input type="text" id="namefromjs" />
 <p> <input type="button" onclick= "setHtml()" value="Set Name in Android">
 <p> Name from Android is <input type="text" id="namefromAndroid" />

  <p> Button Click <input type="button" value="Click me" id="buttonClick" onclick= "doAlert()" />
</body>
</html>

    res\layouts\main.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
    >

<TextView
        android:layout_width="184dp"
        android:layout_height="22dp"
        android:id="@+id/txt_html" android:layout_gravity="left|center_vertical"/>
<EditText
        android:layout_width="161dp"
        android:layout_height="wrap_content"
        android:id="@+id/titlebar" android:layout_gravity="left|center_vertical"/>
<Button
        android:layout_width="129dp"
        android:layout_height="wrap_content"
        android:text="Add text to web"
        android:id="@+id/button"/>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Event"
        android:id="@+id/buttonClick" android:layout_gravity="left|center_vertical"/>
<WebView android:id="@+id/webview" android:layout_width="match_parent"
         android:layout_height="match_parent"/>
</LinearLayout>