使用 webView 时是否可以将 HTML 表单中的数据获取到 android 中?

2024-03-04

我正在 HTML 中制作一个非常简单的表单,可以使用 webview 在 android 中查看,该 webview 使用文本框接收您的姓名,当您单击按钮时,它会将其显示到一个段落中,并且它是使用 html 和 javascript 制作的。 这是我的 html 代码:

<!DOCTYPE html>
<html>
<body>
<p> Write your name and win your favorite game console name and win it! The winners will be announced in 4 days.</p>
Type your name here: <input id="thebox" type="text" name="value" value=""><br>

    <button onclick="myFunction()">Try it</button>

    <p id="demo"></p>

    <script>
    function myFunction() {
        var x = document.getElementById("thebox").value;
        document.getElementById("demo").innerHTML = x;
    }
    </script>

    </body>
    </html>

新编辑的表格

<form name="albert" action="" method="POST">

 <label for="firstname"> First Name </label>
 <br /><br />

 <input type="text" name="firstname" id="firstname" />

 <input type="submit" name="sbumit" value="Submit" />


</form>

我想在单击按钮时从 android 中的变量中名为“thebox”的输入框中获取值,我之前尝试过很多东西,我遵循了一种注入 JS 文件的方法,但由于我对 JS 一无所知,所以我尝试失败了,这是我放入项目中的文件,该文件名为inject.js:

document.getElementsByTagName('form')[0].onsubmit = function () {
    var objPWD, objAccount, objSave;
    var str = '';
    var inputs = document.getElementsByTagName('thebox');
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].name.toLowerCase() === 'thebox') {
            objAccount = inputs[i];
        }
    }
    if(objAccount != null) {
        str += objAccount.value;
    }
    if(objPWD != null) {
        str += ' , ' + objPWD.value;
    }
    if(objSave != null) {
        str += ' , ' + objSave.value;
    }
    window.AndroidInterface.processHTML(str);
    return true;
};

后来当我关注那篇文章时,它说我需要在我的 MainActivity 中放入一些东西,但由于我是第一次使用 webview,我不太明白,这是我放入 MainActivity 中的代码:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        this.setContentView(webView);

        // enable javascript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JavaScriptInterface(), "AndroidInterface");

        // catch events
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageFinished(WebView view, String url) {
                try {
                    view.loadUrl("javascript:" + buildInjection());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        });

        webView.loadUrl("http://someurl.com");
    }

我在 MainActivity 中创建的嵌套类:

class JavaScriptInterface {
        @JavascriptInterface
        public void processHTML(String formData) {
            Log.d("AWESOME_TAG", "form data: " + formData);
        }
    }

最后是注入代码的方法:

private String buildInjection() throws IOException {
        StringBuilder buf = new StringBuilder();
        InputStream inject = getAssets().open("inject.js");// file from assets
        BufferedReader in = new BufferedReader(new InputStreamReader(inject, "UTF-8"));
        String str;
        while ((str = in.readLine()) != null) {
            buf.append(str);
        }
        in.close();

        return buf.toString();
    }

我想从 Android 中的 web 视图中显示的 html 表单(输入框)中获取值,是否真的可以做到这一点?如果可以,如何实现并请解释一下?谢谢,还请告诉我将在哪个变量中获得该值。


    Webview browser=(WebView)view.findViewById(R.id.webChart);
    browser.getSettings().setJavaScriptEnabled(true);
    browser.addJavascriptInterface(new WebAppInterface(getActivity()), "Android");
    browser.loadUrl("file:///android_asset/yourHtmlFileName.html");

添加这个接口类,WebAppInterface

public class WebAppInterface {
 Context mContext;
 String data;

 WebAppInterface(Context ctx){
    this.mContext=ctx;
 } 


 @JavascriptInterface
 public void sendData(String data) {
    //Get the string value to process
      this.data=data;
 }
}

您的 HTML 代码数据

 function loadChartData() {
  var x = document.getElementById("thebox").value;
   Android.sendData(x);
 }

当在android webview中点击html按钮时调用此函数

UPDATE

1)默认情况下,JavaScript 在 webview 中被禁用。要启用它,请获取 webview 的设置并调用 setJavaScriptEnabled(true);为真。

2)要创建 Javascript 代码和 Android 代码之间的接口,您需要创建 Javacript 接口类。

3)将 javascript 代码与 android 代码之间的接口绑定,您需要传递接口类的引用以及 javaScript 可以调用以访问该类的接口名称。

4)传递 html 文件路径以加载到 webview(浏览器)中。

5)创建如下所示的接口类(WebAppInterface)。

请参阅此链接了解更多详细信息https://developer.android.com/guide/webapps/webview.html https://developer.android.com/guide/webapps/webview.html

6)在 HTML 文件中,创建按钮并向该按钮添加点击侦听器,并使用接口名称(此处为 Android)调用 sendData("your value") 函数。

就这样。您可以将值从 html 传递到您的 android 代码。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 webView 时是否可以将 HTML 表单中的数据获取到 android 中? 的相关文章

  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • 如何获取 Android 中临时文件的文件大小?

    如果我使用 openFileOutput 创建并写入临时文件 写入完成后如何获取文件大小 我希望这可以帮助你 File file new File selectedPath int file size Integer parseInt St
  • 如何使用 javascript 将我的域名字母大写?

    假设我的域名是www hello com 如何使用 jQuery JavaScript 使浏览器的 URL 栏看起来像 www HELLO com 您无法更改浏览器地址栏中显示的内容 这是一项基本的安全功能 您可以使您的域名全部大写 并将页
  • 全日历与 UTC 和本地日期的混淆

    我确实让 fullcalendar 正常初始化 所以它代表当前日期 午夜 gt 午夜 1 天 1 小时时段 我从其他一些数据源获取带有时间戳的数据 格式为 YYYY MM DD HH mm 作为字符串传输 无时区信息 因此 我将该字符串转换
  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return
  • 使标签充当输入按钮

    我怎样才能做一个 a href http test com tag test Test a 就像表单按钮一样 通过充当表单按钮 我的意思是 当单击链接执行操作时method get 或 post 以便能够通过 get 或 post 捕获它
  • Python 中的 Firebase 身份验证时出现 KeyError:“databaseURL”

    相信你做得很好 我是 firebase 的新手 正在尝试进行用户身份验证 我已经安装了pyrebase4并在firebase控制台上创建了一个项目 我还启用了使用 电子邮件和密码 登录并尝试连接我的应用程序 下面是我正在尝试的代码 impo
  • 将 espresso 与自定义 EditText 结合使用

    这是我的布局的一部分
  • Android 4 上的 html5 视频:全屏播放然后重定向到另一个网页 - 不起作用

    我正在为 Android 4 智能手机设计一个 html5 页面 其中包含一个 3gpp 或 mp4 视频 打开时必须自动全屏播放 当视频结束时应该重定向到另一个网址 一些谷歌搜索告诉我 Android 4 上不再允许自动播放 因此我选择显
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • Listview里面只有一个Element

    您好 我正在尝试将列表视图放入列表视图中的列表视图中 唯一的问题是只有第一个列表视图正确显示所有元素 此后的每个列表视图仅包含一个元素 UPDATE 创建我自己的不可滚动列表视图解决了这个问题 https stackoverflow com
  • 如何从 Visual Studio Code API 打开浏览器

    我只是在探索一种从用于开发扩展的 Visual Studio Code API 打开默认浏览器的方法 以下是我的代码 var disposable vscode commands registerCommand extension brow
  • Android 键盘清单未显示在设置中

    我正在制作我的第一个 Android 应用程序 我需要它作为键盘服务 据我所知 清单看起来不错 并且我有一个文件 WifiJoy java 在 com zwad3 wifijoy 包中 以及所有其他文件
  • Android 方向传感器的替代品是什么?

    大家好 我正在为 Android 构建 3D 游戏 我目前正在尝试在我的游戏中添加一个传感器 允许玩家倾斜机器人作为其控制 理想情况下 我想使用方向传感器 但我注意到它已被弃用 有谁知道如何检测 Android 中的倾斜并且不使用这个传感器
  • javascript 加壳器与压缩器

    我想知道加壳器与压缩器的区别 优点是什么 即您应该在网络应用程序中部署压缩版本还是压缩版本 示例代码 var layout NAVVISIBLE 1 Init function this Resize Dimensions function
  • 如何在Android中显示进度对话框?

    我想展示ProgressDialog当我单击 登录 按钮时 需要一些时间才能移动到另一个页面 我怎样才能做到这一点 ProgressDialog pd new ProgressDialog yourActivity this pd setM
  • C/C++ 通过 Android NDK 在 JNI 中看不到 Java 方法

    我正在尝试从使用 NDK 构建的 C 类文件调用 Java 方法 它不断抛出常见的 未找到非静态方法 错误并导致整个 Android 应用程序崩溃 下面的代码片段 有些东西可能不需要 但我按原样保留它们 因为焦点 问题在于refreshJN
  • 数组长度未定义[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我试图按如
  • 如何在 JavaScript 中将日期时间微格式转换为本地时间?

    我有一个页面当前正在使用日期时间微格式 http microformats org wiki datetime design pattern显示时间戳 但我只显示我自己的时区的人类可读时间
  • 如何为 Android Q 打开具有特定专辑或文件夹的默认图库应用程序?

    我尝试打开图库中的特定文件夹 如下代码所示 但它对我不起作用 并且出现错误无法找到物品 fun openDirectoryInGallery context Context directory String val intent Inten

随机推荐