Android編程使用WebView實(shí)現(xiàn)與Javascript交互的方法【相互調(diào)用參數(shù)、傳值】
本文實(shí)例講述了Android編程使用WebView實(shí)現(xiàn)與Javascript交互的方法。分享給大家供大家參考,具體如下:
Android中可以使用WebView加載網(wǎng)頁,同時(shí)Android端的Java代碼可以與網(wǎng)頁上的JavaScript代碼之間相互調(diào)用。
效果圖:
(一)Android部分:
布局代碼:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:focusable="true" android:focusableInTouchMode="true" android:orientation="vertical" android:padding="8dp" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/input_et" android:layout_width="0dp" android:layout_height="wrap_content" android:singleLine="true" android:layout_weight="1" android:hint="請輸入信息" /> <Button android:text="Java調(diào)用JS" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="sendInfoToJs" /> </LinearLayout> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
Activity代碼:
/** * Android WebView 與 Javascript 交互。 */ public class MainActivity extends ActionBarActivity { private WebView webView; @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"}) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webView); webView.setVerticalScrollbarOverlay(true); //設(shè)置WebView支持JavaScript webView.getSettings().setJavaScriptEnabled(true); String url = "http://192.168.1.27/js_17_android_webview.html"; webView.loadUrl(url); //在js中調(diào)用本地java方法 webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); //添加客戶端支持 webView.setWebChromeClient(new WebChromeClient()); } private class JsInterface { private Context mContext; public JsInterface(Context context) { this.mContext = context; } //在js中調(diào)用window.AndroidWebView.showInfoFromJs(name),便會(huì)觸發(fā)此方法。 @JavascriptInterface public void showInfoFromJs(String name) { Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show(); } } //在java中調(diào)用js代碼 public void sendInfoToJs(View view) { String msg = ((EditText) findViewById(R.id.input_et)).getText().toString(); //調(diào)用js中的函數(shù):showInfoFromJava(msg) webView.loadUrl("javascript:showInfoFromJava('" + msg + "')"); } }
(二)網(wǎng)頁代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>Android WebView 與 Javascript 交互</title> <head> <style> body {background-color:#e6e6e6} .rect { color:white; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; width:100px; padding:6px; background-color:#98bf21; text-decoration:none; text-align:center; border:none; cursor:pointer; } .inputStyle {font-size:16px;padding:6px} </style> </head> <body> <p>測試Android WebView 與 Javascript 交互</p> <input id = "name_input" class = "inputStyle" type="text"/> <a class = "rect" onclick="sendInfoToJava()">JS調(diào)用Java</a> <script> function sendInfoToJava(){ //調(diào)用android程序中的方法,并傳遞參數(shù) var name = document.getElementById("name_input").value; window.AndroidWebView.showInfoFromJs(name); } //在android代碼中調(diào)用此方法 function showInfoFromJava(msg){ alert("來自客戶端的信息:"+msg); } </script> </body> </html>
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Android視圖View技巧總結(jié)》、《Android開發(fā)動(dòng)畫技巧匯總》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android布局layout技巧總結(jié)》、《Android開發(fā)入門與進(jìn)階教程》、《Android資源操作技巧匯總》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計(jì)有所幫助。
- 三步搞定:Vue.js調(diào)用Android原生操作
- DCloud的native.js調(diào)用系統(tǒng)分享實(shí)例Android版代碼
- Android中實(shí)現(xiàn)WebView和JavaScript的互相調(diào)用詳解
- Android WebView的使用方法及與JS 相互調(diào)用
- JS調(diào)用Android、Ios原生控件
- Android總結(jié)之WebView與Javascript交互(互相調(diào)用)
- Android與JS之間跨平臺(tái)異步調(diào)用實(shí)例詳解
- Android webview和js互相調(diào)用實(shí)現(xiàn)方法
- Android WebView使用方法詳解 附j(luò)s交互調(diào)用方法
- Android與JS相互調(diào)用的方法
相關(guān)文章
Android SDK命令行工具M(jìn)onkey參數(shù)及使用解析
這篇文章主要介紹了Android SDK命令行工具M(jìn)onkey參,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值數(shù)及使用解析,需要的朋友可以參考下2020-10-10判斷Android程序是否在前臺(tái)運(yùn)行的兩種方法
這篇文章主要介紹了判斷Android程序是否在前臺(tái)運(yùn)行的兩種方法,本文直接給出實(shí)現(xiàn)代碼,,需要的朋友可以參考下2015-06-06老項(xiàng)目遷移AndroidStudio3.0遇到的坑
給大家分享了老的項(xiàng)目以及程序遷移到了AndroidStudio3.0遇到的坑和問題解決辦法,希望給你做個(gè)參考。2017-11-11詳解Android數(shù)據(jù)存儲(chǔ)之SQLCipher數(shù)據(jù)庫加密
對于已經(jīng)ROOT的手機(jī)來說的沒有任何安全性可以,一旦被利用將會(huì)導(dǎo)致數(shù)據(jù)庫數(shù)據(jù)的泄漏,本篇文章主要介紹了Android數(shù)據(jù)存儲(chǔ)之SQLCipher數(shù)據(jù)庫加密,具有一定的參考價(jià)值,有需要的可以了解一下。2016-12-12Android Activity與Fragment之間的跳轉(zhuǎn)實(shí)例詳解
這篇文章主要介紹了Android Activity與Fragment之間的跳轉(zhuǎn)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02Android實(shí)現(xiàn)socket通信統(tǒng)一接口的方法
這篇文章主要介紹了Android實(shí)現(xiàn)socket通信統(tǒng)一接口?,實(shí)現(xiàn)了統(tǒng)一接口之后確實(shí)可以使后續(xù)修改實(shí)現(xiàn)更加方便,程序結(jié)構(gòu)也更加工程化,需要的朋友可以參考下2021-12-12Android開發(fā)Jetpack組件LiveData使用講解
LiveData是Jetpack組件的一部分,更多的時(shí)候是搭配ViewModel來使用,相對于Observable,LiveData的最大優(yōu)勢是其具有生命感知的,換句話說,LiveData可以保證只有在組件( Activity、Fragment、Service)處于活動(dòng)生命周期狀態(tài)的時(shí)候才會(huì)更新數(shù)據(jù)2022-08-08Android入門之Fragment嵌套Fragment的用法詳解
這篇文章主要為大家詳細(xì)介紹了Android中如何實(shí)現(xiàn)Fragment嵌套Fragment的相關(guān)資料,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-02-02