Android使用WebView与js互调

最新推荐文章于 2022-03-04 00:47:24 发布

Android_小菜菜

最新推荐文章于 2022-03-04 00:47:24 发布

阅读量316

点赞数 1

分类专栏： Android 文章标签： WebView JavaScript Android js互调

本文链接：https://blog.csdn.net/xiaolaohuqwer/article/details/79097677

版权

Android 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

先看效果图。

图中展示了 Android 调用 js中的方法和 js 调用Android中的方法。

布局代码一个按钮，一个WebView

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="安卓调用js中的方法"
        />
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

main目录下创建 assets文件夹再创建js.html文件

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8" >
        <title>Java与html中JavaScript方法互调</title>

        <script type="text/javascript">
            function showAlert(){
                alert("佛系三连: 可以、都行、没关系");
            }

            function showAndroidToast(){
                js.showAndroidToast();
            }
        </script>
    </head>
    <body>
        <div>
            <input type="button" onclick="showAlert()" value="js展示弹窗">
        </div>
        <div>
            <input  type="button" onclick="showAndroidToast()" value="js调用Android中的方法">
        </div>
    </body>
</html>

在Activity中对WebView和 Button 初始化并使用WebView加载 js.html文件。

public class MainActivity extends Activity {

    private WebView mWebView;
    private JsInterface mJsInterface;

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

        mWebView = (WebView) findViewById(R.id.webView);
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mJsInterface.showAlert();
            }
        });

        mJsInterface = new JsInterface(this);
        initWeb();

    }

    private void initWeb() {

        WebSettings setting = mWebView.getSettings();
        setting.setJavaScriptEnabled(true);//开启js支持
        //在webview中打开url，不使用其他浏览器。
        mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        //必须设置，不设置的话无法弹出alert。
        mWebView.setWebChromeClient(new WebChromeClient());
        //加载文件
        mWebView.loadUrl("file:///android_asset/js.html");
        mWebView.addJavascriptInterface(mJsInterface,"js");
    }

    class JsInterface{
        private Context mContext;
        public JsInterface(Context context) {
            mContext = context;
        }

        //安卓调用js中的方法
        @JavascriptInterface
        public void showAlert(){
            mWebView.loadUrl("javascript:showAlert()");
        }
        //js调用安卓中的方法
        @JavascriptInterface
        public void showAndroidToast(){
            Toast.makeText(mContext,"点餐三连: 不饿、你选、都可以",Toast.LENGTH_SHORT).show();
        }
    }
}

运行就可以看出效果。

Android_小菜菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android使用WebView与js互调

先看效果图。图中展示了 Android 调用 js中的方法和 js 调用Android中的方法。布局代码一个按钮，一个WebViewLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
复制链接

扫一扫

专栏目录