JavaScript与Android原生相互调用并传参

最新推荐文章于 2024-04-16 20:33:30 发布

别吵醒我的梦

最新推荐文章于 2024-04-16 20:33:30 发布

阅读量2.7k

点赞数 1

分类专栏： Android开发文章标签： javascript webview 相互调用传参 android

本文链接：https://blog.csdn.net/qiaojianqiang/article/details/65665363

版权

Android开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简介

最近项目中使用到了WebView通过JavaScript与Android原生进行交互，调用Android中的方法或者是调用Android手机硬件和资源，通过Google、百度了各种资料，因此，在这里分享一下，也把自己学习的知识做一个总结记录。

开发步骤分析

1、添加权限

使用到WebView首先得想到在AndroidManifest.xml文件中添加访问网络的权限。否则就会报错，错误信息我之前做过记录，错误信息地址。

<uses-permission android:name="android.permission.INTERNET"/>

2、加载html文件

加载HTML文件，可以是服务器上的HTML文件，也可以是放在assets 目录下的本地文件。

服务器用：webView.loadUrl(“http://www.baidu.com“);
本地文件用：webView.loadUrl(“file:///android_asset/xxx.html”);

html文件代码如下，其中AndroidWebView为JS与Android协议好的调用对象，通过这个对象进行交互。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Android WebView 与 Javascript 交互</title>
<head>
    <style>
  body {background-color:#e6e6e6}

  .rect
  {
    color:white;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    width:100px;
    padding:6px;
    background-color:#98bf21;
    text-decoration:none;
    text-align:center;
    border:none;
    cursor:pointer;
  }

  .inputStyle {font-size:16px;padding:6px}
  </style>
</head>

<body>
<p>WebView与Javascript交互</p>
<input id = "name_input" class = "inputStyle" type="text"/>
<a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>
<br>
<br>
<input type="button" id="select_img" value="选择图片" onclick="selectImage()"/>
<br>
<br>
<img id="img" src="file:///android_asset/ic_launcher.png" alt="图片" width="200" height="200"/>

<script>
  function sendInfoToJava(){
    //调用android程序中的方法，并传递参数
    var name = document.getElementById("name_input").value;
    window.AndroidWebView.showInfoFromJs(name);
  }

  //在android代码中调用此方法
  function showInfoFromJava(msg){
    alert("来自客户端的信息："+msg);
  }

  function selectImage() {
    window.AndroidWebView.selectPic();
  }

  function showPicPath(path){
    alert("图片路径：" + path);
    document.getElementById("img").src = path;
  }
  </script>

</body>
</html>

3、编写Android代码

//初始化webView控件以及设置本地调用对象及其接口  
private void initView() {
        mWebView = (WebView) findViewById(R.id.web_view);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new MyWebChromeClient());
        mWebView.setWebViewClient(new MyWebViewClient(this));
        //设置本地调用对象及其接口  
        mWebView.addJavascriptInterface(new JSObject(this), "AndroidWebView");             mWebView.loadUrl("file:///android_asset/test.html");
    }


//在java中调用js代码
    public void sendInfoToJs(View view) {
        String message= ((EditText) findViewById(R.id.input_et)).getText().toString();
        //调用js中的函数：showInfoFromJava(message)
        mWebView.loadUrl("javascript:showInfoFromJava('" + message+ "')");
    }


//JavaScript回调
 private class JSObject {
        private Context mContext;

        public JSObject(Context context) {
            this.mContext = context;
        }

        //在js中触发此方法。
        @JavascriptInterface
        public void showInfoFromJs(String name) {
            Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void selectPic() {
            showSelectPhotoDialog();
        }
    }


private class MyWebViewClient extends WebViewClient {
        private Context mContext;

        public MyWebViewClient(Context context) {
            super();
            mContext = context;
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            Log.d(TAG, "URL地址:" + url);
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            Log.i(TAG, "onPageFinished");
            super.onPageFinished(view, url);
        }
    }



private class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            return super.onJsAlert(view, url, message, result);
        }
    }

以上就是简单的JS与Android原生交互以及传递参数主要代码，JS端会取出input中的数据，并调用sendInfoToJava()方法将取到的数据传递给Android原生界面（window.AndroidWebView.showInfoFromJs(name)）。Native界面会通过回调 showInfoFromJs(String name)方法取出并弹出提示。同样原生通过EditText中取到数据，通过sendInfoToJs(View view)方法回调JS中的showInfoFromJava(msg)并取出数据Alert提示。

别吵醒我的梦

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript与Android原生相互调用并传参

简介最近项目中使用到了WebView通过JavaScript与Android原生进行交互，调用Android中的方法或者是调用Android手机硬件和资源，通过Google、百度了各种资料，因此，在这里分享一下，也把自己学习的知识做一个总结记录。开发步骤分析1、添加权限使用到WebView首先得想到在AndroidManifest.xml文件中添加访问网络的权限。否则就会报错，错误信息我之前
复制链接

扫一扫