关于Android与JS网页端的交互，网上有很多教程，刚做这功能，参考了多方资料，最终出来后觉得简单，但是为实现的话有诸多小问题，最终效果如下：

现在简单整理一下：（直接贴代码，注释详细，应该能懂的）：

　一、首先是网页端，这个就是一些简单的标签语言和JS函数：

　　

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>H5 And Android</title>

<script>

    //定义本地方法 效果提供给Android端调用   被调用后将获得参数值

    function callH5(data){

        document.getElementById("result").innerHTML="result success for Android to:"+data;

    }  

    //定义本地点击事件 效果调用Android方法 传递参数给Android客服端

    function myOnclick(){

        document.getElementById("result").innerHTML="按钮被点击了"

        //调用android本地方法  调用对象由Android定义实例化，调用方法由Android提供 (具体对象名和方法待定，可变更)

        myObj.callAndroid("弹窗显示回调成功了～～～");

    }

    </script>

</head>

<body>

    <button id="button" onclick="myOnclick()">点击调用Android方法</button>

    <p/>

    <div id="result">效果展示</div>

</body>

</html>

该代码已经放于个人服务器上，提供地址，有需要的童鞋可以直接使用：http://lvyerose.com/h5andAndroid.html

　二、接下来就是Android中加载web网页，并且设置完成交互了，直接上代码，也有详细注释:

　

 1 package com.lvyerose.h5andandroid;

 2

 3 import android.annotation.SuppressLint;

 4 import android.os.Bundle;

 5 import android.support.v7.app.AppCompatActivity;

 6 import android.support.v7.widget.Toolbar;

 7 import android.view.View;

 8 import android.webkit.JavascriptInterface;

 9 import android.webkit.WebView;

10 import android.widget.Toast;

11

12 public class MainActivity extends AppCompatActivity {

13     private WebView mWebView;

14     public void onCreate(Bundle savedInstanceState) {

15         super.onCreate(savedInstanceState);

16         setContentView(R.layout.activity_main);

17         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

18         setSupportActionBar(toolbar);

19

20         mWebView = (WebView) findViewById(R.id.webView);

21         initWeb();

22

23     }

24

25     @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})

26     void initWeb(){

27         //设置编码

28         mWebView.getSettings().setDefaultTextEncodingName("utf-8");

29         //支持js

30         mWebView.getSettings().setJavaScriptEnabled(true);

31

32         //设置本地调用对象及其接口

33         //第一个参数为实例化自定义的接口对象  第二个参数为提供给JS端调用使用的对象名

34         mWebView.addJavascriptInterface(new Contact() {

35

36             @JavascriptInterface    //必须加的注解

37             @Override

38             public void callAndroid(String phone) {

39                 Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();

40             }

41         }, "myObj");

42         //载入js

43         mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");

44

45         findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {

46             @Override

47             public void onClick(View v) {

48                 //Android调用Js方法，其中参数 'Android OK !!!' 可传入变量  效果如下：

49 //                mWebView.loadUrl("javascript:callH5('"+str+"')");

50                 mWebView.loadUrl("javascript:callH5('Android OK !!!')");

51

52             }

53         });

54     }

55     //定义接口，提供给JS调用

56     interface Contact {

57         @JavascriptInterface

58         void callAndroid(String phone);

59

60     }

61

62

63

64 }

由此2步，即可完成交互效果～～～如有疑问，欢迎FQ～～～

最后附上一篇不错的博文，关于 Android中WebView的基本使用，很详细，涵盖各方面。

来自蜀汉玫瑰编辑！
 
分类: Android
 
好文要顶 关注我 收藏该文  
0
0
 
(请您对文章做出评价)
 

H5与Android之间的交互的更多相关文章

  1. Unity与Android之间的交互之AndroidManifest

    https://blog.csdn.net/qq_15003505/article/details/70231975 AndroidManifest,中文名一般称之为清单文件.它描述了应用程序的组件的 ...

  2. Android html5和Android之间的交互

    今天补充了会昨天的问题,然后搞半天又出现莫名其妙的问题. 今天讲的是交互,先说html5在Android的调用. 上面的hello world上面的部分都是安卓里的布局 然后按这些布局自动生成代码. ...

  3. HTML5和IOS、Android之间的交互

    HTML5向IOS.Android传参: html给native传参需要注意三点: 1.判断终端设备,一般我们都是双系统开发,android和ios语言又不一样:我们需要用不同的方法给他们传递参数: ...

  4. 我的Android第五章：通过Intent实现活动与活动之间的交互

    Intent在活动的操作 作用: Itent是Android程序中各个组件直接交换的一个重要方式可以指定当前组件要执行任务同时也可以给各个组件直接进行数据交互              同时Inten ...

  5. 在android中实现webview与javascript之间的交互(转）

    参见“在android中实现webview与javascript之间的交互”

  6. 小程序中的web-view与h5网页之间的交互

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...

  7. Unity打包IOS和Android以及之间的交互

    1.导出的Xcode工程 主要讲解Unity导出的Xcode工程的目录结构 2.导出的Android-Eclipse工程 主要讲解Unity导出的Android-Eclipse工程的目录结构 3.导出 ...

  8. Android JS桥交互（"Uncaught ReferenceError: xxx is not defined or xxx has no method"）

    网上android和js交互的代码有不少,也很容易搜到.最近在做的项目需要用到js桥,遇到了一些问题,记录下来,希望以后遇到能马上解决掉. 一开始我找的demo是从这个:http://blog.csd ...

  9. Android与js交互拍照上传资料

    应用场景:h5通知android端拍照,选相册,然后将图片路径上传成功之后,获取到网络路径,将此路径返还给h5界面,并展示出来. android与js快速交互 效果图如下:   1.在Activity ...

随机推荐

  1. js零碎整理

    本文格式: 大整合类标题 文章标题 作者:文章网址 USA:参考老外网址/老外网址 &&: 意思是内涵一个系列 javascript方面整理: 1. for in 循环的输出顺序问题 ...

  2. angular.js学习笔记：实现商品价格计算实例

    <!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...

  3. 过程 : 系统语言和jobPost 语言版本

    在前台,用户选择语言会是checkbox list,可以选择多个.如果英文是主要语言,那么 ·选择英文而已,jobPosts 只显示英文版本 ·如果jobPost有英文和中文,只显示英文 ·如果job ...

  4. 每天一个Linux命令（13）--less命令

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是Linux正统馋看文件内容的工具,功能极其强大.less 的用法比起  more 更加有弹性.  在 more 的时候,我们没有办法向前面 ...

  5. [微信小程序-开发工具]快捷键

    1.进入快捷键  >  > 2.快捷键 1.元素面板 ↑↓:导航元素 →←:展开/折叠 Enter:编辑属性 H:隐藏元素 F2:切换编辑HTML 2.样式窗口 Tab/Shift + T ...

  6. HTML5培训哪里靠谱

    兄弟连IT培训教育,是学科最全的IT培训机构,涵盖HTML5培训.等学科,并是业内推出真实千万级服务器架构课程的唯一培训学校.兄弟连已分别在北京.上海.广州.沈阳.郑州.济南.成都.杭州.南京.南宁. ...

  7. nodejs中的异步流程序控制nsync

    异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等 http://cnodejs.org/topi ...

  8. 不需要密码的windows计划任务设置

    使用windows计划任务定时做些事情,确实非常方便,但创建任务时老是需要设置密码,否则在执行任务时会报80070005的系统错误导致任务无法执行. 有时windows没设密码或当账户修改密码就必须修 ...

  9. 【JS】JavaScript中的参数传递

    ECMAScript中所有函数的参数都是按值传递的,简单讲就是函数外部的值 复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.切记访问变量有按值访问和按引用访问,而参数只能按值传递. 在向 ...

  10. java装箱跟拆箱解析

    /** * 在jdk1.5之后,java为基本数据类型到对应的应用数据类型提供了自动拆箱装箱操作 * 不管是自动拆箱还是自动装箱都是应用数据类型有的方法,基本数据类型是没有任何方法可调用的 *从概念上 ...