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交互的更多相关文章

  1. [android] WebView与Js交互

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...

  2. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

  3. Android中使用WebView与JS交互全解析

    1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An ...

  4. webview与js交互

     对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...

  5. android Webview 实现js调用java代码实现Activity跳转

    今天有了一个需求,在android里webview加载的html页面,要求点击html页面的按钮实现Activity的跳转. 咱是是菜鸟,webview的接触不多,于是就和度娘来了次亲密接触.在其中也 ...

  6. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  7. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  8. Android原生webview中js交互

    http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...

  9. 【Android开发】Webview 和 JS 交互问题

    一,安卓原生调用JS代码 1,js代码: function handlePasteDataFromApp(pasteStr) { showInfo('pasteData: aaaaa' + JSON. ...

随机推荐

  1. HDU 1124 Factorial （阶乘后缀0）

    题意: 给一个数n,返回其阶乘结果后缀有几个0. 思路: 首先将n个十进制数进行质因数分解,观察的得到只有2*5才会出现10.那么n!应含有min(2个数,5个数)个后缀0,明显5的个数必定比2少,所 ...

  2. Bot Framework：Activity类简明指南

    Bot Framework相关文档:https://docs.botframework.com/en-us/csharp/builder/sdkreference/attachments.html B ...

  3. 将SQL2008升级为SQL2008 r2

    我的SQL2008版本信息 Microsoft SQL Server Management Studio     10.0.1600.22 ((SQL_PreRelease).080709-1414 ...

  4. 字符串的驻留（String Interning）

    http://www.cnblogs.com/artech/archive/2007/03/04/663728.html 关于字符串的驻留的机制,对于那些了解它的人肯定会认为很简单,但是我相信会有很大 ...

  5. 安装IAR ewarm

    一  安装准备 (ST方案) 1 嵌入式集成开发环境IAR ewarm 5.41 2 J-Link4.20 3 emberznet-4.3.0协议栈安装包 option1:tools - stm32软 ...

  6. Service Unavailable HTTP Error 503. The service is unavailable.

    原因: public void SetCurrentType(string[] projTypes) { _ProjTypes = _ProjTypes; } 确保没有无限递归或无限循环

  7. React组件自适应窗口宽高

    很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...

  8. An Intuitive Explanation of Convolutional Neural Networks

    https://ujjwalkarn.me/2016/08/11/intuitive-explanation-convnets/ An Intuitive Explanation of Convolu ...

  9. python生成四位随机数

    有些时候需要发送短信给用户生成四位随机数字,这里在python中我们可以根据python自带的标准库random和string来实现. random下有三个可以随机取数的函数,分别是choice,ch ...

  10. Voyager如何使用Compass

    Compass由Resources,Commands,Logs三个部分组成 Resources包含了Links和Fonts: Commands可以执行php命令,比如创建model: 创建一个Down ...