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(十二)--来点不一样的,正负堆叠条形图 接上篇,今天要说的,和上篇的类似,只是方向是有相反的两面,我们先看下效果 实际上这样就导致了我们的代码是比较类 ...
随机推荐
- [转] error LNK2026: 模块对于 SAFESEH 映像是不安全的
原文 今天使用VS2012遇到一个问题:"链接器工具错误 LNK2026 XXX模块对于 SAFESEH 映像是不安全的" 解决方法: 1.打开该项目的“属性页”对话框. 2.单击 ...
- Conversion to Dalvik format failed: Unable to execute dex: null
[2013-11-19 14:18:48 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Check th ...
- 细雨学习笔记：Jmeter之post processors（后置处理器）
后置处理器
- linux常用命令之--磁盘管理命令
linux的磁盘管理命令 1.查看磁盘空间 df:用于显示磁盘空间的使用情况 其命令格式如下: df [-option] 常用参数: -i:使用inodes显示结果 -k:使用KBytes显示结果 - ...
- Geodesic-based robust blind watermarking method for three-dimensional mesh animation by using mesh segmentation and vertex trajectory
之前因为考试,中断了实验室的工作,现在结束考试了,不能再荒废了. 最近看了一篇关于序列水印的文章,大体思想是:对于一个网格序列,首先对第一帧进行处理,在第一帧上,用网格分割算法(SDF)将网格分割成几 ...
- 为cocos2d-x项目增加Lua支持
开始为游戏增加Lua脚本支持,今天主要配置了一下开发环境:cocos2d-x 2.2.1,xcode5. 1. 创建cocos2d-x-lua项目 类似于创建C++项目,用以下命令即可: python ...
- bzoj 3997 [TJOI2015]组合数学（DP）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3997 [题意] 给定一个nm的长方形,每次只能使经过格子权值减1,每次只能向右向下,问 ...
- java的动态代理机制
前几天看到java的动态代理机制,不知道是啥玩意,然后看了看.死活不知道 invoke(Object proxy, Method m, Object[] args)种的proxy是个什么东西,放在这里 ...
- URL的格式scheme
url scheme: scheme + (://) + userinfo + (@) + hostname + (:) + port + path + (?) + query + (#) + fra ...
- mount失败
又一次遇到mount失败,提示文件系统类型错误.选项错误.有坏超级块等.之前是在ubuntu 14.04 lts desktop上挂载windows下共享文件夹遇到的.这次具体的环境如下:CentOS ...