Android WebView与Javascript交互

WebView与Javascript交互是双向的数据传递:

(1)H5网页的JS函数调用Native函数
(2)Native函数调用JS函数

1、H5网页实现,主要实现actionFromNative()、actionFromNativeWithParam(String str),放在assets文件下文件名为 hybrid.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    function actionFromNativeWithParam(arg){
         document.getElementById("log_msg").innerHTML +=
             ("Native调用了js函数参数:"+arg);
    }
    script>
head>
<body>
<p>WebView与Javascript交互p>
<div>
    <button onClick="window.js2native.actionFromJsWithParam('come from Js')">调用Native代码button>
div>
<br/>
<div id="log_msg">调用打印信息div>
body>
html>

2、Activity 中webview 设置看注释

public class MainActivity extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/hybrid.html");
        mWebView.addJavascriptInterface(new JsInterface(), "js2native");
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });
    }

    final class JsInterface {

        @JavascriptInterface
        public void actionFromJsWithParam(final String str) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(MainActivity.this, "js调用了Native函数:" + str, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
} 

mWebView.addJavascriptInterface(new JsInterface(), “js2native”);相当于添加一个js回调接口,然后给这个起一个别名, @android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的,在4.2以后才有的。
js(HTML)访问Android(Java)端代码是通过jsObj对象实现的,调用jsObj对象中的函数,如: “window.js2native.actionFromJsWithParam(‘come from Js’)”,这里的js2native就是Native中JsInterface()对象的别名Android(Java)访问js(HTML)端代码是通过loadUrl函数实现的,访问格式如:mWebView.loadUrl(“javascript:actionFromNative()”);

3、布局文件


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Native调用js函数"/>

LinearLayout>

4、Demo 截图

Android WebView与Javascript交互_第1张图片

你可能感兴趣的:(Android,android,javascript,webview)