首页 > 代码库 > Android与JavaScrip进行交互（二）

Android与JavaScrip进行交互（二）

2024-07-26 21:25:46   221人阅读

一、思路分析

经过测试发现，JS中的点击事件只能写一个，如果写了多个，也只会响应第一个，如果写的方法是android端的方法，在web端运行时，后台会报未定义这个方法的错误，前台点击无响应。

所以，如果想要web中某个按钮在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://www.mamicode.com/"http://veikr.com/feed" /> >

界面显示如下

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的按钮，重新添加点击事件
		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端响应的还是原来的监听。按钮也同样如此。



Android与JavaScrip进行交互（二）


联系
我们