通过cordova inappbrowser在WKWebview中表单POST数据失败答案

【问题标题】：Form POST data is failing in WKWebview through cordova inappbrowser通过cordova inappbrowser在WKWebview中表单POST数据失败
【发布时间】：2020-09-09 20:27:50
【问题描述】：

我正在使用 cordova inAppbrowser(v4.0.0) 插件将数据发布到外部 url。表单帖子在 UIWebview 中运行良好，但在 WKwebview 中失败。帖子数据被完全忽略。

let formContent = '<form action="' + URL + '" name=“myForm” id="myForm" method="post" target="secureiframe">';
    let element = document.createElement("div");
    let hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", “username”);
    hiddenField.setAttribute("value", “test”);
    element.appendChild(hiddenField);
    formContent += element.innerHTML;
    formContent += '</form>';
    let formContentUrl = 'data:text/html;base64,' + btoa(formContent);

let options = {location: 'no', usewkwebview: 'yes'}


var browser = this.inAppBrowser.create(formContentUrl, "_blank", options);


browser.on('loadstop').subscribe(event => {

       browser.executeScript({code:"document.getElementById('myForm').submit();"} );

 });

【问题讨论】：

标签： cordova post wkwebview inappbrowser

【解决方案1】：

由于某种原因，当源为 null 时，WKWebView 会在 post 请求中剥离正文。

这里的问题是data-uri：

let formContentUrl = 'data:text/html;base64,' + btoa(formContent);

当您加载此数据 url 时，原点将设置为不透明，即为 null，因此 WKWebView 正在剥离帖子正文。

要解决此问题，您可以在 WKWebView 中加载原始 URL，并在“loadstop”事件中构建表单，将其添加到 DOM 中，然后触发提交事件。这将确保源已设置并且 WKWebView 不会剥离请求正文。

示例代码：

constbrowser = this.iab.create('https://your-app-server-where-to-post-the-form', '_blank', options);
     
    browser.on('loadstop').subscribe((event) => {
    browser.executeScript({
    code:`
     var form = document.createElement("form");
     var element1 = document.createElement("input");
     var element2 = document.createElement("input");
     
     form.method = "POST";
     form.action = "your-form-action-route";
     
     element1.value="un";
     element1.name="un";
     form.appendChild(element1);
     
     element2.value="pw";
     element2.name="pw";
     form.appendChild(element2);
     
     document.body.appendChild(form);
     
     form.submit();
     `,
     });
     });

【讨论】：