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(十二)--来点不一样的,正负堆叠条形图 接上篇,今天要说的,和上篇的类似,只是方向是有相反的两面,我们先看下效果 实际上这样就导致了我们的代码是比较类 ...
随机推荐
- C#中嵌入互操作类型的含义
首先说一下它的含义: 1. ”嵌入互操作类型”中的嵌入就是引进.导入的意思,类似于c#中using,c中include的作用,目的是告诉编译器是否要把互操作类型引入. 2. “互操作类型”实际是指一系 ...
- 翻译【ElasticSearch Server】第一章：开始使用ElasticSearch集群(5)
数据操作与REST API(Data manipulation with REST API) ElasticSearch REST API可用于各种任务.多亏了它,我们可以管理索引,更改实例参数,检查 ...
- 在Lua里写unity游戏笔记
gameobject.GetComponent<Transform>(); 翻译成Lua: gameObject:GetComponent (luanet.ctype (Transform ...
- flashback table恢复数据
flashback table恢复数据 flashback table主要是是用undo 表空间的内容,进行对数据修改的回退操作 语法如下: 根据scn号来进行回退 SQL> flashback ...
- Codeforces Round #364
http://codeforces.com/contest/701 A - Cards 水 // #pragma comment(linker, "/STACK:102c000000,102 ...
- JavaEE5 Tutorial_Servlet
Web资源:web组件,静态web文件如图片 Web程序:可发布的Web资源集合 Web程序根目录下有个web-inf文件夹,如果只有jsp和静态资源,里面可以没有web.xml 根目录下可以直接 ...
- openstack【Kilo】汇总：包括20英文文档、各个组件新增功能及Kilo版部署
OpenStack Kilo版本发布 20英文文档OpenStack Kilo版本文档汇总:各个操作系统安装部署.配置文档.用户指南等文档 Kilo版部署 openstack[Kilo]入门 [准备篇 ...
- 十个提升你Emacs生产力的高招
转载 十个提升你Emacs生产力的高招 Emacs是世界上最好的编辑器(真的有很多人这么认为).不要以为emacs只是在编写程序时很牛X,其实只要你真正精通了emacs,会发现她几乎在所有用到打字 ...
- free 和 fclose
想到一个场景,具体代码如下 #include <stdio.h> #include <stdlib.h> int main(int argc, const char *argv ...
- source insight 支持CC 文件
今天开始阅读LevelDB的代码,用source insight建立工程,但其不支持cc后缀的C++文件. 找到这篇<source insight看cc文件> 解决的根本办法:Option ...