Android編程使用WebView實現(xiàn)與Javascript交互的方法【相互調(diào)用參數(shù)、傳值】
更新時間：2017年03月07日 10:31:04 作者：books1958
這篇文章主要介紹了Android編程使用WebView實現(xiàn)與Javascript交互的方法,可實現(xiàn)基于WebView與JavaScript相互調(diào)用參數(shù)、傳值的功能,需要的朋友可以參考下
本文實例講述了Android編程使用WebView實現(xiàn)與Javascript交互的方法。分享給大家供大家參考，具體如下：
Android中可以使用WebView加載網(wǎng)頁，同時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);
//設置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)，便會觸發(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>
更多關于Android相關內(nèi)容感興趣的讀者可查看本站專題：《Android視圖View技巧總結(jié)》、《Android開發(fā)動畫技巧匯總》、《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android布局layout技巧總結(jié)》、《Android開發(fā)入門與進階教程》、《Android資源操作技巧匯總》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設計有所幫助。
您可能感興趣的文章:
- 三步搞定:Vue.js調(diào)用Android原生操作
- DCloud的native.js調(diào)用系統(tǒng)分享實例Android版代碼
- Android中實現(xiàn)WebView和JavaScript的互相調(diào)用詳解
- Android WebView的使用方法及與JS 相互調(diào)用
- JS調(diào)用Android、Ios原生控件
- Android總結(jié)之WebView與Javascript交互（互相調(diào)用）
- Android與JS之間跨平臺異步調(diào)用實例詳解
- Android webview和js互相調(diào)用實現(xiàn)方法
- Android WebView使用方法詳解 附js交互調(diào)用方法
- Android與JS相互調(diào)用的方法
相關文章
Android關于BottomNavigationView使用指南
本文主要介紹了Android關于BottomNavigationView使用指南，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
解決webview調(diào)用goBack()返回上一頁自動刷新閃白的情況
本文主要介紹了解決webview調(diào)用goBack()返回上一頁自動刷新閃白的情況。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
Android 網(wǎng)絡請求框架Volley實例詳解
這篇文章主要介紹了Android 網(wǎng)絡請求框架Volley實例詳解的相關資料,需要的朋友可以參考下2017-06-06
使用User Agent分辨出Android設備類型的安全做法
這篇文章主要介紹了使用User Agent分辨出Android設備類型的安全做法,本文得出的結(jié)論是當你依據(jù)檢測UA來判斷Android手機設備,請同時檢查android和mobile兩個字符串,需要的朋友可以參考下2015-01-01
DCloud的native.js調(diào)用系統(tǒng)分享實例Android版代碼
本文為大家分享了DCloud的native.js如何調(diào)用系統(tǒng)分享功能Android版的實例代碼,直接拿來就用2018-09-09
Android開發(fā)基礎之創(chuàng)建啟動界面Splash Screen的方法
這篇文章主要介紹了Android開發(fā)基礎之創(chuàng)建啟動界面Splash Screen的方法,以實例形式較為詳細的分析了Android定制啟動界面的布局及功能實現(xiàn)相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細介紹了Android時光軸實現(xiàn)淘寶物流信息瀏覽效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本篇文章是對Android ViewStub的應用進行了詳細的分析介紹，需要的朋友參考下2013-05-05
本篇文章是對Android往Framework中添加新資源的方法進行了詳細的分析介紹，需要的朋友參考下2013-06-06
Android獲取應用程序名稱(ApplicationName)示例
本文以實例方式為大家介紹下獲取應用程序名稱(ApplicationName)的具體實現(xiàn)，感興趣的各位可以參考下哈2013-06-06