web-dev-qa-db-ja.com

JavaScriptからAndroidメソッドを呼び出します

検索しましたが、答えが見つかりませんでした。 Android HTML5とJavaScriptを使用して、webviewに基づいたアプリを開発しています。makeToast()などのAndroidメソッドJavaScript？

javascriptandroidhtml5webview
32
bodruk

これを行うには、WebViewにJavaScriptインターフェイスを追加し、Webビューで実行されているJavaScriptコードに特定のメソッドを公開します。つまり、アクティビティ/フラグメントで作成するメソッドでAndroidのToastクラスへの呼び出しをラップする必要があります。

activity_main.xml

<RelativeLayout 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">

    <WebView Android:id="@+id/web_view"
                Android:layout_width="fill_parent"
                Android:layout_height="fill_parent"/>

</RelativeLayout>

MainActivity.Java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView)findViewById(R.id.web_view);
        webView.loadUrl("file:///Android_asset/web.html");

        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebViewJavaScriptInterface(this), "app");
    }

    /*
     * JavaScript Interface. Web code can access methods in here 
     * (as long as they have the @JavascriptInterface annotation)
     */
    public class WebViewJavaScriptInterface{

        private Context context;

        /*
         * Need a reference to the context in order to sent a post message
         */
        public WebViewJavaScriptInterface(Context context){
            this.context = context;
        }

        /* 
         * This method can be called from Android. @JavascriptInterface 
         * required after SDK version 17. 
         */
        @JavascriptInterface
        public void makeToast(String message, boolean lengthLong){
            Toast.makeText(context, message, (lengthLong ? Toast.LENGTH_LONG : Toast.LENGTH_SHORT)).show();
        }
    }

}

asset/web.html

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript View</title>

    <script type="text/javascript">

        function showToast(){
            var message = document.getElementById("message").value;
            var lengthLong = document.getElementById("length").checked;

            /* 
                Call the 'makeToast' method in the Java code. 
                'app' is specified in MainActivity.Java when 
                adding the JavaScript interface. 
             */
            app.makeToast(message, lengthLong);
            return false;
        }

        /* 
            Call the 'showToast' method when the form gets 
            submitted (by pressing button or return key on keyboard). 
         */
        window.onload = function(){
            var form = document.getElementById("form");
            form.onsubmit = showToast;
        }
    </script>
</head>

<body>

<form id="form">
    Message: <input id="message" name="message" type="text"/><br />
    Long: <input id="length" name="length" type="checkbox" /><br />

    <input type="submit" value="Make Toast" />
</form>

</body>
</html>

A Toast Message

69
Ian

WebViewのaddJavascriptInterface()メソッドをチェックアウトします。

http://developer.Android.com/reference/Android/webkit/WebView.html#addJavascriptInterface%28Java.lang.Object,%20Java.lang.String%29

2
Alex Salauyou

より便利だから（レイアウト）：

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/webView"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent" />
1
Andrei Angurets

メインアクティビティコードを作成した後、Javascriptコードを作成し、そこからWebviewInterfaceを呼び出す必要があります。例を見てみましょう。

public class MainActivity extends AppCompatActivity {

String TAG = "MainActivity";
Context context;
WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    context = this;

    mWebView = (WebView) findViewById(R.id.webview);
    initWebView();

    String ENROLLMENT_URL = "file:///Android_asset/about_page.html";
    mWebView.loadUrl(ENROLLMENT_URL);

}

@SuppressLint({ "SetJavaScriptEnabled" })
private void initWebView() {
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.setWebChromeClient(new WebChromeClient());
    mWebView.addJavascriptInterface(new WebviewInterface(), "Interface");
}

public class WebviewInterface {
    @JavascriptInterface
    public void javaMehod(String val) {
        Log.i(TAG, val);
        Toast.makeText(context, val, Toast.LENGTH_SHORT).show();
    }
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context="com.legendblogs.Android.MainActivity">

<WebView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:id="@+id/webview"/>


</RelativeLayout>

https://www.legendblogs.com/blog/how-to-call-native-Java-methods-from-webview-javascript/121764の完全な例を参照するには、このリンクをご覧ください

0
Amit Pandey