H5与Android之间的交互
关于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~~~
H5与Android之间的交互的更多相关文章
- Unity与Android之间的交互之AndroidManifest
https://blog.csdn.net/qq_15003505/article/details/70231975 AndroidManifest,中文名一般称之为清单文件.它描述了应用程序的组件的 ...
- Android html5和Android之间的交互
今天补充了会昨天的问题,然后搞半天又出现莫名其妙的问题. 今天讲的是交互,先说html5在Android的调用. 上面的hello world上面的部分都是安卓里的布局 然后按这些布局自动生成代码. ...
- HTML5和IOS、Android之间的交互
HTML5向IOS.Android传参: html给native传参需要注意三点: 1.判断终端设备,一般我们都是双系统开发,android和ios语言又不一样:我们需要用不同的方法给他们传递参数: ...
- 我的Android第五章:通过Intent实现活动与活动之间的交互
Intent在活动的操作 作用: Itent是Android程序中各个组件直接交换的一个重要方式可以指定当前组件要执行任务同时也可以给各个组件直接进行数据交互 同时Inten ...
- 在android中实现webview与javascript之间的交互(转)
参见“在android中实现webview与javascript之间的交互”
- 小程序中的web-view与h5网页之间的交互
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支 ...
- Unity打包IOS和Android以及之间的交互
1.导出的Xcode工程 主要讲解Unity导出的Xcode工程的目录结构 2.导出的Android-Eclipse工程 主要讲解Unity导出的Android-Eclipse工程的目录结构 3.导出 ...
- Android JS桥交互("Uncaught ReferenceError: xxx is not defined or xxx has no method")
网上android和js交互的代码有不少,也很容易搜到.最近在做的项目需要用到js桥,遇到了一些问题,记录下来,希望以后遇到能马上解决掉. 一开始我找的demo是从这个:http://blog.csd ...
- Android与js交互拍照上传资料
应用场景:h5通知android端拍照,选相册,然后将图片路径上传成功之后,获取到网络路径,将此路径返还给h5界面,并展示出来. android与js快速交互 效果图如下: 1.在Activity ...
随机推荐
- Java编程风格学习(二)
二.格式规范 在上一篇的Java编程风格学习(一)中我们讲述了在Java编码中的一般原则,虽然这些原则并不涉及具体的代码规范,但是这些原则却是我们在Java开发过程中所应该遵循的规范与思想.今天我们将 ...
- devexpress表格控件gridcontrol特殊应用(一)——实现禁用特定行(附源代码)
一些特殊的项目中会存在一些特殊需求,如需要禁用特定行.这时候gridcontrol的一般属性是实现不了的,就需要做一些更改.这时候你就需要去devexpress官网中找寻些资料(官网https://w ...
- Javascript继承(暂略去中转函数、组合继承和寄生继承)
继承,在JS中通过原型链实现.如: function Box(){ this.name="Lee"; } function Desk(){ this.age=100; } //通过 ...
- PHP中include()与require()的区别
require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...
- 第十九篇 js高级知识---词法分析和AO 链
上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...
- JavaScript基础——变量、语句、注释
一.变量的命名规则 1.变量名由数字.字母.下划线组成 2.变量名的首字母不能是数字,只能是字母或者下划线 3.不能使用关键字和保留字作为变量名 4.变量严格区分大小写,例如在JavaScript中o ...
- GPU渲染管线概述
1.顶点着色器 顶点着色器是流水线的第一个阶段,它的输入来自于CPU.顶点着色器的处理单位是顶点,也就是说输入进来的每个顶点都会调用一次顶点着色器. 顶点着色器需要完成的工作主要有:坐标变换和逐顶点光 ...
- 使用Three.js网页引擎创建酷炫的3D效果的标签墙
使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...
- File类和时间类的两道综合练习
练习1: 获取指定目录下(包含子目录)所有的某一种类型的文件 分析: 1.指定路径并获取其下的文件对象 2.要判断给定的目录是否为空 3.要判断给定路径下获取的目录是否为空 4.判断是否是某种文件 5 ...
- Java线程池ExecutorService
开篇前,我们先来看看不使用线程池的情况: new Thread的弊端 执行一个异步任务你还只是如下new Thread吗? new Thread(new Runnable() { @Override ...