Android和H5交互-基础篇
hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的?
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的,根据HTML文件所在的位置不同写法也不同:
//例如:加载assets文件夹下的test.html页面
mWebView.loadUrl("file:///android_asset/test.html")
//例如:加载网页
mWebView.loadUrl("http://www.baidu.com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时,页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话,那么就得设置setWebViewClient:
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通过Java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
WebSettings webSettings = mWebView.getSettings();
//设置为可调用js方法
webSettings.setJavaScriptEnabled(true);
若调用的js方法没有返回值,则直接可以调用mWebView.loadUrl("javascript:do()");其中do是js中的方法;若有返回值时我们可以调用mWebView.evaluateJavascript()方法:
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代码如下:
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明,下面是在一个本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定义完这个方法后再调用mWebView.addJavascriptInterface()方法:
mWebView.addJavascriptInterface(new JsInteration(), "android");
那么在js中怎么来调用呢?
<script type="text/javascript">
function s(){
//调用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判断url拦截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码:
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android调用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">调用本地方法</button>
<a href="file:///android_asset/test2.html">点击</a>
<p id="p"></p>
</body>
</html>
作者:YouJZ
链接:http://www.jianshu.com/p/a25907862523
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Android和H5交互-基础篇的更多相关文章
- Android Fragment使用(一) 基础篇 温故知新
Fragment使用的基本知识点总结, 包括Fragment的添加, 参数传递和通信, 生命周期和各种操作. Fragment使用基础 Fragment添加 方法一: 布局里的标签 标识符: tag, ...
- Android与H5交互(java与js的交互)
一.理论概述 1.js调用java方法 直接调用WebView的该方法就可以添加接口了,不过先要启动交互 // 启用javascript mWebView.getSettings().setJavaS ...
- 深入了解Android蓝牙Bluetooth——《基础篇》
什么是蓝牙? 也可以说是蓝牙技术.所谓蓝牙(Bluetooth)技术,实际上是一种短距离无线电技术,是由爱立信公司公司发明的.利用"蓝牙"技术,能够有效地简化掌上电脑.笔记本电 ...
- Android自己定义View基础篇(三)之SwitchButton开关
自己定义View基础篇(二) 自己定义View基础篇(一) 自己定义View原理 我在解说之前,先来看看效果图,有图有真相:(转换gif图片效果太差) 那来看看真实图片: 假设你要更改样式,请改动例如 ...
- Android与H5交互
1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...
- Android图片开发内幕--基础篇
前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...
- Android与H5交互 原理与对比
原文: https://www.jianshu.com/p/345f4d8a5cfa 1.Android调用JS的方法有2种: (1)通过WebView的loadUrl() // 调用js中的函数: ...
- (转)Android高性能编程(1)--基础篇
关于专题 本专题将深入研究Android的高性能编程方面,其中涉及到的内容会有Android内存优化,算法优化,Android的界面优化,Android指令级优化,以及Android应用内存占 ...
- Android自定义控件系列之基础篇
一.概述 在android开发中很多UI控件往往需要进行定制以满足应用的需要或达到更加的效果,接下来就通过一个系列来介绍自定义控件,这里更多是通过一些案例逐步去学习,本系列有一些典型的应用,掌握好了大 ...
随机推荐
- JS——回调函数
1.回调函数作为参数的形式进行使用 2.回调函数一定程度上达到了解耦效果(模块化.功能化) <script> console.log(op(1, 2, add)); console.log ...
- dotnetnuke 添加用户属性 Profile
if (DotNetNuke.Entities.Profile.ProfileController.GetPropertyDefinitionByName(this.PortalId, "Q ...
- 为什么有些异常throw出去需要在函数头用throws声明,一些就不用
throw new IllegalStateException(".");不用在函数头声明throws IllegalStateExceptionthrow new IOExcep ...
- js 闭包 定时器
; !function (win) { ; //内部私有 , ; //内部私有 //test.prototype.tt1 = 0;//共有变量 var test = function () {}; t ...
- Java 之jdbc连接mysql数据库
package jdbc; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; ...
- excel 类获取起始列和使用列
m_excel.OpenWorkBook(sFileName, sSheetDrawingList); // Get drawing info int iStartRow = 0, iStartCol ...
- centos vm 桥接 --网络配置
/etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 BOOTPROTO=none BROADCAST=192.168.1.255 HWADDR= ...
- 一步一步教你用IntelliJ IDEA 搭建SSM框架(2)——配置mybatis-geneator
我们要搭建整个SSM框架,所以要继续上篇文章没有完成的工作,下面配置mybatis-geneator,自动生成mybatis代码. 在上篇文章中的pom.xml的配置文件中已经加了mybatis-ge ...
- PAT_A1003#Emergency
Source: PAT A1003 Emergency (25 分) Description: As an emergency rescue team leader of a city, you ar ...
- 【vue】vue中实现标签页
前言 tab标签页实现很多, 纯css实现, js实现等, 外加一些特殊动画. vue中实现标签页实现 keep-alive标签和is特性 vue-router中嵌套路由 is特性实现(推荐) 优点: ...