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. 首次将项目从eclipse提交到服务器的SVN

    1.在Eclipse项目中,点击需要提交到svn的项目,鼠标右键,如下图: 2.鼠标右键后,我们看到Team选项,在二级菜单中点击“Share Project”,这个时候弹出“Share Projec ...

  2. cluvfy stage命令用法

    1.获取集群验证工具cluvfy的帮助信息 grid@rac1:/home/grid>cluvfy -help USAGE: cluvfy [ -help ] cluvfy stage { -l ...

  3. UVA 211 The Domino Effect 多米诺效应 （回溯）

    骨牌无非两种放法,横着或竖着放,每次检查最r,c最小的没访问过的点即可.如果不能放就回溯. 最外面加一层认为已经访问过的位置,方便判断. #include<bits/stdc++.h> ; ...

  4. Git初始化仓库

    Git global setup: git config --global user.name "再见理想" git config --global user.email &quo ...

  5. Nat Nanotechnol | 朱涛/陈春英等合作发现碳纳米管呼吸暴露后的延迟毒性导致小鼠原位乳腺肿瘤的多发性广泛转移

    碳纳米管(Carbon nanotube, CNT)是重要的一维纳米材料,由于其良好的力学.电学和化学性能,可用作超强纤维.隐身材料.大功率超级电容器.传感器等,在纳米材料.信息.光电.能源.传感及生 ...

  6. java的IO机制

    BIO.NIO.AIO -----> Block-IO : inputStream 和OutputStream,Reader和Writer 1个连接,启动一个线程,这样导致很大的线程开销 NIO ...

  7. Objective-C实现一个简单的栈

    栈作为一种数据结构,是一种只能在一端进行插入和删除操作的特殊线性表.它按照先进后出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始弹出数据(最后一个数据被第一个读出 ...

  8. 新环境安装 python3

    参考 安装 python3 时,不要覆盖原环境的 python2.因为环境中有些程序是依赖 2 的,比如 yum.直接覆盖是会影响环境的. 最好的是编译安装 python3,执行指令是用 python ...

  9. 201621123080《Java程序设计》第三周学习总结

    Week03-面向对象入门 1. 本周学习总结 2. 书面作业 1.以面向对象方式改造数据结构作业'有理数'(重点) 1.1 截图你主要代码(需要在程序中出现你的学号和姓名)并粘贴程序的git地址. ...

  10. 01windows常用命令及批处理

    1. 概述 复制内容:右键弹出快捷菜单,选择"标记(K)",然后选中所需要的内容,然后右键即可 粘贴内容:右键弹出快捷菜单,选择"粘贴(P)" 命令参数的路径: ...