在WebView中填充HTML表单

Question

我有一个NativeScript-5应用程序(TypeScript风格)，它有一个简单的页面，如下所示：

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

在加载网页(onWebViewLoded())之后，我希望我的应用程序填充特定的HTML字段(通过id或名称访问)，最后发布周围的HTML。这能办到吗？

我知道有一个Nativescript-WebView-接口插件，但是它要求我在加载的页面中嵌入一个脚本(而且我不能这样做，因为我并不拥有正在加载的页面)。所以我想我需要另一种方法。

如果有人有至少能在Android上工作的解决方案，那就太好了。谢谢你们！

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

Answer 1

您可以轻松地在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。