iOS - WebView - Forms Will Not Submit Using Post Method

[Fenikkusu]

I cannot seem to figure out this issue. I've a very simple WebView with a very simple load to it. It's loading perfectly fine. However, if I try to submit a form with the webview, the form submits using get, not post. Similarly, submitting the form in android doesn't work the first time. It works if I immediately submit the form again.

import { Logger } from "../../modules/shared/services/logger.service";
import { GlobalConfig } from "../../modules/shared/services/global_config.service";
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { Page } from "ui/page";
import { WebView, LoadEventData } from "ui/web-view";
import { WebViewInterface } from "nativescript-webview-interface";
import { Router, NavigationExtras, ActivatedRoute } from "@angular/router";
import { IWebViewParams } from "../../modules/webview/interfaces/WebViewParams.interface";
import { IRouteChange } from "../../modules/webview/interfaces/RouteChange.interface";
import { WebViewUtils } from "nativescript-webview-utils";
import * as utils from "utils/utils";

@Component({
    selector    : 'web',
    templateUrl : 'pages/webview/webview.component.html'
})
export class WebViewComponent implements OnInit {
    private webViewInterface;

    private queryParams: IWebViewParams = {redirectUrl : ''};

    @ViewChild('webFrame') webFrame: ElementRef = null;

    constructor(private page: Page, private logger : Logger, private router : Router, private route: ActivatedRoute) {
        this.logMessage('Constructor');

        this.router.events.subscribe((event) => {
            this.logMessage('Router Events');
            this.logMessage(event);
        });


        this.route.queryParams.subscribe((params: IWebViewParams) => {
            this.logMessage('Query Params');
            this.logMessage(params);
            this.queryParams = params;
        });
        this.logMessage('Constructor - Done');
    }

    logMessage(data) {
        this.logger.log('WebView', data);
    }

    ngOnInit() {
        this.logMessage('Init');
        this.page.actionBarHidden = true;
    }

    loadWebFrame() {
        this.logMessage('After View Init');

        setTimeout(() => {
            this.webFrame.nativeElement.height               = this.page.height;
            this.webFrame.nativeElement.cachePagesOnNavigate = false;

            //Disabling Zoom On Android
            if (this.webFrame.nativeElement.android) {
                this.logMessage('Disabling Android Zoom');
                this.webFrame.nativeElement.android.getSettings().setBuiltInZoomControls(false);
            }

            let webView = <WebView>this.webFrame.nativeElement;
            let headers = new Map();
            headers.set("X-Mobile-Header", GlobalConfig.MobileToken);
            WebViewUtils.addHeaders(webView, headers);

            this.initWebViewInterface();

            this.webFrame.nativeElement.on(
                WebView.loadStartedEvent,
                (args: LoadEventData) => {
                    this.logMessage('Loading: ' + args.url);
                }
            );

            this.webFrame.nativeElement.on(
                WebView.loadFinishedEvent,
                (args: LoadEventData) => {
                    if (!args.error) {
                        this.logMessage('Loaded!');
                    } else {
                        this.logMessage('Error: ' + args.error);
                    }
                }
            )
        });
    }

    initWebViewInterface() {
        this.logMessage('WebViewInterface Init');

        let redirectUrl = this.queryParams.redirectUrl ? GlobalConfig.ServiceUri + this.queryParams.redirectUrl : GlobalConfig.StartUri;
        this.logMessage('Redirect URL: ' + redirectUrl);

        this.webViewInterface = new WebViewInterface(this.webFrame.nativeElement, redirectUrl);

        let self = this;

        self.webViewInterface.on(
            'changeRoute', (routerParams: IRouteChange) => {
                this.logMessage('changeRoute');

                let navigationExtras: NavigationExtras = {
                    queryParams: routerParams
                };

                this.logMessage(JSON.stringify(routerParams));

                self.router.navigate([routerParams.url], navigationExtras).then(function(data) {
                    //Woot!
                    console.log('data', data);
                }).catch(function(data) {
                    //Todo: Add In Error Page

                    self.logMessage('Failed');
                    self.logMessage(data);
                });
            }
        );

        self.webViewInterface.on(
            'openBrowser',
            (routerParams: IRouteChange) => {
                this.logMessage('Open Browser: ' + routerParams.url);
                utils.openUrl(routerParams.url)
            }
        );
    }
}

<ActionBar>
    <ActionBar title="Title">
        <NavigationButton (tap)="onTap">&lt;</NavigationButton>
    </ActionBar>
</ActionBar>
<GridLayout columns="*" rows="*">
    <web-view #webFrame height="100%" (loaded)="loadWebFrame()"></web-view>
</GridLayout>

"dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-background-http": "^3.1.0",
    "nativescript-imagepicker": "^4.0.1",
    "nativescript-purchase": "^2.0.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-webview-interface": "~1.4.1",
    "nativescript-webview-utils": "^2.0.3",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.5.2",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "nativescript-dev-typescript": "~0.6.0",
    "typescript": "~2.6.2",
    "babel-traverse": "~6.26.0",
    "babel-types": "~6.26.0",
    "babylon": "~6.18.0",
    "lazy": "~1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*"
  }

<form method="post" action="">
    <?php if (isset($_POST['text'])): ?>
        <?php echo $_POST['text']; ?>
    <?php endif; ?>
    <input type="text" name="text" />
    <input type="submit" name="Go" />
</form>

[pap5508]

I am facing the same error... form submits using get, not post... @Fenikkusu : how you resolve from your side.. ?

[Fenikkusu]

@pap5508 , I ended up downgrading tns-core-modules to 3.3.0 (Exactly, I don't know if it can be higher). Back in January they merged the update to change over the WebView for iOS. I think this change over is what caused it to break. Downgrading allowed it to work as previously.

[pap5508]

@Fenikkusu : I do not know what is wrong from my side.. bt I also tried after downgrading to your suggested version. nothing is working.. Do you have any suggestion how can I resolve this ?
could you please share me your working sample project. ?

[Fenikkusu]

Unfortunately, I do not have any sample projects or suggestions. The best thing I can tell you is to do a wipe. Remove the platforms directory and the node_modules directory and ensure that your package.json file is correct, then run tns install

[alonstar]

I have the same issue on Android when I used nativescript-webview-utils to add user-agent.

[davecoffin]

Has anybody solved this with a hack or workaround?

[davecoffin]

@NickIliev do you have any thoughts on this? and suggestions for a hack? I'm not familiar with WKWebView, if youh can point me in the right direction I'd be happy to PR something back to core but I need to resolve this for a project.

[NickIliev]

@davecoffin it looks like this is a native issue with WKWebView (at least the same issue is noted here) and it might be related to this bug. Still, let me know if you have a testable app so I could try to investigate this one locally.

[davecoffin]

Wow I can’t believe this has been a bug in WKWebView for years. This comment seems promising https://stackoverflow.com/a/40798327, using navigationAction.request.allHTTPHeaderFields
I will create a repo with an example for you today.

FYI I did revert the webview code in my project to the webview in core modules 3.3 which uses UIWebView, but that didn’t work, $_SERVER[‘REQUEST_METHOD’] was always GET.

Thanks for your help on this.

[davecoffin]

Ok @NickIliev the plot thickens. I was using @EddyVerbruggen 's plugin called nativescript-webview-utils to add some custom headers to the webview, and thats the culprit. Normal webview works fine. I'm wondering if you could be so kind as to recommend how to modify this plugin to make it work... I think the problem exists at line 29: https://github.com/davecoffin/nativescript-webview-utils/blob/master/src/webview-utils.ios.ts

Basically, the navigation is being canceled when the navigationAction.navigationType is 1 (formSubmitted), because the headers arent added. It then adds the headers, but the POST is gone by then. Do you have any ideas on how to modify this?

[johny8228]

Hello,

I'm having the same issue with the webview in iOS, does not perform POST actions...
Does anyone found a workaround for this?

Thank you,
Johny