时间戳

首页 > 解决方案 > 在 WebView 中填充 HTML 表单

nativescript - 在 WebView 中填充 HTML 表单

问题描述

我有一个带有如下简单页面的 NativeScript-5 应用程序（TypeScript 风格）：

<Page class="page">
   <StackLayout>
      <WebView id="webView" loaded="onWebViewLoaded" src="http://google.com" />
   </StackLayout>
</Page>

加载网页 (onWebViewLoded()) 后，我希望我的应用程序填充某些 HTML 字段（通过 id 或名称访问）并最终发布周围的 HTML 表单。这完全可以做到吗？

我知道有一个Nativescript-WebView-Interface插件，但它需要我在加载的页面中嵌入一个脚本（我不能这样做，因为我不拥有我正在加载的页面）。所以我认为我需要另一种方法。

如果有人有至少适用于 Android 的解决方案，那就太好了。多谢你们！

更新：为了避免误解：提交页面是可选的。重要的部分是加载网页并自动填充我的应用程序已经知道的一些值（因此用户不必自己在 HTML 表单中输入这些值）。

标签： nativescript

解决方案

您可以轻松地在 Android 的网页上下文中执行 JavaScript。

export function onLoadFinished(args: EventData) {
    const webView = (<WebView>args.object).nativeView;

    if (isAndroid) {
        // Make sure the element index is valid
        const javaScript = `document.getElementsByTagName("input")[2].value = "It works!"`;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
            webView.evaluateJavascript(javaScript, null);
        } else {
            webView.loadUrl(`javascript:${javaScript}`);
        }
    }
}

这是游乐场样本

iOS 也可以，但您可能必须在创建本机视图时覆盖/扩展现有的 {N} WebView 注入 JavaScript。

推荐阅读