代码之家 › 专栏 › 技术社区 › Ingmar

在WebView中填充HTML表单

nativescript

Ingmar · 技术社区 · 5 年前

我有一个NativeScript-5应用程序(typescript风格),有一个简单的页面,如下所示:

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

加载网页(onWebViewLodded())后,我希望我的应用程序填充某些HTML字段(通过ID或名称访问)并最终发布周围的HTML表单。这能做到吗?

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

如果有人有一个解决方案,至少在Android上有效,那就太好了。谢谢大家!

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

1 回复 | 直到 5 年前

Manoj 5 年前

在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注入javascript。

推荐文章

Knight · NativeScript,Android-与本地主机的连接失败

6 年前

Muthukumar Marichamy · NativeScript推送插件未在通知栏上显示通知

6 年前

Volodya Kurpita · 是否可以确定移动网络的位置设备-Nativescript

6 年前

Loki · Nativescript-将边框顶部添加到操作栏

6 年前

Ted · ServiceStack/TypeScript:TypeScript引用忽略名称空间(这会导致重复)

6 年前

V.D · Visual Studio代码上的调试Nativescript不工作

6 年前

Tienus McVinger · 有没有办法限制if条件的需要?

6 年前

nonzod · NativeScript HttpClient和Observable

6 年前

kenny · NativeScript打开操作扩展

6 年前

Roel Voordendag · 标题样式仪表Nativescript

6 年前