Apply external java script function to android

Question

I am developing android app which using webview control to render my HTML text how can apply this java script function inside my android code to select and copy text from webview control, However this is an external function not inside my HTML page and with return value:

function getSelectedText() {
var txt;
if (window.getSelection) {
    txt = window.getSelection();
} else if (window.document.getSelection) {
    txt =window.document.getSelection();
} else if (window.document.selection) {
    txt = window.document.selection.createRange().text;
}
 return txt;
}

Many thanks.

Answer 1

As described here, you would need to implement a JavaScript interface, attach it to your webview and then you can call it's functions from your web page HTML.

E.g.

In your android code,

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void getText(String text) {
        Log.d("JsInterface", text)
        Toast.makeText(mContext, text, Toast.LENGTH_SHORT).show();
    }
}

And in your webview attach it like so,

WebView webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "MyJSInterface");

Then in your HTML page you add JavaScript as follows,

<script type="text/javascript">
       function getSelectedText() {
          var txt;
          if (window.getSelection) {
              txt = window.getSelection();
          } else if (window.document.getSelection) {
              txt =window.document.getSelection();
          } else if (window.document.selection) {
              txt = window.document.selection.createRange().text;
          }
          MyJSInterface.getText(txt); // <-- this will be your function in WebAppInterface
        }

        // And add some code to invoke getSelectedText()
        // on the event you are interested in.
</script>

Answer 2

add Class for javascript listner

public class WebAppInterface {
    Context mContext;

/* Instantiate the interface and set the context */
WebAppInterface(Context c) {
    mContext = c;
}
/** Show a toast from the web page */
@JavascriptInterface
public void getText(String text) {
    Log.d("JsInterface", text)
    Toast.makeText(mContext, text, Toast.LENGTH_SHORT).show();
}
}

attach this to webview

WebView webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "MyJSInterface");

Now, crate javascript and load it to webview

String js= "(function getSelectedText() {"+
            "var txt;"+
            "if (window.getSelection) {"+
                "txt = window.getSelection().toString();"+
            "} else if (window.document.getSelection) {"+
                "txt = window.document.getSelection().toString();"+
            "} else if (window.document.selection) {"+
                "txt = window.document.selection.createRange().text;"+
            "}"+
            "MyJSInterface.getText(txt);"+
          "})()";
    // calling the js function
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        myWebView.evaluateJavascript("javascript:"+js, null);
    }else{
        myWebView.loadUrl("javascript:"+js);
    }

after running script(above code) you will get your text as Toast in javascript interface class' getText() method.

Thanks source.rar, taken the first two steps from source.rar. last part is to execute the javascript