當(dāng)前位置：首頁 > 运维知识 > Android >内容正文

Android

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

發(fā)布時(shí)間：2025/4/16 Android 21 豆豆

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

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

WebView相關(guān)閱讀

Android WebView 和 javaScript的互相調(diào)用(一)
Android WebView 和 javaScript的互相調(diào)用(二)
Android WebView 和 javaScript的互相調(diào)用(三)
Android WebView與js交互通信
Android 4.4 中 WebView 使用注意事項(xiàng)
Android WebView開發(fā)問題匯總
Android WebView 性能優(yōu)化

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

內(nèi)容摘要

android 中的java代碼調(diào)用webview里面的js腳本
webview中的js腳本調(diào)用本地的java代碼
java調(diào)用js并傳遞參數(shù)
js調(diào)用java并傳遞參數(shù)

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

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

2、WebView中js調(diào)用本地java方法，這個(gè)功能實(shí)現(xiàn)起來稍微有點(diǎn)麻煩，不過也不怎么復(fù)雜，首先要對WebView綁定javascriptInterface，js腳本通過這個(gè)接口來調(diào)用java代碼

//參數(shù)1：橋梁類,參數(shù)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實(shí)際就是一個(gè)普通的java類，里面是我們本地實(shí)現(xiàn)的java代碼，將object 傳遞給WebView，并指定別名，這樣js腳本就可以通過我們給的這個(gè)別名來調(diào)用我們的方法

Html中調(diào)用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 以上會(huì)拋異常
上面的代碼存在遠(yuǎn)程代碼執(zhí)行安全漏洞，可以使用Safe Java-JS WebView Bridge解決該問題
Android WebView的Js對象注入漏洞解決方案

3、java代碼調(diào)用js并傳遞參數(shù)

只需要在待用js函數(shù)的時(shí)候加入?yún)?shù)即可，下面是傳遞一個(gè)參數(shù)的情況，需要多個(gè)參數(shù)的時(shí)候自己拼接及行了，注意str類型在傳遞的時(shí)候參數(shù)要用單引號括起來

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

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

實(shí)現(xiàn)案例

這里是實(shí)例的html代碼，從assert中加載，原來做項(xiàng)目的時(shí)候，從assert中加載的中文網(wǎng)頁會(huì)出現(xiàn)亂碼，解決辦法就是給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調(diào)用了js函數(shù)"; } function javacalljswithargs(arg){ document.getElementById("content").innerHTML += ("<br\>"+arg); } </script> </head> <body> this is my html <br/> <a onClick="window.wst.startFunction()">點(diǎn)擊調(diào)用java代碼</a><br/> <a onClick="window.wst.startFunction('hello world')" >點(diǎn)擊調(diào)用java代碼并傳遞參數(shù)</a> <br/> <div id="content">內(nèi)容顯示</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) { // 無參數(shù)調(diào)用 contentWebView.loadUrl("javascript:javacalljs()"); // 傳遞參數(shù)調(diào)用 contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")"); } }; public void startFunction() { Toast.makeText(this, "js調(diào)用了java函數(shù)", Toast.LENGTH_SHORT).show(); runOnUiThread(new Runnable() { @Override public void run() { msgView.setText(msgView.getText() + "\njs調(diào)用了java函數(shù)"); } }); } 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調(diào)用了java函數(shù)傳遞參數(shù)：" + 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調(diào)用js函數(shù)" /> </LinearLayout>

總結(jié)

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

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

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