Android中webView与h5交互

Android中webview与h5互调

---

在Android中，通过webview加载html和pdf文件，那么Android与html数据交互要通过js。

一.Android调取js

1.首先在布局文件中创建WebView。

2.设置webview属性。

3.在html中编写js方法

4.使用webview.loadUrl()调用js方法并传递参数

二.js调取Android

1.首先在布局文件中创建WebView。

2.设置webview属性。

3.创建JavaScript代码和客户端的Android代码之间的接口。

4.JS和Android代码间绑定一个新的接口，需要调用 addJavascriptInterface()方法

  两个参数：1.Java对象实例（新建接口）

                    2.字符串，该字符串是在js中别名，js通过这个字符串调取该Java对象方法。

5.js调取Java对象方法。

下面看代码实现

1.布局文件中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android调js"/>



<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"/>

</LinearLayout>

2.Java类

public class MainActivity extends AppCompatActivity {
    private WebView webView;
    private Button btn1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView(){
        btn1=findViewById(R.id.btn1);
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                SimpleDateFormat df=new SimpleDateFormat("yyyy年MM月dd日");
                String date=df.format(new Date());
                String name="张三";
                String action="测试了Android调取js方法";
                webView.loadUrl("javascript:setData('"+"==="+name+"==="+"','"+date+"','"+"==="+action+"=="+"');");
            }
        });
        webView=findViewById(R.id.webView);
        //硬件加速
        /**
         *FFLAG_HARDWARE_ACCELERATED  对该window进行硬件加速.
         */
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

        webView.addJavascriptInterface(new MyJsInterface(this),"TestAndroid");
        WebSettings webSettings=webView.getSettings();
        //让webView能够执行JavaScript
        webSettings.setJavaScriptEnabled(true);
        //让JavaScript可以自动打开Windows
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        //设置缓存
        webSettings.setAppCacheEnabled(true);
        //设置缓存模式
        /**
         * cache模式有如下几种:
         LOAD_DEFAULT: 如果我们应用程序没有设置任何cachemode， 这个是默认的cache方式。 加载一张网页会检查是否有cache，如果有并且没有过期则使用本地cache，否则从网络上获取                                 从网络上获取。
         LOAD_CACHE_ELSE_NETWORK: 使用cache资源，即使过期了也使用，如果没有cache才从网络上获取。
         LOAD_NO_CACHE: 不使用cache 全部从网络上获取
         LOAD_CACHE_ONLY:  只使用cache上的内容。
         */
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        //支持缩放（适配到当前屏幕）
        webSettings.setSupportZoom(true);
        //支持内容重新布局让webview只显示一列,以下是四种模式的介绍
          /**
         * Enum for controlling the layout of html.
         * <ul>
         *   <li>{@code NORMAL} means no rendering changes. This is the recommended choice for maximum
         *       compatibility across different platforms and Android versions.
           *       表示没有渲染更改。 这是在不同平台和Android版本之间实现最大兼容性的推荐选择</li>
         *   <li>{@code SINGLE_COLUMN} moves all content into one column that is the width of the
         *       view.*       将所有内容移动到一列中，该列是视图的宽度</li>
         *   <li>{@code NARROW_COLUMNS} makes all columns no wider than the screen if possible. Only use
         *       this for API levels prior to </li>
         *   <li>{@code TEXT_AUTOSIZING} boosts font size of paragraphs based on heuristics to make
         *       the text readable when viewing a wide-viewport layout in the overview mode.
         *       It is recommended to enable zoom support {@link #setSupportZoom} when
         *       using this mode. Supported from API level
         *       {@link android.os.Build.VERSION_CODES#KITKAT}</li>
         * </ul>
         */
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //设置可以被显示的屏幕控制
        webSettings.setDisplayZoomControls(true);
        //设置默认字体大小
        webSettings.setDefaultFontSize(12);
       webView.loadUrl("file:///android_asset/jstest.html");
       webView.setWebViewClient(new WebViewClient(){
           @Override
           public void onPageStarted(WebView view, String url, Bitmap favicon) {
               super.onPageStarted(view, url, favicon);
           }

           @Override
           public void onPageFinished(WebView view, String url) {
               super.onPageFinished(view, url);

           }
       });

    }

    class MyJsInterface{
        Context mContext;
        MyJsInterface(Context mContext){
            this.mContext=mContext;
        }
        // 如果target 大于等于API 17，则需要加上如下注解
         @JavascriptInterface
        public void showToast(String toast){
            Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
        }
    }
}

3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS与Android互调测试</title>
    <script type="text/javascript" charset="UTF-8">
        function setData(name,date,action){
            document.getElementById("name").innerHTML=name;
             document.getElementById("date").innerHTML=date;
              document.getElementById("action").innerHTML=action;}

              function showAndroidToast(toast){
                TestAndroid.showToast(toast);
              }
    </script>

</head>
<body>
<input id="input" type="button" value="js调取Android" onclick="showAndroidToast('我是HTML中的，我调用了Android的Toast方法！！！！')">
<div ><span>姓名：</span><span id="name"></span></div>
<div><span>时间：</span><span id="date"></span></div>
<div><span>事情：</span><span id="action"></span></div>

</body>
</html>