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("弹窗显示回调成功了～～～");
}
js调用android
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交互的更多相关文章
- PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码
PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...
- Android原生webview中js交互
http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...
- Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框
<html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...
- Android NDK开发篇(六)：Java与原生代码通信(异常处理)
一.捕获异常 异常处理是Java中的功能.在Android中使用SDK进行开发的时候常常要用到.Android原生代码在运行过程中假设遇到错误,须要检測,并抛出异常给Java层.运行原生代码出现了问题 ...
- Android NDK开发篇：Java与原生代码通信(异常处理)
一.捕获异常 异常处理是Java中的功能,在Android中使用SDK进行开发的时候经常要用到.Android原生代码在执行过程中如果遇到错误,需要检测,并抛出异常给Java层.执行原生代码出现了问题 ...
- iOS原生APP和H5交互-delegate和第三方
一.原生代码中直接加载页面(拦截) 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...
- uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...
- Android原生嵌入React Native
1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们i ...
- Android - 通过真实案例学习解内存泄漏问题，最终发现Android原生Bug
作为一个Android新手小白,刚到新公司,最近的工作就是在学习解各类Bug.转型之初,面临各种新知识,会有压力,但是学习的过程是快乐的. 上周刚遇上一类bug,就是应用的内存泄漏问题.最终通过前辈的 ...
随机推荐
- Lua和C的语法差别
没有main函数 Lua是脚本语言,没有固定入口的main函数.当lua解析器解析某个lua代码文件时,lua解析器一样一行的解析lua脚本. print("Hello lua") ...
- Nginx的虚拟服务器域名配置
虚拟服务器名(server name)是通过指令server_name来指定的.在< Nginx是如何处理Request的?>一节中,我们讲到nginx分两步来匹配过来的Request请求 ...
- oracle练习--@余生请指教多
--1.查询出每个员工的编号,姓名,职位select Emp_id,Ename,job from emp;--2.查询每个员工的岗位名称select Ename,job from emp;--3.计算 ...
- django中数据库操作——in操作符
django一对多关系中,为了实现按照一端查询多端,之前都是用extra操作符,经过查看官方文档还有in这个操作符,用这个实现更简单.直接上代码: 根据查询条件模糊查询所有符合条件的机架列表,然后根据 ...
- gulp不完全入门教程
引言 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式化.浏览 ...
- C/C++中inline用法详解
(一)inline函数(摘自C++ Primer的第三版) 在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int ...
- C++ STL之min_element()与max_element（）（取容器中的最大最小值）
min_element()和max_element 头文件:#include<algorithm> 作用:返回容器中最小值和最大值.max_element(first,end,cmp);其 ...
- Monthly update for Dynamics 365 for Operation
日期 标题, 类别 版本 描述 2017/8/22 Dyn 365 Fin and Ops, Ent ed July 2017 Plat Update 10 Category: Download ...
- python网络编程基础
一.客户端/服务器架构 网络中到处都应有了C/S架构,我们学习socket就是为了完成C/S架构的开发. 二.scoket与网络协议 如果想要实现网络通信我们需要对tcpip,http等很多网络知识有 ...
- 织梦dede在首页调用留言本
织梦dedecms在首页调用留言本 . {dede:loop table=dede_guestbook sort=dtime row=10 titlelen=36 typeid=40 if=ische ...