Webview 与h5的交互
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webview 与h5的交互相关的知识，希望对你有一定的参考价值。
步骤：H5代码
<html>
<head>
<meta charset="UTF-8">
<title>交互Demo</title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
</head>
<body>
getUserinfo:<br>
<input value="立即报名" type="button" onClick="baoming();" /><br>
<input value="详细信息" type="button" onClick="baoming1();" /><br>
<input value="你好" type="button" onClick="baoming2();" /><br>
<script>
/*var rs=window.om.getUserinfo();
document.getElementById(‘userinfo‘).innerHTML=rs;*/
var rs=window.demo.getUserinfo();
var obj = eval ("(" + rs + ")");
if(obj.status){
document.getElementById(‘userinfo‘).innerHTML=obj.data.nickname;
}
function baoming(){
if(window.demo.needLogin()){
location.href=‘http://www.cnblogs.com/greatverve/archive/2012/03/08/android-assets.html‘;
}
}
function baoming1(){
if(window.demo.getUserinfo()){
location.href=‘http://www.cnblogs.com/greatverve/archive/2012/03/08/android-assets.html‘;
}
}
function baoming2(){
if(window.demo.getData("红红火火")){
location.href=‘http://www.cnblogs.com/greatverve/archive/2012/03/08/android-assets.html‘;
}
}
</script>
</body>
</html>
android 端需要写的代码
1:在XML 布局声明一个WebView
2:通过 loadUrl 加载本地文件或者网络文件
3:设置可以使用javascript,代码如下:
web_main.getSettings().setJavaScriptEnabled(true); //加上这句话才能使用javascript方法
具体安卓调用H5 的格式是: web_main.loadurl("javaScript:方法名");(方法名来自于H5 的方法名)
注意:安卓调用H5必须在主线程进行.
H5 调用安卓的方法::web_main.addJavascriptInterface(new PayJavaScriptInterface(), "demo");
后面有个参数:第一个是自定义类的实例化,第二个参数是自定义的名字(名字随便起),这个字段是为了让H5调用安卓的时候用的,//H5 调用Android 的格式 Window.第二个参数.方法名
4:定义一个类,类名叫PayJavaScriptInterface,里面有三个方法:分别是:getUserinfo,needLogin,getData,代码如下:
final class PayJavaScriptInterface {
PayJavaScriptInterface() {
}
@JavascriptInterface
public String getUserinfo() {
Toast.makeText(getApplicationContext(),"报名",Toast.LENGTH_LONG).show();
return "dd";
}
@JavascriptInterface
public boolean needLogin() {
Toast.makeText(getApplicationContext(),"登陆",Toast.LENGTH_LONG).show();
return false;
}
@JavascriptInterface
public void getData(String name){
Toast.makeText(getApplicationContext(),name,Toast.LENGTH_LONG).show();
}
}
//注意 自定义类,类名自己起,类里面的方法要与H5里面调用的方法名一致(可以和H5商量着起)
5:通过web_main.addJavascriptInterface让H5调用Android的方法,其中的两个参数的意思分别是:
第一个参数:定义类的实例化
第二个参数:自定义名字,让H5来调用安卓的方法
代码如下:web_main.addJavascriptInterface(new PayJavaScriptInterface(), "demo");
在H5中调用安卓的方法是:window.第二个参数(自定义名字).方法名
案例如下:
window.demo.needLogin()
Android 调用H5的方法:
格式如下:控件名.loadUrl("javascript:方法名")
代码如下:web_main.loadUrl("javascript:getData()");
声明:Android 调用H5 必须在主线程中调用,
方法1:
使用Handler代码如下:
//主线程
Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case 1:
web_main.loadUrl("javascript:baoming3()"); //aa是js的函数test()的参数
break;
}
}
};
//发送消息到主线程的方法
Message msg = handler.obtainMessage();
msg.what = 1;
handler.sendMessage(msg);
方法2:控件名.post(实例化线程)
web_main.post(new Runnable() {
@Override
public void run() {
web_main.loadUrl("javascript:baoming3()"); //aa是js的函数test()的参数
}
});
面试技巧:
Android 与H5 交互最主要有俩方法;
1:控件名.getsetting.setJavaScriptEnable设置为true
这个时候我们就能安卓调用J5的方法,
安卓调用H5 只需要一句话,
控件名.loadurl("javaScript:方法名"),但是这句话必须在主线程调用
第二个设置是 H5调用安卓的时候需要设置的,
是控件名.addJavaScriptInterface(),里面有俩参数,第一个参数是H5调用我们安卓方法需要封装的一个类的实例化,第二个参数是我们自定义的名字,H5调用安卓的时候用的,因为H5调用安卓的时候格式是 window.第二个参数.第一个类里面的方法名,但是里面类里面的方法方面必须加一句话 @javaScriptInterface 这个在安卓4.4以后H5才能调的动安卓的方法
以上是关于Webview 与h5的交互的主要内容，如果未能解决你的问题，请参考以下文章