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(十二)--来点不一样的,正负堆叠条形图 接上篇,今天要说的,和上篇的类似,只是方向是有相反的两面,我们先看下效果 实际上这样就导致了我们的代码是比较类 ...
随机推荐
- Mybatis拦截器介绍
拦截器的一个作用就是我们可以拦截某些方法的调用,我们可以选择在这些被拦截的方法执行前后加上某些逻辑,也可以在执行这些被拦截的方法时执行自己的逻辑而不再执行被拦截的方法.Mybatis拦截器设计的一个初 ...
- Delphi RichEdit操作
1.选择设置对齐 RichEdit1.SelectAll;RichEdit1.Paragraph.Alignment:=taLeftJustify; // switch for other align ...
- bug报告-常用词汇中英对照表
- Tableau学习笔记之五
计算用户自定义字段,虽然在Tableau软件中已经加入了很多的数值操作运算,比如平均值,最大值等,但是可以自定义自己需要的数值操作运算. 数值操作可以有以下:预定义函数,百分比,总计,分级等等 1.直 ...
- Oracle11g导入*.dmp数据文件
imp命令导入数据:imp username/password@SID file=XXX.dmp fromuser=XXX touser=XXX tables=(XXX,XXX) [ignore=y ...
- 帮同事写了几行代码，在 安装/卸载 程序里 注册/卸载 OCX控件
写了个小控制台程序,这个程序用来注册 / 卸载OCX控件,用在Inno Setup做的安装卸载程序里. #include "stdafx.h" #include <windo ...
- wine的中文字体显示
从1.1.4开始wine的界面就已经支持中文了,但是对于软件中的中文支持并不太好,主要原因.还是字体...Let's go 首先,copy一下字体:把simsun.ttc (即宋体)复制到 ~/.wi ...
- usb mass storage device
Problem adding USB host device to KVM Windows guest machine. Status: CLOSED CURRENTRELEASE Aliases ...
- 【现代程序设计】【homework-05】
这次作业的运行效果图: 新建了20个客户端线程,服务器相应开了20个线程接收客户端数据,每一秒输出每一轮的结果 这次作业用c#完成 利用 Socket 类实现了局域网中的客户端和服务器之间的通信 主要 ...
- 现代程序设计 homework-05
本次作业要求设计服务器和客户端,由于之前对网络编程是一窍不通,上上节课听宗学长讲述Tcp的时候心里想这个东西还真是高大上啊一点儿都听不懂,但是上个周末看了看C#网络编程的博客和书之后,发现这个东西入门 ...