當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

WebView 和JS 之间交互

發(fā)布時(shí)間：2023/11/29 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 WebView 和JS 之间交互小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

1.android中利用webview調(diào)用網(wǎng)頁(yè)上的js代碼。

Android?中可以通過(guò)webview來(lái)實(shí)現(xiàn)和js的交互，在程序中調(diào)用js代碼，只需要將webview控件的支持js的屬性設(shè)置為true，，然后通過(guò)loadUrl就可以直接進(jìn)行調(diào)用，如下所示：

mWebView.getSettings().setJavaScriptEnabled(true); mWebView.loadUrl("javascript:test()");// 調(diào)用js函數(shù) mWebView.loadUrl("file:///android_asset/index.html");// 調(diào)用本地assets目錄下的html文件，也可以直接調(diào)用網(wǎng)上的html文件。

2.?網(wǎng)頁(yè)上調(diào)用android中java代碼的方法

在網(wǎng)頁(yè)中調(diào)用java代碼，需要在webview控件中添加javascriptInterface。如下所示：

mWebView.addJavascriptInterface(new Object() { public void clickOnAndroid() { mHandler.post(new Runnable() { public void run() { Toast.makeText(Test.this, "測(cè)試調(diào)用java", Toast.LENGTH_LONG).show();} }); } }, "demo"); //demo是對(duì)象名

在網(wǎng)頁(yè)中，只需要像調(diào)用js方法一樣，進(jìn)行調(diào)用就可以

網(wǎng)頁(yè)加載立即調(diào)用

3.?Java代碼調(diào)用js并傳參

首先需要帶參數(shù)的js函數(shù)，如function test(str)，然后只需在調(diào)用js時(shí)傳入?yún)?shù)即可，如下所示：

mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函數(shù)test()的參數(shù)

4.Js中調(diào)用java函數(shù)并傳參

首先一樣需要帶參數(shù)的函數(shù)形式，但需注意此處的參數(shù)需要final類(lèi)型，即得到以后不可修改，如果需要修改其中的值，可以先設(shè)置中間變量，然后進(jìn)行修改。如下所示：

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, "測(cè)試調(diào)用java" + String.valueOf(j), Toast.LENGTH_LONG).show();}});} }, "demo");

然后在html頁(yè)面中，利用如下代碼<div id='b'><a οnclick="window.demo.clickOnAndroid(2)">b.c</a></div>，即可實(shí)現(xiàn)調(diào)用

ps:WebView加jquery

public class MainActivity extends Activity {private static final String TAG = "MainActivity";// 定義訪問(wèn)的鏈接private static String URL = "file:///android_asset/index.html";// 定義WebViewWebView mWebView = null;// 定義數(shù)據(jù)列表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);// 在標(biāo)題欄上顯示進(jìn)度getWindow().requestFeature(Window.FEATURE_PROGRESS);// 創(chuàng)建WebView對(duì)象mWebView = new WebView(this);setContentView(mWebView);final Activity activity = this;// 在標(biāo)題欄顯示進(jìn)度mWebView.setWebChromeClient(new WebChromeClient() {public void onProgressChanged(WebView view, int progress) {activity.setProgress(progress * 100);}});programList = initProgramList();// 設(shè)置JS可用mWebView.getSettings().setJavaScriptEnabled(true);// 把programList添加到j(luò)s的全局對(duì)象window中，// 這樣就可以使用window.programList來(lái)獲取數(shù)據(jù)mWebView.addJavascriptInterface(programList, "programList");mWebView.addJavascriptInterface(this, "MainActivity");// 加載頁(yè)面mWebView.loadUrl(URL);}/** 定義js回調(diào)java函數(shù)*/public void showSelect(int id) {Log.i(TAG, "select:" + id);}// 綁定鍵盤(pán)的向上,向下按鈕事件觸發(fā)相應(yīng)的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);}// 初始化數(shù)據(jù)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;}/** 定義簡(jiǎn)單的數(shù)據(jù)類(lèi)*/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;}}

對(duì)應(yīng)的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){//初始化頁(yè)面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');//回調(diào)java事件window.MainActivity.showSelect(tar);});});//接收鍵盤(pán)向下事件function moveDown(){if(startPos < totalNum){startPos ++;var top = (1 - startPos)* itemHeight + startTop;$('#list').stop().animate({top:top});}}//接收鍵盤(pán)向上事件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>

轉(zhuǎn)載于:https://my.oschina.net/u/555002/blog/78442

總結(jié)

以上是生活随笔為你收集整理的WebView 和JS 之间交互的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

js
webView

上一篇：梦到芹菜是什么意思
下一篇： [JavaScript] DOM操作技术