WebView JS 交互

标签: webview js 交互 | 发表时间:2013-10-15 19:01 | 作者:
分享到:
出处:http://www.iteye.com

WebView加jquery做页面会怎么样呢?

public class MainActivity extends Activity {
	private static final String TAG = "MainActivity";

	// 定义访问的链接
	private static String URL = "file:///android_asset/index.html";

	// 定义WebView
	WebView mWebView = null;

	// 定义数据列表
	private List<Program> programList = null;
	private static final int PROGRAM_NUM = 25;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		// 在标题栏上显示进度
		getWindow().requestFeature(Window.FEATURE_PROGRESS);

		// 创建WebView对象
		mWebView = new WebView(this);
		setContentView(mWebView);

		final Activity activity = this;
		// 在标题栏显示进度
		mWebView.setWebChromeClient(new WebChromeClient() {
			public void onProgressChanged(WebView view, int progress) {
				activity.setProgress(progress * 100);
			}
		});

		programList = initProgramList();

		// 设置JS可用
		mWebView.getSettings().setJavaScriptEnabled(true);
		// 把programList添加到js的全局对象window中,
		// 这样就可以使用window.programList来获取数据
		mWebView.addJavascriptInterface(programList, "programList");
		mWebView.addJavascriptInterface(this, "MainActivity");

		// 加载页面
		mWebView.loadUrl(URL);
	}

	/*
	 * 定义js回调java函数
	 */
	public void showSelect(int id) {
		Log.i(TAG, "select:" + id);
	}

	// 绑定键盘的向上,向下按钮事件触发相应的js事件
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_DPAD_UP) {
			mWebView.loadUrl("javascript:moveUp()");
			return true;
		}
		if (keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
			mWebView.loadUrl("javascript:moveDown()");
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}

	// 初始化数据
	private List initProgramList() {
		List<Program> list = new ArrayList<Program>();
		for (int i = 1; i <= PROGRAM_NUM; i++) {
			Program p = new Program(i, "Program:::" + i);
			list.add(p);
		}
		return list;
	}

	/*
	 * 定义简单的数据类
	 */
	class Program {
		private int id;
		private String name;

		public Program(int id, String name) {
			this.id = id;
			this.name = name;
		}

		public int getId() {
			return id;
		}

		public void setId(int id) {
			this.id = id;
		}

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}

	}

 

对应的html文件:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script>
	var startTop = 120;
	var startPos = 1;
	var totalNum = 0;
	var itemHeight = 40;
	$(document).ready(function(){
		var con = '';
		if(window.programList){
			//初始化页面
			totalNum = window.programList.size();
			for(i=0;i< totalNum;i++){
				con+='<div class="item" tar="'+programList.get(i).getId()+'">'+programList.get(i).getName()+'</div>';
			}
		}
		
		$('#list').html(con);
		//绑定事件
		$('.item').click(function(){
			var tar = $(this).attr('tar');
			//回调java事件
			window.MainActivity.showSelect(tar);
		});
	});
	
	//接收键盘向下事件
	function moveDown(){
		if(startPos < totalNum){
			startPos ++;
			var top = (1 - startPos)* itemHeight + startTop;
			$('#list').stop().animate({top:top});
		}
	}
	//接收键盘向上事件
	function moveUp(){
		if(startPos > 1){
			startPos --;
			var top = (1 - startPos )* itemHeight + startTop;
			$('#list').stop().animate({top:top});
		}
	}
</script>
<style>
	.box{
		position:relative;
		left:20px;
		top:20px;
		width:200px;
		height:280px;
		background-color:#CCC;
		overflow:hidden;
	}
	
	.list{
		position:absolute;
		left:10px;
		top:120px;
		width:180px;
	}
	
	.item{
		height:40px;
		line-height:40px;
	}
	
	.select{
		position:absolute;
		left:4px;
		top:120px;
		border:1px solid #F00;
		height:40px;
		width:190px;
	}
</style>
</head>
<body >
	
	<div class="box">
    	<div class="list" id="list">
        	
        </div>
        <div class="select">&nbsp;</div>
    </div>
</body>
</html>

 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [webview js 交互] 推荐:

WebView JS 交互

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

Android中WebView页面交互

- - SegmentFault 最新的文章
在android内打开一个网页的时候,有时我们会要求与网页有一些交互. 而这些交互是在基于javaScript的基础上. 那么我们来学习一下android如何与网页进行JS交互. protected View refresh;// 刷新按钮. protected String url = "";// 网址url.

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

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

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 使用html5作布局文件: webview跟javascript交互

- - 移动开发 - ITeye博客
android 使用html5作布局文件 http://www.cnblogs.com/andgoo/archive/2011/10/11/2207936.html. Android中webview跟JAVASCRIPT中的交互 http://www.oschina.net/question/4873_27156.

Hybrid(混合式) Appz之WebView中如何让JS与Java安全地互相调用

- - CSDN博客推荐文章
在现在安卓应用原生开发中,为了追求开发的效率以及移植的便利性,使用WebView作为业务内容展示与交互的主要载体是个不错的折中方案. 那么在这种Hybrid(混合式) App中,难免就会遇到页面JS需要与Java相互调用,调用Java方法去做那部分网页JS不能完成的功能. 网上的方法可以告诉我们这个时候我们可以使用addjavascriptInterface来注入原生接口到JS中,但是在安卓4.2以下的系统中,这种方案却我们的应用带来了很大的安全风险.

在Android上实现Java和Js交互

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

Android WebView 用法

- - 移动开发 - ITeye博客
Android和iOS系统都提供了标准的浏览器控件,在Android中是WebView,iOS中为UIWebView. 在iOS中你实例化一 个UIWebView即可调用loadRequest来加载一个网页,但是在Android中你不仅需要创建一个WebView,还需要做一些其他的事 情,建议初次使用WebView的读者按照以下步骤使用:.

WebView使用总结

- - ITeye博客
        以下是使用WebView过程中的部分场景和解决方案. 如果WebView是放在TabHost中的Activity, 而且WebView中包含html的select,会在点击其中的Item时候崩溃,异常信息如下: android.view.WindowManager$BadTokenException: Unable to add window.

Android WebView的坑总结

- - CSDN博客推荐文章
       最近把做好的iPad HybridApp向Android迁移,碰到的坑太多了,让我这个折腾过Android接近4年的老鸟都头疼. 现在把前人遇到的都列出来,再慢慢解决自己的,目前已经解决了android键盘覆盖问题,下面最棘手的问题就是屏幕高度的适配问题了. 1、 Andrid4.1事件穿透BUG 原因不明.