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,就是应用的内存泄漏问题.最终通过前辈的 ...
随机推荐
- eslint 的基本配置介绍
eslint 这个代码规则,是在用webpack +vue-cli这个脚手架时候接触的,默认的规则可能不太习惯我们日常平时的代码开发,需要对这个规则稍加改造. 下面的是 eslintrc.js的基本规 ...
- npm package.json文件解读
每个Nodejs项目的根目录下面,一般都会有一个package.json文件.该文件可以由npm init生成,定义了项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据). pa ...
- 数据结构-栈 C和C++的实现
在数据结构中,栈是一种桶状结构,每次往桶里放数据,最后放的数据最先被拿出来,最先放进去的数据最后才能出来(FILO) C语言: 一.文件清单: MyStack.h: #ifndef _MYSTACK_ ...
- 转- 在ubuntu下安装Nginx
一. 安装包安装 1.1 安装Nginx $sudo apt-get install nginx Ubuntu安装之后的文件结构大致为: 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经 ...
- LVS集群之NAT模式实例（3）
LVS集群NAT模式实例 1. 实验拓扑图 DS 必须有两块网卡,需要在上面做NAT. 2. 实验环境 3台CentOS6.4 64bit的服务器. 类型 IP DR eth0:10.20.73.20 ...
- 初入python 用户输入，if，（while 循环）
python 基础 编译型: 一次性将所有程序编译成二进制文件. 缺点:开发效率低,不能跨平台 优点:运行速度快. :c ,c++语言 等等.... 解释行:当程序执行时,一行一行的解释. 优点:开发 ...
- python函数定义
刚学用Python的时候,特别是看一些库的源码时,经常会看到func(*args, **kwargs)这样的函数定义,这个*和**让人有点费解.其实只要把函数参数定义搞清楚了,就不难理解了. 先说说函 ...
- 最长递减子序列（nlogn）(个人模版)
最长递减子序列(nlogn): int find(int n,int key) { ; int right=n; while(left<=right) { ; if(res[mid]>ke ...
- [51nod1709]复杂度分析
给出一棵n个点的树(以1号点为根),定义dep[i]为点i到根路径上点的个数.众所周知,树上最近公共祖先问题可以用倍增算法解决.现在我们需要算出这个算法精确的复杂度.我们定义计算点i和点j最近公共组先 ...
- 用于浏览器桌面通知的Web API 接口 -notification
notification 接口用于浏览器向用户提供通知内容:常见的如网页版的微信: 1.实现,需要Notifications API 提供的通知接口: 用法: let notification = n ...