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> 　　