Android与js交互实例

标签： android js 实例 | 发表时间：2013-03-29 23:43 | 作者：sunboy_2050
出处：http://blog.csdn.net

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true


Android（Java）与JavaScript（HTML）交互有四种情况：

1） Android（Java）调用HTML中js代码

2） Android（Java）调用HTML中js代码（带参数）

3） HTML中js调用Android（Java）代码

4） HTML中js调用Android（Java）代码（带参数）


下面示例总结这四种情况，直接上干货：


1） Android（Java）

	private void showWebView(){		// webView与js交互代码
		try {
			mWebView = new WebView(this);
			setContentView(mWebView);
			
			mWebView.requestFocus();
			
			mWebView.setWebChromeClient(new WebChromeClient(){
				@Override
				public void onProgressChanged(WebView view, int progress){
					JSAndroidActivity.this.setTitle("Loading...");
					JSAndroidActivity.this.setProgress(progress);
					
					if(progress >= 80) {
						JSAndroidActivity.this.setTitle("JsAndroid Test");
					}
				}
			});
			
			mWebView.setOnKeyListener(new View.OnKeyListener() {		// webview can go back
				@Override
				public boolean onKey(View v, int keyCode, KeyEvent event) {
					if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
						mWebView.goBack();
						return true;
					}
					return false;
				}
			});
			
			WebSettings webSettings = mWebView.getSettings();
			webSettings.setJavaScriptEnabled(true);
			webSettings.setDefaultTextEncodingName("utf-8");

			mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");
			mWebView.loadUrl("http://192.168.1.121:8080/jsandroid/index.html");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	
	private Object getHtmlObject(){
		Object insertObj = new Object(){
			public String HtmlcallJava(){
				return "Html call Java";
			}
			
			public String HtmlcallJava2(final String param){
				return "Html call Java : " + param;
			}
			
			public void JavacallHtml(){
				runOnUiThread(new Runnable() {
					@Override
					public void run() {
						mWebView.loadUrl("javascript: showFromHtml()");
						Toast.makeText(JSAndroidActivity.this, "clickBtn", Toast.LENGTH_SHORT).show();
					}
				});
			}
			
			public void JavacallHtml2(){
				runOnUiThread(new Runnable() {
					@Override
					public void run() {
						mWebView.loadUrl("javascript: showFromHtml2('IT-homer blog')");
						Toast.makeText(JSAndroidActivity.this, "clickBtn2", Toast.LENGTH_SHORT).show();
					}
				});
			}
		};
		
		return insertObj;
	}


2） js（HTML）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0032)http://localhost:8080/jsandroid/ -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store,no-cache"> 
<meta name="Handheldfriendly" content="true">
<meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes">
<meta name="robots" content="all">
<meta name="keywords" contect="doodle, mobile, doodlemobile, game, games">
<meta name="description" content="Make People's Mobile Life More Connected Through Games.">

<title>jsandroid_test</title>

<script type="text/javascript" language="javascript"> 
	
	function showHtmlcallJava(){
		var str = window.jsObj.HtmlcallJava();
		alert(str);
	}
	
	function showHtmlcallJava2(){
		var str = window.jsObj.HtmlcallJava2("IT-homer blog");
		alert(str);
	}
	
	function showFromHtml(){
		document.getElementById("id_input").value = "Java call Html";
	}
	
	function showFromHtml2( param ){
		document.getElementById("id_input2").value = "Java call Html : " + param; 
	}
</script>
</head>


<body>

hello IT-homer

<br>
<br>
<br>

<input type="button" value="HtmlcallJava" onclick="showHtmlcallJava()" />
<br>
<input type="button" value="HtmlcallJava2" onclick="showHtmlcallJava2()" />

<br>
<br>
<br>
<br>

<input id="id_input" style="width: 90%" type="text" value="null" />
<br>
<input type="button" value="JavacallHtml" onclick="window.jsObj.JavacallHtml()" />

<br>
<br>
<br>

<input id="id_input2" style="width: 90%" type="text" value="null" />
<br>
<input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />

</body>
</html>


3） 运行结果：




4） 代码解析：

（1） 允许Android执行js脚本设置

Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");     // jsObj 为桥连对象

Android容许执行js脚本需要设置： webSettings.setJavaScriptEnabled(true);



（2） js（HTML）访问Android（Java）代码

js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如： window.jsObj.HtmlcallJava()



（3） Android（Java）访问js（HTML）代码

Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript: showFromHtml()");



说明：

1） Android访问url网址，需在AndroidManifest.xml文件，配置容许访问网络的权限：
<uses-permission android:name="android.permission.INTERNET" />


2） Android（Java）调用js（HTML）时，使用的mWebView.loadUrl("javascript: showFromHtml()");函数需在UI线程运行，因为mWebView为UI控件

			public void JavacallHtml(){
				runOnUiThread(new Runnable() {
					@Override
					public void run() {
						mWebView.loadUrl("javascript: showFromHtml()");
						Toast.makeText(JSAndroidActivity.this, "clickBtn", Toast.LENGTH_SHORT).show();
					}
				});
			}



参考推荐：

Android中webview和js之间的交互

Android中 Js 扩展及交互


作者：sunboy_2050 发表于2013-3-29 23:43:49 原文链接
阅读：81 评论：0 查看评论

相关 [android js 实例] 推荐：

Android与js交互实例

- - CSDN博客移动开发推荐文章
Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true. Android（Java）与JavaScript（HTML）交互有四种情况：. 1） Android（Java）调用HTML中js代码. 2） Android（Java）调用HTML中js代码（带参数）.

在Android上实现Java和Js交互

- - ITeye博客
  其实webview加载资源的速度并不慢，但是如果资源多了，当然就很慢. 图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ，一般都是 30ms 就 ok 了. 不过webview是必须等到全部资源都完成加载，才会进行渲染的，所以加载的速度很重要. 从Google上我们了解到，webview 加载页面的顺序是：先加载 html ，然后从里面解析出 css 、 js 文件和页面上的图片资源进行加载.

WebView之js调用Android类的方法传递数据 - 依凡王子

- - 博客园_首页
　　在android中写一个Activity，里面写一个webview，这个webview加载本地的一个html文件，显示这个网页，这个网页包括一个用户名和密码的输入框和两个按钮（只有登陆按钮有用），输入用户名密码之后调用android中的类，并把输入的数据传过去，再在android中输出出来（具体你那数据做什么操作就看你的需求了），这样就做大额js与android数据交互的效果了：.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中，. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

android之XmlResourceParser类使用实例

- - ITeye博客
   android开发过程会经常使用XML文件，下面提供小实例，看看XmlResourceParser类是怎么样解析XML文件的. XML文件名称为test.xml.  布局文件main.xml内容如下：.  如下则是具体解析XML文件的类TestXmlResourceParserActivity.java：.

Android数据库升级实例

- - BlogJava-qileilove
　　Andoird的SQLiteOpenHelper类中有一个onUpgrade方法. 经过实践，解决了我一连串的疑问：. 帮助文档里说的“数据库升级”是指什么. 　　你开发了一个程序，当前是1.0版本. 到1.1版本时，你在数据库的某个表中增加了一个字段. 那么软件1.0版本用的数据库在软件1.1版本就要被升级了.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了，但講了大概又會被戰. 相較於英文維基百科，中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的，而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識，而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識，所以有自覺的百科編輯者反而是少數；中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一：传this参数调用方法：.  方式二：js方法中通过选择器获取节点：. //此处删除的是a节点 }. 方式三：通过jQuery方式获取节点：（尚未测试，有待测试. 此处a标签传this到js中，js通过this（即a节点）取parent（即p节点）. （1）p.remove();可直接删除整个p节点.

[Android实例] 利用Jsoup解析Html实现的Android招聘信息大全

- - CSDN博客推荐文章
看到很多招聘网站都没有推出招聘信息客户端，想来利用现成的资源，解析他们网站上提供招聘信息，这里就利用了Jsoup来解析HTML中的数据，实现整理归纳，然后显示的一个程序，也算是一个学习的程序吧，这里，我们先看一下图片，以下就程序源码. 源码下载： 点击打开链接. 作者：kangkangz4 发表于2011-12-13 11:09:34 原文链接.