一、首先是网页端,这个就是一些简单的标签语言和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("弹窗显示回调成功了~~~");
}

js调用android

 注册js对象名称为control,方法为toNews,传的是新闻id和新闻类型 
 
WebSettings webSettings = webView.getSettings();
// 设置WebView属性,能够执行Javascript脚本
webSettings.setJavaScriptEnabled(true);
// 设置可以访问文件
webSettings.setAllowFileAccess(true);
// 设置支持缩放
webSettings.setBuiltInZoomControls(true);
webView.addJavascriptInterface(new JavaScriptInterfaces(), "control");
// 加载需要显示的网页
webView.loadUrl(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl);
String str = url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl;
LogUtils.e(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl);
// 设置Web视图
webView.setWebViewClient(new webViewClient());// 如果去掉webView会用浏览器加载网络连接
class JavaScriptInterfaces {
JavaScriptInterfaces() {
} @JavascriptInterface
public void toNews(long newsId, String accessUrl) {
Intent intent = new Intent(SpecialWebActivity.this, NewsDetailsWebActivity.class);
intent.putExtra("newsId", newsId + "");
startActivity(intent);
}
}

</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);

}

}

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

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

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  2. Android原生webview中js交互

    http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...

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

    <html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...

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

    一.捕获异常 异常处理是Java中的功能.在Android中使用SDK进行开发的时候常常要用到.Android原生代码在运行过程中假设遇到错误,须要检測,并抛出异常给Java层.运行原生代码出现了问题 ...

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

    一.捕获异常 异常处理是Java中的功能,在Android中使用SDK进行开发的时候经常要用到.Android原生代码在执行过程中如果遇到错误,需要检测,并抛出异常给Java层.执行原生代码出现了问题 ...

  6. iOS原生APP和H5交互-delegate和第三方

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

  7. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...

  8. Android原生嵌入React Native

    1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们i ...

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

    作为一个Android新手小白,刚到新公司,最近的工作就是在学习解各类Bug.转型之初,面临各种新知识,会有压力,但是学习的过程是快乐的. 上周刚遇上一类bug,就是应用的内存泄漏问题.最终通过前辈的 ...

随机推荐

  1. 自己写的驱动用CreateFile打开时错误码返回1的问题

    就像题目上说的,今天在写一个例子代码时遇到了这个问题,下面是当时驱动层和应用层的代码: #include <ntddk.h> #define BASE_CODE 0x800 #define ...

  2. [认证授权] 6.Permission Based Access Control

    在前面5篇博客中介绍了OAuth2和OIDC(OpenId Connect),其作用是授权和认证.那么当我们得到OAuth2的Access Token或者OIDC的Id Token之后,我们的资源服务 ...

  3. python与 Ajax跨域请求

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

  4. python基本数据类型学习

    python是极其简洁的一门高级语言,在python里面没有真正意义上的常量,只是用大写的标定表示常量(python中的常量是可以修改的),单行注释用#开始,.并且python不用定义数据类型,因为p ...

  5. 单张滑动tab 组件

    /* CSS重置 * */ body, ul, ol { margin: 0px; padding: 0px; } .flash { width: 300px; height: 420px; posi ...

  6. 【转载】从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD

    Github源码地址:https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scratc ...

  7. MATLAB数字图像处理学习笔记

    我们都知道一幅图片就相当于一个二维数组,可以用一个矩阵来表示,而MATLAB可以说就是为矩阵运算而生的,所以学习图像处理,学习MATLAB势在必行! 一. MATLAB基础知识 1. 读取图像 %im ...

  8. 软件161A 张慧敏

    一.PTA实验作业 题目1:7-11 单向链表3:编程实现:输入一个正整数 repeat (0<repeat<10),做 repeat 次下列运算:输入一个正整数 n(0<n< ...

  9. Python 解析构建数据大杂烩 -- csv、xml、json、excel

    Python 可以通过各种库去解析我们常见的数据.其中 csv 文件以纯文本形式存储表格数据,以某字符作为分隔值,通常为逗号:xml 可拓展标记语言,很像超文本标记语言 Html ,但主要对文档和数据 ...

  10. python写一个网页翻译器

    import urllib.requesturl='https://fanyi.baidu.com/v2transapi'data={}data['i']=opdata['from']='AUTO'd ...