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

如何解决通过cordova inappbrowser在WKWebview中的表单POST数据失败

我正在使用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();"} );

 });

解决方法

由于某些原因，当原点为null时，WKWebView会剥离发布请求中的正文。

这里的问题是data-uri：

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

加载此数据url时，原点将设置为opaque（不为null），并且由于WKWebView会剥离帖子正文。

要解决此问题，您可以在WKWebView中加载原始URL，然后在“ loadstop”事件中构造表单，将其添加到DOM中，然后触发Submit事件。这样可以确保已设置原点，并且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();
     `,});
     });