【Android】Webview与JavaScript交互介绍

最新推荐文章于 2024-07-04 17:32:15 发布

Tech Ranger

最新推荐文章于 2024-07-04 17:32:15 发布

阅读量458

点赞数

分类专栏： Android 文章标签： java android javascript

本文链接：https://blog.csdn.net/sinat_36955332/article/details/108586893

版权

本文介绍了Android通过WebView调用JS代码的两种方法——loadUrl()和evaluateJavascript()，以及JS调用Android代码的三种方式——addJavascriptInterface、shouldOverrideUrlLoading()回调和WebChromeClient的对话框拦截。详细讲解了每种方法的使用步骤和注意事项，帮助开发者更好地理解和应用这些交互技术。

摘要由CSDN通过智能技术生成

一、交互方式总结

Android 与 JS 通过 WebView 互相调用方法实现，实际上是：
-Android 去调用 JS 的代码
-JS 去调用 Android 的代码
二者沟通的桥梁是 WebView

对于 Android 调用 JS 代码的方法有 2 种：

通过WebView的loadUrl（）
通过WebView的evaluateJavascript（）

对于 JS 调用 Android 代码的方法有 3 种：
1.通过WebView的addJavascriptInterface（）进行对象映射
2.通过 WebViewClient的shouldOverrideUrlLoading ()`方法回调拦截 url
3. 通过 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截 JS 对话框alert()、confirm()、prompt（)消息

二、具体分析

2.1 Android 通过 WebView 调用 JS 代码

方式 1：通过WebView的loadUrl（）
实例介绍：点击 Android 按钮，即调用 WebView JS（文本名为javascript）中 callJS（）
具体使用：
步骤 1：将需要调用的 JS 代码以.html格式放到 src/main/assets 文件夹里

1.为了方便展示，本文是采用 Andorid 调用本地 JS 代码说明；
2.实际情况时，Android 更多的是调用远程 JS 代码，即将加载的JS 代码路径改成 url 即可

需要加载 JS 代码：javascript.html

// 文本名：javascript
<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Carson_Ho</title>

// JS代码
     <script>
// Android需要调用的方法
   function callJS(){
   
      alert("Android调用了JS的callJS方法");
   }
</script>

   </head>

</html>

步骤 2：在 Android 里通过 WebView 设置调用 JS 代码

Android 代码：MainActivity.java
注释已经非常清楚

public class MainActivity extends AppCompatActivity {
   

    WebView mWebView;
    Button button;

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

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

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

        button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                // 通过Handler发送消息
                mWebView.post(new Runnable() {
   
                    @Override
                    public void run() {
   

                        // 注意调用的JS方法名要对应上
                        // 调用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });

            }
        });

        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体，内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        mWebView.setWebChromeClient(new WebChromeClient() {
   
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
   
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.

最低0.47元/天解锁文章

Tech Ranger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Android】Webview与JavaScript交互介绍

交互方式总结Android 与 JS 通过 WebView 互相调用方法实现，实际上是：Android 去调用 JS 的代码JS 去调用 Android 的代码二者沟通的桥梁是 WebView对于 Android 调用 JS 代码的方法有 2 种： 1. 通过WebView的loadUrl（） 2. 通过WebView的evaluateJavascript（）对于 JS 调用 Android 代码的方法有 3 种： 1. 通过WebView的addJavascriptInterface（）进.
复制链接

扫一扫

专栏目录