WebView之js調用Android類的方法傳遞數據

時間 2019-11-20

標籤 webview 調用 android 方法傳遞數據欄目 JavaScript 简体版

原文原文鏈接

1，具體的思路以下：html

　　在android中寫一個Activity，裏面寫一個webview，這個webview加載本地的一個html文件，顯示這個網頁，這個網頁包括一個用戶名和密碼的輸入框和兩個按鈕（只有登錄按鈕有用），輸入用戶名密碼以後調用android中的類，並把輸入的數據傳過去，再在android中輸出出來（具體你那數據作什麼操做就看你的需求了），這樣就作到js與android數據交互的效果了：android

　　在android端，一些webviwe的設置和自定義類的寫法以下源碼：web

　　package com.example.webview;服務器

　　import android.app.Activity;
　　import android.os.Bundle;
　　import android.webkit.JavascriptInterface;
　　import android.webkit.WebChromeClient;
　　import android.webkit.WebSettings;
　　import android.webkit.WebView;app

　　public class MainActivity extends Activity {
　　　　private WebView webview;
　　　　private String URL = "http://192.168.31.122/word2/login.html";//這是你要訪問你html文件的存放地址，我這個是放在appache中的word文件夾下的login.html文件
　　　　@Override
　　　　protected void onCreate(Bundle savedInstanceState) {
　　　　　　super.onCreate(savedInstanceState);
　　　　　　setContentView(R.layout.activity_main);
　　　　　　webview = (WebView) findViewById(R.id.webView1);
　　　　　　WebSettings webset = webview.getSettings();
　　　　　　webset.setJavaScriptEnabled(true);// 表示webview能夠執行服務器端的js代碼
　　　　　　webview.setWebChromeClient(new WebChromeClient(){});
　　　　　　webview.addJavascriptInterface(new JsObject(),"jsObject");
　　　　　　webview.loadUrl(URL);
　　　　}

　　　　public class JsObject {
　　　　　　@JavascriptInterface
　　　　　　public void getMessage(String name, String pwd) {
　　　　　　　　// TODO Auto-generated method stub
　　　　　　　　System.out.println("==="+"name:" + name + "---pwd:" + pwd);
　　　　　　}
　　　　}

　　}ide

　　而xml比較簡單，只是一個比較簡單的webview而已，代碼以下：post

　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"spa

　　　　android:layout_width="fill_parent"orm

　　　　android:layout_height="fill_parent"
　　　　android:orientation="vertical" >xml

　　</LinearLayout>

　　對於要加載的html文件只要放在你要訪問的地方就能夠，好比appache下，具體代碼以下：

　　<!DOCTYPE html>

　　<html> 　　　　<head> 　　　　　　<script> 　　　　　　　　function login(){ 　　　　　　　　　　var th = document.form; 　　　　　　　　　　var user = th.user.value;　　　　　　　　　　if(user==""){　　　　　　　　　　　　alert("請輸入用戶名!");　　　　　　　　　　}else{ 　　　　　　　　　　　　var name = th.user.value; 　　　　　　　　　　　　var pwd = th.pwd.value; 　　　　　　　　　　　　var name2 = jsObject.getMessage(name,pwd);　　　　　　　　　　} 　　　　　　　　} 　　　　　　</script> 　　　　</head> 　　　　<body> 　　　　　　<form name='form' method='post' class='form' action=''> 　　　　　　　　<table id='login_table'> 　　　　　　　　　　<tr> 　　　　　　　　　　　　<td> 　　　　　　　　　　　　　　<span>帳號:</sapn> 　　　　　　　　　　　　</td> 　　　　　　　　　　　　<td> 　　　　　　　　　　　　　　<input type='text' class='usr' name='user' value=''/> 　　　　　　　　　　　　</td> 　　　　　　　　　　　　<td></td> 　　　　　　　　　　</tr> 　　　　　　　　　　<tr> 　　　　　　　　　　　　<td> 　　　　　　　　　　　　　　<span>密碼:</sapn> 　　　　　　　　　　　　</td> 　　　　　　　　　　　　<td> 　　　　　　　　　　　　　　<input type='password' class='psw' name='pwd' value=''/> 　　　　　　　　　　　　</td> 　　　　　　　　　　　　<td></td> 　　　　　　　　　　</tr> 　　　　　　　　　　<tr> 　　　　　　　　　　　　<td></td> 　　　　　　　　　　　　<td> 　　　　　　　　　　　　　　<input type="file" value="上傳圖片" /> 　　　　　　　　　　　　　　<button class='denglu' onclick="login()">登錄</button> 　　　　　　　　　　　　　　<button class='clear'>清空</button> 　　　　　　　　　　　　</td> 　　　　　　　　　　　　<td></td> 　　　　　　　　　　</tr> 　　　　　　　　</table> 　　　　　　</form> 　　　　</body>　　</html> 　　