Cordova InAppBrowser 将表单发布到 url答案

【问题标题】：Cordova InAppBrowser post form to urlCordova InAppBrowser 将表单发布到 url
【发布时间】：2016-05-30 12:59:49
【问题描述】：

我正在尝试在appbrowser 中发布值，但没有成功。它确实打开了两次浏览器并且没有发布任何数据。

   var options = {
        email: 'test@email.com',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };
    var form = document.createElement("form");
    var url = "https://testurl.com";
    form.setAttribute("method","post");
    form.setAttribute("action",url);
    for (var data in options) {
      var hiddenField = document.createElement("input");
      hiddenField.setAttribute("type", "hidden");
      hiddenField.setAttribute("name", data);
      hiddenField.setAttribute("value", options[data]);
      form.appendChild(hiddenField);
    }
    document.body.appendChild(form);
    var ref = cordova.InAppBrowser.open(url, '_blank', 'location=yes');
    if(ref){
      form.submit();
    }

【问题讨论】：

标签： javascript angularjs cordova post inappbrowser

【解决方案1】：

这是通过 InAppBrowser 使用 dataUrl 发布 HTML 表单的另一种方式：

var pageContent = '<html><head></head><body><form id="loginForm" action="YourPostURL" method="post">' +
'<input type="hidden" name="key1" value="' + YourValue1 + '">' +
'<input type="hidden" name="key" value="' + YourValue2 + '">' +
'</form> <script type="text/javascript">document.getElementById("loginForm").submit();</script></body></html>';
var pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);

var browserRef = window.cordova.InAppBrowser.open(
    pageContentUrl ,
    "_blank",
    "hidden=no,location=no,clearsessioncache=yes,clearcache=yes"
);

【讨论】：

什么是 btoa() ？
用于使用 Base64 编码数据：developer.mozilla.org/en-US/docs/Web/API/WindowBase64/…
我正在尝试上面的代码，但它不起作用，浏览器无法在我的设备中打开。
@SunilRawat：您是否尝试过 InAppBrowser-plugin 文档中的示例？它们是否有效，还是插件和您的设备/应用程序存在一般问题？
我用 InAppBrowser 插件试过了，是的，从我正在尝试的文档中，我只想使用 InappBrowser 将单个参数从 js 传递到 html。

【解决方案2】：

你可以这样做

var options = {
        email: 'test@email.com',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };

    var script = 'var form = document.createElement("form");';
     script += 'var url = "https://testurl.com";';
     script += 'form.method="post"';
     script += 'form.setAttribute("action",url);';
    for (var data in options) {
      script += 'var hiddenField = document.createElement("input");';
      script += 'hiddenField.setAttribute("type", "hidden");';
      script += 'hiddenField.setAttribute("name","' + data +'");';
      script += 'hiddenField.setAttribute("value","' + options[data] + '");';
      script += 'form.appendChild(hiddenField);';
    }
    script += 'document.body.appendChild(form)';
    var ref = cordova.InAppBrowser.open(url, '_blank', 'location=yes');
script += 'form.submit();';

然后在 inappbrowser 中使用 loadstop 事件执行脚本，像这样

ref.addEventListener('loadstop', onLoadStopFunction);

onLoadStopFunction(params){
   ref.executeScript({ code: script }, executeScriptCallBack);
}
function executeScriptCallBack(params) {

    if (params[0] == null) {

        //error message
    }

}

还有很多其他方法可以做到这一点。

【讨论】：

还有什么其他方法。 ?我无法在 InappBrowser 中提交表单。请建议一些其他方法

【解决方案3】：

您需要使用执行脚本在 loadstop 或 load start 事件上填写动态字段值。

首先绑定事件，当你打开链接时：

{
  var url= 'yourURL';
  if( device.platform === "Android"){
         ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,hardwareback=no,zoom=no');
  }else{
        ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,closebuttoncaption=Go back to App,toolbar=yes,presentationstyle=formsheet');
  }


  ref.addEventListener('loadstart',onBrowserLoadStart);
  ref.addEventListener('loadstop',onBrowserLoadStop);
  ref.addEventListener('loaderror', onBrowserError);
  ref.addEventListener('exit', onBrowserClose);
}

然后在 onBrowserLoadStop 上，检查它是否是发布表单的正确页面：

function onBrowserLoadStop(event){


var cUrl= 'myformURL';
if(event.url===cUrl){

    var msg;
    var newHtml=YourFormHTML;
    var withoutScriptHtml = $(newHtml.bold());
    withoutScriptHtml.find('script').remove();


    msg=    " var formDiv = document.createElement('div'); formDiv.id='someFormDiv'; ";
    msg+=   " formDiv.innerHTML='" + withoutScriptHtml.html()+ "';" ;
    msg +=  " document.getElementById('outerDiv').appendChild(formDiv);"; //outerDiv should be on the html page residing at cUrl
    msg +=  " document.getElementById('yourFormName').submit();";
    //console.log("the message: "+ msg);


    ref.executeScript(
        {
            code: msg
        },
        function(values){
            console.log(JSON.stringify(values));
        }
    );


}
}

【讨论】：

【解决方案4】：

从第 1 页开始：

window.localStorage.setItem('tempForm', JSON.stringify(form));
location.replace('page2.html');

2 页：

var passedForm = $.parseJSON(window.localStorage.getItem('tempForm'));

您可以对所有对象执行此操作。

【讨论】：