Android原生代码与html5交互

一、首先是网页端,这个就是一些简单的标签语言和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>

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

package com.lvyerose.h5andandroid;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
  private WebView mWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);

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

}

@SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
void initWeb(){
  //设置编码  
  mWebView.getSettings().setDefaultTextEncodingName("utf-8");
  //支持js
  mWebView.getSettings().setJavaScriptEnabled(true);

  //设置本地调用对象及其接口
  //第一个参数为实例化自定义的接口对象 第二个参数为提供给JS端调用使用的对象名
  mWebView.addJavascriptInterface(new Contact() {

@JavascriptInterface //必须加的注解
@Override
public void callAndroid(String phone) {
  Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();
}
}, "myObj");
  //载入js
  mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");

  findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
  //Android调用Js方法,其中参数 ‘Android OK !!!‘ 可传入变量 效果如下:
  // mWebView.loadUrl("javascript:callH5(‘"+str+"‘)");
  mWebView.loadUrl("javascript:callH5(‘Android OK !!!‘)");

}
});
}
//定义接口,提供给JS调用
interface Contact {
  @JavascriptInterface
  void callAndroid(String phone);

}

}

时间: 2024-10-21 23:47:25

Android原生代码与html5交互的相关文章

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) , 已有13次阅读 ,共0个评论 依照我一惯得套路,我会先说一点废话. PhoneGap和Cordova什么关系?为什么有的地方叫Cordova而有的地方叫PhoneGap ?PhoneGap是一款HTML5平台.通过它,开发商能够使用HTML.CSS及JavaScript来开发本地移动应用程序.因此,眼下开

js和android原生代码交互

1.首先要建一个和包名一直的文件夹名 2.建立一个配置js和两个文件夹 3.配置文件js文件 4.java文件路径 java文件内容: 类继承CordovaPlugin并实现execute()方法 5.第二个文件夹中的js,用作桥梁 内容:    

Android原生webview中js交互

http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中,软件一打开就会访问网络获取到最新的界面.缺点是会受到网络信号的影响,从而导致访问速度慢. 1.用WebView来显示HTML代码 2.允许WebView执行JavaScript webView.getSettings().setJavaScriptEnabled(true); 3.获取到HTML文件

Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框

<html> <body> <script> function showAlert(){ alert("JavaScript - hello , world !"); } function showConfirm(){ confirm("访问 https://blog.csdn.net/zhangphil"); } function showPrompt(){ var string=prompt("请输入用户名"

Android NDK开发篇(六):Java与原生代码通信(异常处理)

一.捕获异常 异常处理是Java中的功能,在Android中使用SDK进行开发的时候经常要用到.Android原生代码在执行过程中如果遇到错误,需要检测,并抛出异常给Java层.执行原生代码出现了问题,例如使用了空指针.内存泄漏,并且没有做相应的检测盒异常抛出,APP会马上闪退,没有任何提示. JNI中的异常处理和Java的不一样.Java中的异常处理,是直接捕获,然后做相应的处理.JNI要求开发人员在异常发生之后显式实现异常处理流.例如以下例子: public class JavaClass

Android - 通过真实案例学习解内存泄漏问题,最终发现Android原生Bug

作为一个Android新手小白,刚到新公司,最近的工作就是在学习解各类Bug.转型之初,面临各种新知识,会有压力,但是学习的过程是快乐的. 上周刚遇上一类bug,就是应用的内存泄漏问题.最终通过前辈的指点,用了两天的时间(包括今天),来解决了这个问题,并最终发现了Android原生代码的bug(值得开心......).因此将学习的过程总结出来,可以供像我一样的新人参考学习. 一. 问题发现的背景  QA测试发现,多次打开Android系统中设置功能里的某个Activity时,其占用的资源未能释放

Android NDK开发篇(五):Java与原生代码通信(数据操作)

尽管说使用NDK能够提高Android程序的运行效率,可是调用起来还是略微有点麻烦.NDK能够直接使用Java的原生数据类型,而引用类型,由于Java的引用类型的实如今NDK被屏蔽了,所以在NDK使用Java的引用类型则要做对应的处理. 一.对引用数据类型的操作 尽管Java的引用类型的实如今NDK被屏蔽了,JNI还是提供了一组API,通过JNIEnv接口指针提供原生方法改动和使用Java的引用类型. 1.字符串操作 JNI把Java的字符串当作引用来处理,在NDK中使用Java的字符串,须要相

混合开发-利用Cordova插件实现HTML5 与 原生代码的连接

主要利用的就是通过Cordova这个东西, 进行HTML5 与 iOS断值得传递 列子:把HTML5 获取的日期同步到iOS系统的日历中去 1. 原生代码:.h.m 提供一个接口文件 主要代码: - (BOOL)saveEventToCalender:(NSString *)title content:(NSString *)contentTitle year:(NSString *)year date:(NSString *)date time:(NSString *)time { // 定义

Android NDK开发篇(四):Java与原生代码通信(原生方法声明与定义与数据类型)

Java与原生代码通信涉及到原生方法声明与定义.数据类型.引用数据类型操作.NIO操作.訪问域.异常处理.原生线程 1.原生方法声明与定义 关于原生方法的声明与定义在上一篇已经讲一点了,这次具体分析一下.依据javah自己主动生成的头文件.能够看出原生方法的声明和定义,比如: JNIEXPORT jstring JNICALL Java_com_shamoo_helljni_HelloJni_stringFromJNI(JNIEnv *, jobject); 虽然Java上的原生方法没有不论什么