javascript - 如何将表单数据发布到 Ionic 中的应用内浏览器？-6ren

javascript - 如何将表单数据发布到 Ionic 中的应用内浏览器？

转载作者：太空狗更新时间：2023-10-29 14:55:01

我正在使用 Ionic 框架。

我有这样的表格:

<form action='https://secure.payu.in/_payment' method="POST" target="...">
  ......
</form>

提交表单后，我需要在应用内浏览器中打开结果。

作为一个肮脏的 hack，我将表单提交目标指向当前选项卡中的 iframe，但我想避免这种情况。

理想情况下，我需要表单操作 url 在应用程序内浏览器中打开(而不是替换 webview 中的应用程序，这会导致我失去对应用程序的控制)。

我尝试在目标中输入“_blank”，但它似乎在设备上不起作用。

我也知道打开应用程序内浏览器的传统方法是执行如下操作:

var ref = window.open("http://example.com", "_blank", "location=no");

但是，我需要的是在提交表单时，应打开应用内浏览器，而不是通过 js 触发应用内浏览器。

感谢任何帮助!

最佳答案

我最近遇到了同样的问题。我通过使用 executeScript 方法注入(inject)一个表单来解决这个问题。

首先，您必须在 appbrowser 窗口中打开一个转换页面(空白页面或其他但引用了 jquery，您必须将其托管在某个地方):

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

然后，添加一个 loadstop 监听器并在那里调用 executeScript 表单(当 URL 与转换页面的 URL 匹配时)。

 var browserWindow = window.open('http://transitionpage.com', '_blank', 'location=yes,hidden=yes,hardwareback=no');
 var transitionLoaded = false;
 var finalURL = 'https://finalurl.com';
 var paramName = 'SOME_PARAM';
 var paramValue = 'asdf';
 function injectForm() {
    browserWindow.executeScript({
        code: "var $form;$form = $(document.createElement('form')).css({ display: 'none'}).attr('method', 'POST').attr('action', '" + finalURL + "');$('body').append($form);var $input = $(document.createElement('input')).attr('name', '" + paramName + "').val('" + paramValue + "');$form.append($input);$form.submit();"
    }, function() {
        //Form injected
        transitionLoaded = true;
    });
 }
 browserWindow.addEventListener('loadstop', function(event) {
    if (event.url.indexOf('http://transitionpage.com') !== -1 && !transitionLoaded) {
        injectForm();
    }
 });
 browserWindow.show();