Android中webView与h5交互
16lz
2021-01-23
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界面布局——视图/容器易混淆点总结
- 关于安装Android Studio的一些问题的解决方法
- android 按钮点击的两种方法以及长按事件
- Android View布局xml常用 属性详解
- android 相对布局属性说明
- android布局控件的用法