在 WebView 中填充 HTML 表单

debugcn 发表于 Dev

英格玛

我有一个带有如下简单页面的 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}`);
        }
    }
}

这是游乐场示例

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。