iOS - WebView - Forms Will Not Submit Using Post Method

plugins

#1

nativescript-webview-utils Submit form

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


import { LoggerService } from "../shared/logger.service";
import { GlobalConfig } from "../shared/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 "../interfaces/WebViewParams.interface";
import { IRouteChange } from "../interfaces/RouteChange.interface";
import { WebViewUtils } from "nativescript-webview-utils";
import * as utils from "utils/utils";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {

    private webViewInterface;

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

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

    constructor(private page: Page, private logger: LoggerService, 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("Authorization", GlobalConfig.MobileToken);
            headers.set("X-EDIB-App", GlobalConfig.MobileDevice);
            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
                };
                // android 

                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>