Android Webview 与JS交互
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>
Android Webview 与JS交互的更多相关文章
- [android] WebView与Js交互
获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...
- webview与js交互(转)
原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...
- Android中使用WebView与JS交互全解析
1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An ...
- webview与js交互
对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...
- android Webview 实现js调用java代码实现Activity跳转
今天有了一个需求,在android里webview加载的html页面,要求点击html页面的按钮实现Activity的跳转. 咱是是菜鸟,webview的接触不多,于是就和度娘来了次亲密接触.在其中也 ...
- webView和js交互
与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...
- iOS webView与js交互在文本空格上输入文字
项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...
- Android原生webview中js交互
http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...
- 【Android开发】Webview 和 JS 交互问题
一,安卓原生调用JS代码 1,js代码: function handlePasteDataFromApp(pasteStr) { showInfo('pasteData: aaaaa' + JSON. ...
随机推荐
- JavaScript_10_错误
Try...catch... throw <!DOCTYPE html> <html> <head> <title></title> < ...
- width:100%与绝对定位同时存在,偏移出父级容器
当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个 ...
- 2017-3-7-lint183-wood-cut
2017-3-7-lint183-wood-cut 在河之洲 算法 lintcode problem lintcode183 wood cut solution 注意两点 注意边界条件 取的是最大值而 ...
- Beta版本发布
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/?page=2 这个作业要求在哪里 <作业要求的 ...
- Bootstrap历练实例:动画的进度条
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- c++ json字符串转换成map管理
在cocos2dx for lua中,我们经常通过lua的table传入c++使用,然后早c++层操作数据. 实现步骤大致如下: table->string->c++层->通过rap ...
- linux系统下的用户文件句柄数限制
linux系统下的用户文件句柄数限制 文章来源:企鹅号 为什么要修改用户打开的文件数 系统默认单个进程可以打开1024个文件,对于一些应用如tomcat.oracle等,运行时经常open成千上万个文 ...
- cesium 基于天地图服务 完成底图标注渲染加切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- NOIP模拟赛 机器人
[题目描述] 早苗入手了最新的Gundam模型.最新款自然有着与以往不同的功能,那就是它能够自动行走,厉害吧. 早苗的新模型可以按照输入的命令进行移动,命令包括‘E’.‘S’.‘W’.‘N’四种,分别 ...
- Linux菜鸟起飞之路【九】系统启动流程
Linux系统启动流程 BIOS -> MBR -> BootLoader -> Kernel -> init 1.打开电源后,计算机从主板的BIOS中读取其中存储的程序.这 ...