0

I have a NativeScript-5 app (TypeScript flavor) with a simple page like this:

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

After loading the web page (onWebViewLoded()), I would like my app to populate certain HTML fields (access by id or name) and finally post the surrounding HTML form. Can this be done at all?

I know that there is a Nativescript-WebView-Interface plugin, but it requires me to embed a script in the loaded page (and I can't do this, because I don't own the page I am loading). So I assume I need another approach.

If anybody has a solution that works at least on Android, that would be great. Thanks guys!

Update: In order to avoid misunderstandings: Submitting the page is optional. The important part is to load a web page and auto-fill some values that my app already knows (so the user does not have to enter these values in the HTML form himself).

Ingmar
  • 1,525
  • 6
  • 34
  • 51
  • It sounds like you should call an API instead of loading up a webpage just to fill a form and auto-post. Are you sure you want to do it the way you have described? – Ian MacDonald Jan 11 '19 at 15:27
  • Well, unfortunately there is no API. So yes, I need to load a certain web page (it's NOT Google - this was just an example) and then populate 2-3 fields and submit. – Ingmar Jan 11 '19 at 15:31
  • You can construct the message a post it yourself without having to load up a page, though. It may not be a well-documented API, but if they have a form that posts values, it's (almost certainly) there. – Ian MacDonald Jan 11 '19 at 15:38
  • @Ian, thank you. It's very nice of you to think of a totally different approach. But in this case I need "my way" in all different kinds of scenarios. So I really need a way to load and show a web page with auto-populated values. In most cases, my users will submit the web form themselves by taping on an HTML button. So, in this case, it's not about calling an API. – Ingmar Jan 11 '19 at 15:46

1 Answers1

1

You may easily execute JavaScript in the webpage context in Android.

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}`);
        }
    }
}

Here is the Playground Sample

It's also possible with iOS, but you may have to override / extend the existing {N} WebView inject JavaScript upon creating native view.

Manoj
  • 21,753
  • 3
  • 20
  • 41
  • Excellent, Manoj. You are the best helper when it comes to NativeScript! To be honest I figured out the same solution late last night - but was too tired to post it. Wanted to do it right now. So, thank you so much! – Ingmar Jan 12 '19 at 08:22
  • I see you are doing freelance works as well. I might have something now and then. How could I get in touch with you? If you are interested, you can reach me via stackoverflow@softwarea.de. – Ingmar Jan 12 '19 at 10:29