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"?>

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.         *          *   {@code NORMAL} means no rendering changes. This is the recommended choice for maximum         *       compatibility across different platforms and Android versions.           *       表示没有渲染更改。 这是在不同平台和Android版本之间实现最大兼容性的推荐选择
         *   {@code SINGLE_COLUMN} moves all content into one column that is the width of the         *       view.*       将所有内容移动到一列中，该列是视图的宽度
         *   {@code NARROW_COLUMNS} makes all columns no wider than the screen if possible. Only use         *       this for API levels prior to 
         *   {@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}
         * 
         */        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

        JS与Android互调测试    姓名：时间：事情：

Android中webView与h5交互

Android中webview与h5互调

更多相关文章

随机推荐