Android Webview 与JS交互
2024-09-02 12:21:09
Android中 WebView控件支持JS与本地代码的交互。
// 是否允许在webview中执行javascript
webSettings.setJavaScriptEnabled(true);
//添加JS的接口名称
mWebView.addJavascriptInterface(this, "mobiletojs");
其主要分为两类:
1:JS调用本地代码
通过window.mobiletojs.saveLogin(username, password);
mobiletojs 对应 mWebView.addJavascriptInterface(this, "mobiletojs"); 中的接口名称
2:本地代码调用JS
在Activity中实现方法调用 mWebView.loadUrl("javascript:setUsername('ddd')"); 即可实现对JS:设置用户名方法的调用
//Android 本地代码
package com.whroid.commonapp.ui; import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebSettings;
import android.webkit.WebView; @SuppressLint("JavascriptInterface")
public class WebViewJSUI extends Activity {
public static final String TAG = "WebViewJSUI";
private WebView mWebView; @Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mWebView = new WebView(this);
setContentView(mWebView);
WebSettings webSettings = mWebView.getSettings();
// 是否允许在webview中执行javascript
webSettings.setJavaScriptEnabled(true);
// 为JS添加本地调用的接口 名称
mWebView.addJavascriptInterface(this, "mobiletojs");
// 加载网页
mWebView.loadUrl("file:///android_asset/test_webview_js.html");
} //页面点击登录时 由页面调用
public void saveLogin(String username,String password)
{
Log.w(TAG, "调用登录:onLoin:"+username+" password:"+password);
}
//由代码调用页面js,实现对页面的编辑
public void setUsername()
{
mWebView.loadUrl("javascript:setUsername('ddd')");
}
public String getUsername()
{
return "来自android 的用户名";
}
public String getPassword()
{
return "mobile password";
}
}
//对应的页面,以及相应的JS
<!DOCTYPE HTML>
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<script language="javascript">
function onLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value; var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android");
if (index > 0) {
window.mobiletojs.saveLogin(username, password);
}
} function setUsername(name) {
document.getElementById("username").value = name;
} function onInit() { var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android");
if (index > 0) {
//调用android或者ios本地方法,获取用户名或密码
var username = window.mobiletojs.getUsername();
var password = window.mobiletojs.getPassword();
document.getElementById("username").value = username;
document.getElementById("password").value = password;
} } //页面开始加载时,触发
if (document.readyState == "complete") {
onInit()
} else {
document.onreadystatechange = function() { if (document.readyState == "complete") {
onInit()
}
}
}
</script>
</head>
<body style="background-color: #ff0;">
<table width="400" align="center">
<tr>
<td><input type="text" value="username" id="username" />
</td>
<input type="text" value="password" id="password" />
<td></td>
</tr>
<tr>
<td>
<div id="output">test</div> <input type="submit" value="提交"
onclick="onLogin()" /> <br />
<table width="400" align="center"></table>
</td>
</tr>
</table>
</body> </html>
最新文章
- 实例讲解react+react-router+redux
- iOS 疑难杂症— — 收到推送显示后自动消失的问题
- lable计算行高
- magento目录结构说明,Magento文件夹结构说明,Magento folder structure
- arrayLen
- about reg
- netty socket 客服端编程
- 【前端学习】git命令行界面
- 用开源Look&;Feel (Substance)写 漂亮的Swing应用程序
- An Example of On-Error Trigger in Oracle Forms
- Node.js 学习(一) 安装配置
- JavaScript执行上下文
- MyBatis(3.2.3) - Handling the CLOB/BLOB types
- Curling 2.0(dfs回溯)
- 解决Eclipse一直loading workbench无法启动的问题
- Html 模态框操作
- lr_save_var() 截取任意字符串长度,以参数形式输出(参数转变量)
- MySQL之字符集-校对规则
- js的内置对象
- cadence学习二----->;Allegro基本概念