2013年7月14日 星期日

Call a Javascript function from Android application in a WebView

[Layout]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="testAndroid2JS" />
<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>
</LinearLayout>


[Android2JStest Activity]
public class Android2JStest extends Activity {
    WebView myWebView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_Android2JStest);
        // Show the Up button in the action bar.
        setupActionBar();
 ...
        myWebView = (WebView) findViewById(R.id.webview);
        myWebView.getSettings().setJavaScriptEnabled(true);
        myWebView.getSettings().setBuiltInZoomControls(true);
        myWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                        System.out.println("got here!");
                        return super.onJsAlert(view, url, message, result);
               }
        });   
        myWebView.setWebViewClient(new WebViewClient());
    }


...
<type 1>
The target JS function is embedded in the html instead of in a include JS src.

    public void testAndroid2JS(View view) throws IOException
    {
        String xml_content = assetFile2Str("testalert2.html");
       
        myWebView.loadDataWithBaseURL("file:///android_asset/", xml_content, "text/html", "utf-8", null);
        myWebView.loadUrl("javascript:testalert()");    

    }

loadUrl() is a asynchronous method and will dispatch from current thread for execution. Therefore, if you'd like to use loadUrl() instead of loadDataWithBaseURL(), either you call it in onCreate(), or you need to make sure the page has been fully loaded before using any JS function in it.

<type 2>
Directly read content from a JS file and modify the content to call the target JS function.
    public void testAndroid2JS(View view) throws IOException
    {
        String xml_content = assetFile2Str("testalert.js");
        myWebView.loadUrl("javascript:"+ xml_content + "testalert();" + "");
    }

}

Reference links
http://stackoverflow.com/questions/4761696/android-inject-in-webview-external-js-execute-function-and-raise-an-alert
http://stackoverflow.com/questions/5271898/javascript-alert-not-working-in-android-webview
http://stackoverflow.com/questions/3971832/android-loading-an-external-js-file-into-a-webview-then-accessing-its-functi
http://forums.xamarin.com/discussion/3467/loading-dynamic-html-and-javascript-from-assets-in-a-webview

沒有留言:

張貼留言