步骤：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的交互的更多相关文章

  1. Android中WebView与H5的交互，Native与JS方法互调

    项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...

  2. iOS webView与H5的交互(返回页面的处理)

    摘自:http://blog.csdn.net/qq_29284809/article/details/50548413 调用 H5页面的同名返回方法(必须保证名字一致)!!!

  3. webview和H5交互

    由于H5的灵活多变,动态可配的特点,也为了避免冗长 的审核周期,H5页面在app上的重要性正日益突显. iOS应用于H5交互的控件主要是UIWebView及WKWebView WKWebView是14 ...

  4. iOS原生APP与H5+JS交互////////////////////zzzz

    原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...

  5. Hybrid APP之Native和H5页面交互原理

    Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用 ...

  6. android：如何通过chrome远程调试APP中的webView的h5代码

    今天出现一个问题,在老板的Mate9 Pro上,我们APP的所有H5页面都是一片空白,但是在其他手机上都是好的,那么我们就怀疑是h5报错了,但是到底是什么错,无法得知,所以就想要可以像在pc的chro ...

  7. 浅谈 iOS 与 H5 的交互- JavaScriptCore 框架

    前言 小的作为一个iOS程序猿,可能研究JavaScript以及H5相关的知识并不是为了真正的要去转行做这一方面,其实更多的为了要研究OC中的JavaScriptCore框架,JavaScriptCo ...

  8. Android WebView与H5联调技巧

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/78 背景: 突然想写一篇关于Android WebView ...

  9. Android中webView和网页的交互

     Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...

随机推荐

  1. stm32cube--通用定时器--产生pwm波

    看了通用定时器的资料,发现内容挺多,挺难看懂,现在还是先掌握使用方法,以后再多看几遍吧. ① ② ③生成mdk工程后,在main.c的while(1)前面加上HAL_TIM_PWM_Start(&am ...

  2. urlencode 和 rawurlencode 的区别

    urlencode和rawurlencode的区别urlencode和rawurlencode的区别 $str1 = urlencode(':/?= &#'); $str2 = rawurle ...

  3. python核心编程第六章练习6-9

    6-9.转换.为练习5-13写一个姊妹函数,接受分钟数,返回小时数和分钟数.总时间不变,并且要求小时尽可能大.[答案]代码如下: #!/usr/bin/env python # translate m ...

  4. Linux cat命令的使用

    cat命令主要用来查看文件内容,创建文件,文件合并,追加文件内容等功能.   A:查看文件内容主要用法: 1.cat f1.txt,查看f1.txt文件的内容. 2.cat -n f1.txt,查看f ...

  5. osg,vtk,ogre的区别

    osg使用过一年,阅读过一部分源代码,vtk也断续使用过三四年了,ogre研究的比较深入,基本上比较熟悉它的整体结构,说说个人的看法 vtk是一个算法库,里面包括了很多挺不错的算法,如果做有限元云图, ...

  6. win7任务栏只显示日期不显示年月日

    某一天突然发现笔记本任务栏上的时间显示只剩下了时间,没有了年月日 于是百度 搜到的结果大多是如何设置显示的格式  yyyy-MM-dd 继续搜 终于搜到了正确答案 结果令我瞠目结舌  着实无奈 是因为 ...

  7. PDF 补丁丁 0.4.2.1218 测试版发布：新增拆分文档功能

    新的测试版的“提取页面”功能增加了拆分文档的选项. 可按照指定的页码范围(用“:”分号分割).顶层书签或指定页数三种方式,将一个 PDF 文档拆分成多个文档. 此功能还支持多个文档批量操作. 欢迎各位 ...

  8. sonar-gerrit-plugin-2.2.0 安装

    这是一个很新的插件国内使用的用户还是很少的,公司有需要才花了一段时间去研究. 作用:在 code review的时候可以将sonar的检测结果直接集成返回.帮助po对code 进行review. 请严 ...

  9. OC语言基础知识

    OC语言基础知识 一.面向对象 OC语言是面向对象的,c语言是面向过程的,面向对象和面向过程只是解决问题的两种思考方式,面向过程关注的是解决问题涉及的步骤,面向对象关注的是设计能够实现解决问题所需功能 ...

  10. git add 命令添加所有改动内容

    git add xx命令可以将xx文件添加到暂存区,如果有很多改动可以通过 git add -A .来一次添加所有改变的文件. 注意 -A 选项后面还有一个句点. git add -A表示添加所有内容 ...