WebView 和JS 之间交互

2019独角兽企业重金招聘Python工程师标准>>>

1.android中利用webview调用网页上的js代码。

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true，，然后通过loadUrl就可以直接进行调用，如下所示：

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");// 调用js函数
mWebView.loadUrl("file:///android_asset/index.html");// 调用本地assets目录下的html文件，也可以直接调用网上的html文件。

2. 网页上调用android中java代码的方法

在网页中调用java代码，需要在webview控件中添加javascriptInterface。如下所示：

mWebView.addJavascriptInterface(new Object() { public void clickOnAndroid() { mHandler.post(new Runnable() { public void run() { Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();} }); } }, "demo"); //demo是对象名

在网页中，只需要像调用js方法一样，进行调用就可以

<div id='b'><a onclick="javascript:window.demo.clickOnAndroid()">b.c</a></div>

网页加载立即调用

<body onload="javascript:window.demo.clickOnAndroid()">

3. Java代码调用js并传参

首先需要带参数的js函数，如function test(str)，然后只需在调用js时传入参数即可，如下所示：

mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函数test()的参数

4.Js中调用java函数并传参

首先一样需要带参数的函数形式，但需注意此处的参数需要final类型，即得到以后不可修改，如果需要修改其中的值，可以先设置中间变量，然后进行修改。如下所示：

mWebView.addJavascriptInterface(new Object() { public void clickOnAndroid(final int i) { mHandler.post(new Runnable() { public void run() { int j = i;j++;
Toast.makeText(Test.this, "测试调用java" + String.valueOf(j), Toast.LENGTH_LONG).show();}});} }, "demo");

然后在html页面中，利用如下代码<div id='b'><a οnclick="window.demo.clickOnAndroid(2)">b.c</a></div>，即可实现调用

ps:WebView加jquery

public class MainActivity extends Activity {private static final String TAG = "MainActivity";// 定义访问的链接private static String URL = "file:///android_asset/index.html";// 定义WebViewWebView mWebView = null;// 定义数据列表private List<Program> programList = null;private static final int PROGRAM_NUM = 25;/** Called when the activity is first created. */@Overridepublic 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事件@Overridepublic 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>

转载于:https://my.oschina.net/u/555002/blog/78442

WebView 和JS 之间交互相关推荐

android 和 js 之间交互的封装
HybridBridge 项目地址:YouJZ/HybridBridge 简介:android 和 js 之间交互的封装更多:作者提 Bug 标签: webview-js-android ...
酷播云H5播放器与JS之间交互的实例
酷播云H5播放器与JS之间交互的实例 <!doctype html> <html> <head> <meta charset="utf-8" ...
linux和安卓交互,Android中webview和js之间的交互及注意事项
1.Android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...
js android打电话,Android开发webview与js的交互总结【安卓巴士博文大赛】
一些应用为了节省开发时间,会开用Android.iOS内嵌HTML方式进行开发,在涉及到打电话.发短信这些Android原生功能时,需要涉及到webView中js与ANdroid的交互.这里结合我做过 ...
Android中WebView与JS的交互
转载请注明:http://blog.csdn.net/feather_wch/article/details/79364349 介绍Android中通过WebView与web页面交互的知识点. 分为三 ...
微信小程序web-view与H5之间交互（含支付）
第一章了解web-view与H5的交互(含支付) 文章目录第一章了解web-view与H5的交互(含支付) 前言一.web-view是什么? 二.使用步骤三.业务场景 1.小程序带参数跳转链 ...
微信小程序组件、web-view、h5之间交互
目录结构 /component/index-page/index.js/index.wcss/index.wxml/index.json /pages/index/index.wcss/index.w ...
android webview调js方法,Android中WebView与H5的交互，Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
iOS开发日记27-WebView与JS的交互
今天博主有一个WebView与JS的交互的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. WebView与JS的交互分为两种种方式:1.在OC中调用JS 2.在JS中调用OC 网页试用[N ...

WebView 和JS 之间交互

WebView 和JS 之间交互相关推荐

最新文章

热门文章