WebView与JavaScript的交互总结

WebView与JavaScript的交互总结

1、交互总结

WebView与JS之间的交互总结可以概括为下面两种：

• Android客户端去调用JS代码
• JS端去调用Android原生代码

它们之间互相调用的桥梁是WebView。

2、交互前准备

2.1 Android客户端代码

Activity：

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

    webView = findViewById(R.id.web_view);
    //android调用JS代码的Button
    btnAndroidCallJS = findViewById(R.id.btn_call_js);

    //防止外部浏览器调用此链接
    webView.setWebViewClient(new WebViewClient());

    WebSettings settings = webView.getSettings();
    //允许WebView使用JS
    settings.setJavaScriptEnabled(true);
    //支持通过JS打开新窗口(允许JS弹窗)
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
}

XML：

<android.support.constraint.ConstraintLayout 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"
    android:id="@+id/container"
    tools:context="com.zw.plugins.MainActivity">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/btn_call_js"
        android:id="@+id/web_view"></WebView>

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/btn_call_js"
        android:text="Android调用JS"
        app:layout_constraintTop_toBottomOf="@id/web_view"
        app:layout_constrai