在WebView中填充HTML表单 [英] Populate HTML forms in WebView

问题描述

我有一个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表单中输入这些值)。

推荐答案

您可以在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}`);
        }
    }
}

这里是Playground Sample

iOS也可以，但您可能需要在创建原生视图时覆盖/扩展现有的{N}WebView Inject JavaScript。

这篇关于在WebView中填充HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！