WebView与JavaScript的交互总结

最新推荐文章于 2024-06-05 20:11:08 发布

原创

最新推荐文章于 2024-06-05 20:11:08 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#Android #JavaScrip #前端 #WebView #混合开发

本文总结了Android客户端通过WebView调用JavaScript以及JavaScript调用Android原生代码的多种方法，包括WebView的evaluateJavascript、addJavascriptInterface，以及通过URL拦截、对话框拦截等方式。详细介绍了每种方法的使用场景、优缺点及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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_constraintBottom_toBottomOf="parent"
        />

</android.support.constraint.ConstraintLayout>