Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 607
Chathura Wijesinghe Avatar asked Aug 12 '13 13:08

Chathura Wijesinghe


1 Answers

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>
like image 73
Chathura Wijesinghe Avatar answered Nov 01 '22 06:11

Chathura Wijesinghe