當前位置：首頁 > 运维知识 > Android >内容正文

Android

Android WebView 和 javaScript的互相调用(一)

發布時間：2025/4/16 Android 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android WebView 和 javaScript的互相调用(一) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

原文出處：http://blog.csdn.net/wangtingshuai/article/details/8631835

WebView相關閱讀

Android WebView 和 javaScript的互相調用(一)
Android WebView 和 javaScript的互相調用(二)
Android WebView 和 javaScript的互相調用(三)
Android WebView與js交互通信
Android 4.4 中 WebView 使用注意事項
Android WebView開發問題匯總
Android WebView 性能優化

目前越來越多的Android App 都采用了混合編程的架構，也就是Android 原生控件+html5，當然html 頁面也必須運行在webview 控件中，我們可以簡單吧webview 看成內置到app 中的小型瀏覽器，這里面最核心的問題就是html 中的js 代碼如何調用java 代碼，比如js 調用java 代碼，然后打開一個新的Activity 界面。比如淘寶已經大量采用了h5 來實現其客戶端功能，商品列表是Android 端控件，點擊商品列表進入某個商品詳情可能就是h5 界面，這里就存在java 給js 傳遞數據的問題，點擊h5 的商品詳情界面的立即購買，可能就又從h5 跳轉到了Activity 界面，這里又牽扯到js 給java 傳遞數值的問題

內容摘要

android 中的java代碼調用webview里面的js腳本
webview中的js腳本調用本地的java代碼
java調用js并傳遞參數
js調用java并傳遞參數

1、Android中調用WebView中的js腳本非常方便，只需要調用WebView的loadUrl()方法即可

// 啟用javascript contentWebView.getSettings().setJavaScriptEnabled(true); // 從assets目錄下面的加載html contentWebView.loadUrl("file:///android_asset/wst.html"); // 無參數調用 contentWebView.loadUrl("javascript:alert('hello')");

2、WebView中js調用本地java方法，這個功能實現起來稍微有點麻煩，不過也不怎么復雜，首先要對WebView綁定javascriptInterface，js腳本通過這個接口來調用java代碼

//參數1：橋梁類,參數2：別名,在js中使用到 webView.addJavascriptInterface(new WebAppInterface(this),"Android");

橋梁類WebAppInterface

public class WebAppInterface {Context mContext;WebAppInterface(Context c) {mContext = c;}@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();} }

橋梁類WebAppInterface實際就是一個普通的java類，里面是我們本地實現的java代碼，將object 傳遞給WebView，并指定別名，這樣js腳本就可以通過我們給的這個別名來調用我們的方法

Html中調用java代碼

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /> <script type="text/javascript">function showAndroidToast(toast) {Android.showToast(toast); } </script>

注意：

橋梁類中的方法必須添加注解@JavascriptInterface，否則在API 16 以上會拋異常
上面的代碼存在遠程代碼執行安全漏洞，可以使用Safe Java-JS WebView Bridge解決該問題
Android WebView的Js對象注入漏洞解決方案

3、java代碼調用js并傳遞參數

只需要在待用js函數的時候加入參數即可，下面是傳遞一個參數的情況，需要多個參數的時候自己拼接及行了，注意str類型在傳遞的時候參數要用單引號括起來

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

4、js調用java函數并傳參，java函數正常書寫，在js腳本中調用的時候稍加注意，然后在html頁面中，利用如下代碼，即可實現調用

實現案例

這里是實例的html代碼，從assert中加載，原來做項目的時候，從assert中加載的中文網頁會出現亂碼，解決辦法就是給html指定編碼。如下

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> function javacalljs(){ document.getElementById("content").innerHTML += "<br\>java調用了js函數"; } function javacalljswithargs(arg){ document.getElementById("content").innerHTML += ("<br\>"+arg); } </script> </head> <body> this is my html <br/> <a onClick="window.wst.startFunction()">點擊調用java代碼</a><br/> <a onClick="window.wst.startFunction('hello world')" >點擊調用java代碼并傳遞參數</a> <br/> <div id="content">內容顯示</div> </body> </html> public class MainActivity extends Activity { private WebView contentWebView = null; private TextView msgView = null; @SuppressLint("SetJavaScriptEnabled") @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); contentWebView = (WebView) findViewById(R.id.webview); msgView = (TextView) findViewById(R.id.msg); // 啟用javascript contentWebView.getSettings().setJavaScriptEnabled(true); // 從assets目錄下面的加載html contentWebView.loadUrl("file:///android_asset/wst.html"); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(btnClickListener); contentWebView.addJavascriptInterface(this, "wst"); } OnClickListener btnClickListener = new Button.OnClickListener() { public void onClick(View v) { // 無參數調用 contentWebView.loadUrl("javascript:javacalljs()"); // 傳遞參數調用 contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")"); } }; public void startFunction() { Toast.makeText(this, "js調用了java函數", Toast.LENGTH_SHORT).show(); runOnUiThread(new Runnable() { @Override public void run() { msgView.setText(msgView.getText() + "\njs調用了java函數"); } }); } public void startFunction(final String str) { Toast.makeText(this, str, Toast.LENGTH_SHORT).show(); runOnUiThread(new Runnable() { @Override public void run() { msgView.setText(msgView.getText() + "\njs調用了java函數傳遞參數：" + str); } }); } }

布局文件

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="9" /> <ScrollView android:id="@+id/scrollView1" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/msg" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="text" /> </ScrollView> <Button android:id="@+id/button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="java調用js函數" /> </LinearLayout>

總結

以上是生活随笔為你收集整理的Android WebView 和 javaScript的互相调用(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android多媒体开发：录音机
下一篇： Android WebView 和 ja