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. 【TensorFlow入门完全指南】神经网络篇·循环神经网络（RNN）

    第一步仍然是导入库和数据集. ''' To classify images using a reccurent neural network, we consider every image row ...

  2. 让您的 VS 2012/2013 升级开发 .NET 4.6 -- Targeting the .NET Framework 4.6 (多目标包)

    原文出处:让您的 VS 2012/2013 升级开发 .NET 4.6 -- Targeting the .NET Framework 4.6 (多目标包) http://www.dotblogs.c ...

  3. HDU 5091 Beam Cannon （扫描线思想）

    题意:移动一个矩形,使矩形内包含的点尽量多. 思路:把一个点拆成两个事件,一个进(权值为1)一个出(权值为-1),将所有点按照x排序,然后扫描,对于每个x,用一个滑窗计算一下最大值,再移动扫描线.树状 ...

  4. Android（java）学习笔记110：Java中操作文件的类介绍（File + IO流）

    1.File类:对硬盘上的文件和目录进行操作的类.    File类是文件和目录路径名抽象表现形式  构造函数:        1) File(String pathname)       Creat ...

  5. python_98_面向对象_学校

    class School(object):#以后都加object(基类) def __init__(self, name, addr): self.name = name self.addr = ad ...

  6. apropos linux

    Apropos adj. 恰当的,关于,就...而言 adv. 顺便地,恰当地 All my suggestions apropos the script were accepted. 我所有有关该剧 ...

  7. Idea01 Idea2018中集成Tomcat9导致OutPut乱码

    版本和平台 idea2018.3 tomcat9 jdk1.8 windows7 64位 output乱码 经过测试,项目编码格式设置为utf-8,在main方法中输出中文正常. 而iedea集成to ...

  8. web.xml 中 resource-ref 的注意事项

    配置说明: web.xml 中配置 <resource-ref> <description>Employees Database for HR Applications< ...

  9. Silverlight日记：动态操作Grid

    一,动态生成Grid public static Grid CreateGrid(List<T_METER> List) { var g = new Grid(); if (null == ...

  10. Oracle数据库常用的Sql语句整理

    Oracle数据库常用的Sql语句整理 查看当前用户的缺省表空间 : select username,default_tablespace from user_users; 2.查看用户下所有的表 : ...