Android与JavaScrip进行交互（二）
一、思路分析
经过測试发现，JS中的点击事件仅仅能写一个，假设写了多个，也仅仅会响应第一个，假设写的方法是android端的方法，在web端执行时，后台会报没有定义这种方法的错误。前台点击无响应。
所以，假设想要web中某个button在web端响应的是JS中的方法，而在android端响应的是android端的方法。就须要自己在页面载入完成时。手动注入JS函数监听。
二、代码
demo3.html
该段代码是放在assets目录下的
<? xml version="1.0" encoding="UTF-8"? ><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>veikr的博客 </title>
<meta name="generator" content="WordPress 3.5.1" />
<meta name="wap-version" content="1.10 (2008.8.3)" />
<link rel="alternate" type="application/rss+xml" title="veikr的博客 RSS Feed" href="http://veikr.com/feed" />
<link rel="pingback" href="http://veikr.com/xmlrpc.php" />
<link rel="shortcut icon" href="http://veikr.com/wp-content/themes/twentyten/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="wap.css" type="text/css" media="all" />
</head>
<body> <input type="button" id="testbtn" value="我是button1"
onClick="window.imagelistner.openImage()"
onClick="test2()"
/> <input onClick="test()" type="button" id="testbtn2" value="我是button2"/>
<a onClick="test3()">
<div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid" src="http://www.baidu.com/img/bd_logo1.png" /><br>
Click me!
</div>
</a>
</body>
<script language="javascript">
function test(){
alert("点击了button2");
}
function test2(){
alert("点击了button1");
}
function test3(){
alert("点击了图片");
} function wave() {
alert("点击了andorid中的button");
}
</script>
</html>
界面显演示样例如以下
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvWjE4Nzg5MjMxODc2/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > <WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="9" /> </LinearLayout>
MainActivity.java
package wst.webview; import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient; @SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity { private WebView contentWebView = null; @SuppressLint("SetJavaScriptEnabled")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
contentWebView = (WebView) findViewById(R.id.webview);
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 载入本地html文件，内容如上
contentWebView.loadUrl("file:///android_asset/demo3.html");
// 加入js交互接口类。并起别名 imagelistner
contentWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
contentWebView.setWebViewClient(new MyWebViewClient()); } // 注入js函数监听
<span style="white-space:pre"> </span>//以下提供了三种js注入函数，能够依据需求选择对应的JS函数
private void addImageClickListner() {
// 这段js函数的功能就是。遍历全部的img几点，并加入onclick函数，在还是运行的时候调用本地接口传递url过去
contentWebView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.imagelistner.openImage(this.src); " +
" } " +
"}" +
"})()");
//这段Js函数的功能是捕捉JS中的代码。对当中的id为testbtn的button。又一次加入点击事件
contentWebView.loadUrl("javascript:(function(){" +
"var obj = document.getElementById(\"testbtn\");" +
" obj.onclick=function() " +
" { "
+ " window.imagelistner.clickButton(); " +
" } " + "})()");
//这段js函数的功能是遍历全部的input几点，加入点击事件
contentWebView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"input\"); " +
"for(var i=0;i<objs.length;i++) " +
"{"
+ " objs[i].onclick=function() " +
" { "
+ " window.imagelistner.clickButton(); " +
" } " +
"}" +
"})()"); } // js通信接口
public class JavascriptInterface { private Context context; public JavascriptInterface(Context context) {
this.context = context;
} public void openImage(String img) {
System.out.println(img);
//
Intent intent = new Intent();
intent.putExtra("image", img);
intent.setClass(context, ShowWebImageActivity.class);
context.startActivity(intent);
System.out.println(img);
}
public void clickButton(){
Intent intent = new Intent(context,SecondActivity.class);
startActivity(intent);
}
} // 监听
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { return super.shouldOverrideUrlLoading(view, url);
} @Override
public void onPageFinished(WebView view, String url) { view.getSettings().setJavaScriptEnabled(true); super.onPageFinished(view, url);
// html载入完毕之后，加入监听图片的点击js函数
addImageClickListner(); } @Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
view.getSettings().setJavaScriptEnabled(true); super.onPageStarted(view, url, favicon);
} @Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { super.onReceivedError(view, errorCode, description, failingUrl); }
} }
三、效果分析
点击图片，响应android端注入的JS函数监听；可是在web端响应的还是原来的监听。
button也相同如此。
Android与JavaScrip进行交互（二）的更多相关文章
- Android系列之网络（二）----HTTP请求头与响应头
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- android json解析及简单例子+Android与服务器端数据交互+Android精彩案例【申明：来源于网络】
android json解析及简单例子+Android与服务器端数据交互+Android精彩案例[申明:来源于网络] android json解析及简单例子:http://www.open-open. ...
- 客户端相关知识学习（三）之Android原生与H5交互的实现
Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...
- Android系列之Fragment（二）----Fragment的生命周期和返回栈
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- Android之自定义生成彩色二维码
先导个zxing.jar包 下面是xml布局 activity_main.xml <RelativeLayout xmlns:android="http://schemas.andro ...
- Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...
- Android - 和其他APP交互 - 获得activity的返回值
启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...
- Android - 和其他APP交互 - 把用户带到其他app
Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...
- Android图表库MPAndroidChart(十二)——来点不一样的，正负堆叠条形图
Android图表库MPAndroidChart(十二)--来点不一样的,正负堆叠条形图 接上篇,今天要说的,和上篇的类似,只是方向是有相反的两面,我们先看下效果 实际上这样就导致了我们的代码是比较类 ...
随机推荐
- redis配置实例及redis.conf详细说明
一.配置实例 1.redis修改持久化路径.日志路径.清缓存 redis修改持久化路径和日志路径 vim redis.conf logfile /data/redis_cache/logs/redi ...
- 使用HttpURLConnection下载文件时出现 java.io.FileNotFoundException彻底解决办法
使用HttpURLConnection下载文件时经常会出现 java.io.FileNotFoundException文件找不到异常,下面介绍下解决办法 首先设置tomcat对get数据的编码:con ...
- codeforces 687D Dividing Kingdom II 带权并查集（dsu）
题意:给你m条边,每条边有一个权值,每次询问只保留编号l到r的边,让你把这个图分成两部分 一个方案的耗费是当前符合条件的边的最大权值(符合条件的边指两段点都在一个部分),问你如何分,可以让耗费最小 分 ...
- bjfu1211 推公式，筛素数
题目是求fun(n)的值 fun(n)= Gcd(3)+Gcd(4)+…+Gcd(i)+…+Gcd(n).Gcd(n)=gcd(C[n][1],C[n][2],……,C[n][n-1])C[n][k] ...
- gcc编译器与基本类型3
C语言发展史 1969年贝尔实验室 肯尼斯·蓝·汤普逊,丹尼斯·李奇开发了B语言 ->Unix,New B语言,改名C语言83年提出C语言标准 1989年十二月正式通过C语言标准,C89标准 C ...
- android：照片涂画功能实现过程及原理
这个功能可以帮你实现,在图片上进行随意的涂抹,可以用于SNS产品. 绘图本身很简单,但是要实现在图片上指定的部分精确(位置,缩放)的绘图,就有点麻烦了. 下面讲讲实现过程及原理: UI构图 这个UI, ...
- 数据库连接类oracleHelper
//=============================================================================== // OracleHelper ba ...
- Tkinter教程之Entry篇
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811302 #Tkinter教程之Entry篇#Entry用来输入单行文本'''1.第一个En ...
- MySQL CURDATE() 函数
定义和用法 CURDATE() 函数返回当前的日期. 语法 CURDATE() 实例 例子 1 下面是 SELECT 语句: SELECT NOW(),CURDATE(),CURTIME() 结果类似 ...
- Windows7 32位下opencv与python2.66的环境配置
刚接触Python和OpenCV,对两者都不太了解,因为今后学习会使用到这两种工具,特此学习配置.PS:本帖适用小白. 一. 需要的文件 1. OpenCV 可用OpenCV-2.3.1-win-su ...