WebView加jquery做页面会怎么样呢？
java代码:
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"> </div>
</div>
</body>
</html>
分享到：
学习学习
相关推荐
而JavaScript交互则是WebView功能的一部分，使得我们能够实现Android应用与网页之间的通信，从而增强用户体验。本篇文章将深入探讨如何实现“android webview js交互，响应webview中的图片点击事件”，特别是点击...
首先，理解WebView与JavaScript交互的基本原理是至关重要的。在Android中，WebView提供了`addJavascriptInterface()`方法，用于在Java对象和JavaScript之间建立桥梁。通过这个方法，我们可以创建一个Java对象，并将...
自己封装好的一个WebView类，可以直接使用，里面介绍了webview中获取指定ID的值，可以是输入框等等控件，以及获取当前HTTP的HTML源码。对一些嵌入网页操作有很大帮助
一、Android Webview与JavaScript交互基础 1. 设置Webview支持JavaScript：在初始化Webview时，通过调用`setJavaScriptEnabled(true)`方法启用JavaScript功能。 2. JavaScript接口注入：通过`...
本篇主要探讨`android webview js交互`这一主题，深入理解如何在Android的WebView中加载网页并实现JavaScript与Android原生代码的通信。 首先，我们需要在布局XML文件中添加WebView组件。例如： ```xml <WebView ...
本文将深入探讨如何利用`WebView`来加载本地`assets`目录中的HTML文件，并实现与JavaScript（JS）的交互，以及调用Android底层控件的功能。 首先，我们需要了解`WebView`的基本使用。`WebView`是Android SDK中的一...
以下将详细阐述iOS Webview与JavaScript交互的核心概念、实现方式以及相关知识点。 1. **基本概念：** - **UIWebView**：苹果提供的原生组件，可以加载HTML、CSS和JavaScript内容，构建一个在iOS应用内部运行的Web...
X5Webview基于WebKit，并且集成了QQ浏览器的一些高级特性，如硬件加速、视频播放、JavaScript交互等。在许多App中，我们常常需要在原生Android代码和网页内容之间进行交互，这时候就需要利用到X5Webview与JS的交互...
当Android的WebView与JavaScript交互时，开发者可以实现更丰富的功能，如调用Android原生方法、获取网页数据等。下面我们将深入探讨这个“android webview与js交互简单demo”所涉及的知识点。 1. Android WebView...
本文将深入探讨Android WebView与JavaScript交互调用的相关知识点，包括如何加载网页、启用JavaScript、执行JavaScript代码以及获取网页源码等。 1. **WebView的基本使用** - 创建WebView：首先，我们需要在布局...
这是一个Android webView 跟 js 交互的Demo 主要功能是：1.在webView中向网页注入js 获取到相应的图片 用于在下一个Activity中显示 2.显示中加了图片处理的自定义ImageView 可以手动缩放图片。3.打包了完整的Demo供...
2. **性能优化**：避免频繁的Java-JavaScript交互，因为这可能会导致性能下降。合理安排调用时机，比如在页面加载完成后一次性处理所有交互。 3. **异步调用**：如果JavaScript调用Android方法需要较长的时间，可以...
本示例“WinForm下WebView2实现JS与C#交互Demo”就展示了如何在C#中使用WebView2控件来实现JavaScript与C#之间的双向通信。 首先，确保已安装Microsoft Edge WebView2 SDK。可以通过NuGet包管理器安装`Microsoft....
总的来说，这个“webview与js交互demo”主要展示了如何在WebView中嵌入网页，并通过JavaScript调用Android的原生功能。通过这种方式，开发者可以构建更加丰富和动态的混合式应用程序，结合Web技术的灵活性和Android...
总的来说，“ios-webView与js的交互.zip”这份资料涵盖了WebView与JavaScript交互的基础知识，包括UIWebView和WKWebView的使用，以及如何通过用户内容控制器进行消息传递。通过学习这些内容，开发者可以更好地在iOS...
与JavaScript交互时，必须确保安全，避免恶意代码的注入。对于接收的数据，应进行验证和清理，避免XSS（跨站脚本攻击）。 7. **性能优化** 使用WKWebView代替UIWebView可以获得更好的性能和内存管理。另外，合理...
WebView使用之Js交互，点击webview中的图片，调用java代码，放大展示图片，并提供缩放功能！参考博客地址：http://blog.csdn.net/growing_tree/article/details/44652005
本篇将深入探讨如何实现iOS原生与WebView之间的JS交互，以及如何通过Swift语言高效地完成这一过程。 一、WebView基础 WebView是iOS应用中用来显示网页内容的组件，常见的有WKWebView和UIWebView两种。其中，...
在Android应用开发中，WebView是一个强大的组件，它允许开发者在应用程序内部嵌入网页内容，同时提供了与JavaScript交互的能力。这使得我们能够利用HTML、CSS和JavaScript的灵活性来构建部分或全部用户界面，同时还...
接下来，我们讨论如何实现WebView与JavaScript的交互。Android提供了两种主要的方法：`addJavascriptInterface()`和`evaluateJavascript()`。 1. **addJavascriptInterface()**: 这个方法可以将Android对象暴露给...