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="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>


界面显演示样例如以下


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也相同如此。




【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/blfshiye/p/5265591.html