Question

我想将结帐表单提交到外部网址，应该打开一个包含结果的新窗口，但我无法让我的应用程序打开它，也不能在单独的窗口中打开，也不使用应用内浏览器。

我到目前为止所做的是创建一个带有表单内部的指令，并且从链接器函数中，在某个时刻调用submit元素。

当我在浏览器中运行时，会打开一个新窗口（就像我想要的那样）。当在设备上运行时出现问题，因为它只是替换我的视图的内容与新内容< strong>没有打开 外部窗口。

所以，问题是......在设备上运行时，如何发布此窗体打开一个新窗口（导航器）或应用内浏览器，并显示结果？

谢谢！

Answer 1

嗯，弄清楚这一点很复杂，但最后解决方案“相当”简单。我会在这里发布，以帮助其他任何面临同样问题的人。如果有人有一个更优雅的解决方案，它将受到欢迎。

我最终做的是：

使用我自己的带有角度和形状的模板打开新窗口。
在新窗口控制器中，在全局窗口对象
在旧窗口中，在loadstop事件之后，执行该回调
在新窗口中发布的表单，重定向到目标页面（这就是我想要的）。

这是代码（观察我正在使用带有表单的指令，因此我可以通过链接函数控制何时提交它，并通过服务与指令共享该数据）：

angular.module('starter', ['ionic'])


.constant('cartData', {
        redirectUrl: 'https://test.mycart.com/hpp/pay.shtml',
        redirectMethod: 'POST',
        redirectData: {
                'formParam1': 'value1',
                'formPara2': 'value2'
            }
    }
)


.controller('InitCtrl', function($cordovaInAppBrowser, $scope, cartData) {
     
    $scope.openView = function(){
    
        var counter = 0;
        if(ionic.Platform.isWebView()){

            $ionicPlatform.ready(function() {                    
                //this is the cordova in app web view
                var ref = $cordovaInAppBrowser.open('payment.html', '_blank', {location:'yes'});

                $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
                    if(counter < 1){
                        //prevent the callback to be called several times
                        $cordovaInAppBrowser.executeScript({
                            code: 'window.paymentCallback('+ angular.toJson(cartData) +');'
                        });
                        counter++;
                    }
                });
            });
        }
    };
    
})




//and then in payment.js


window.paymentCallback = null;

angular.module('payment', [])


.directive('autoSubmitForm', ['$timeout', 'autoSubmitFormDelegate', function($timeout, autoSubmitFormDelegate) {
    return {
        replace: true,
        scope: {},
        template: '<form action="{{formData.redirectUrl}}" method="{{formData.redirectMethod}}">'+
                      '<div ng-repeat="(key,val) in formData.redirectData">'+
                           '<input type="hidden" name="{{key}}" value="{{val}}" />'+
                      '</div>'+
                  '</form>',
        link: function($scope, element, $attrs) {
            
            autoSubmitFormDelegate.submitCallback = function(data) {
                $scope.formData = data;
                $timeout(function() {
                    element[0].submit();
                });
             };
        }
    }
}])

.factory('autoSubmitFormDelegate', function(){
    var delegate = {};
    
    delegate.submitCallback = null;
    
    delegate.submitForm = function(data){
        if(delegate.submitCallback){
            delegate.submitCallback(data);
        }
    }
    
    return delegate;
})

.controller('PaymentCtrl', function($scope, $timeout, $window, $sce, autoSubmitFormDelegate){


    $window.paymentCallback = function(data){
        console.log("callback called");
        data.redirectUrl = $sce.trustAsResourceUrl(data.redirectUrl);    
        $timeout(function(){
            autoSubmitFormDelegate.submitForm(data);
        });
    };
    
})

<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>


<body ng-app="starter">

  <ion-view view-title="Init">
  <ion-content>
    <h1>Init</h1>
      <button class="button button-positive" ng-click="openView()">Open new view</button>
  </ion-content>
</ion-view>
  
</body>



<script type="text/ng-template" id="payment.html">

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
    <title></title>

    <script src="../lib/angular/angular.min.js"></script>
    <script src="../js/payment.js"></script>
  </head>

  <body ng-app="payment" ng-controller="PaymentCtrl">
    <auto-submit-form></auto-submit-form>
  </body>
</html>

</script>

在Ionic（科尔多瓦）的新窗口/ inAppBrowser中发布表单

1 个答案: