當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
WebView 和JS 之间交互
生活随笔
收集整理的這篇文章主要介紹了
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"> </div></div> </body> </html>
?
轉載于:https://my.oschina.net/u/555002/blog/78442
總結
以上是生活随笔為你收集整理的WebView 和JS 之间交互的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到芹菜是什么意思
- 下一篇： [JavaScript] DOM操作技术