JQuery 重新获得对外部弹出窗口的控制

Posted 2023-05-08

【中文标题】JQuery 重新获得对外部弹出窗口的控制

【英文标题】：JQuery Regaining control over a external pop-up

【发布时间】：2020-04-26 10:30:39

【问题描述】：

作为支付过程的一部分，我必须通过调用一个表单打开一个 twitter-bootstrap 模式，然后这个表单会打开一个外部窗口来启动该过程，银行渠道会引导用户输入他们的数据并进行购买。

我遇到的问题是我的页面被隐藏了，我无法恢复对进程的控制，因为通道窗口正在执行

window.close();

command （我无法更改或将其放在上面），所以当我更改初始时

window.open("", "payment_method_page", "width=8, height=6");

对于模式，尽管我可以在内部看到付款成功或发生了一些失败，但频道页面仍处于等待状态并徘徊。与此同时，应用程序已暂停。

我已经试过了：

$('#paymentModal').modal('hide');

和：

setTimeout(function()
    $('#paymentModal').modal('hide')
, 10000);

甚至：

$('#paymentModal').on('click', 'a', function(event) event.preventDefault(); window.open("", "payment_method_page", "width=800, height=600"););

，认为因为我的模态启动了我可以强制关闭的过程；但是外部窗口对此命令无动于衷。

如何通过 JQuery 强制关闭第三方窗口？

Javascript 初始操作

$(document).ready(function() 
      $('#payment_button_id_copy').val(#@order.payments.first.payment_button["codigoMedioPago"])
      $('#payment_frequency_copy').val("#@order.payments.first.payment_frequency")
      //window.open("", "payment_method_page", "width=800, height=600"); 
      $('#paymentModal').modal('show');     
      $('#params_form').submit();
    );

Params_Form

.hide
  = simple_form_for @order, url: main_app.payment_jump_path, html:  id: 'params_form', data: target: "#paymentModal", toggle: "modal" do
    - @order.available_payment_methods.each do |method|
      = hidden_field_tag "order[payments_attributes][][payment_method_id]", method.id, id: "payment_method_id_copy"
    = hidden_field_tag "order[payments_attributes][][payment_button_id]", nil, id: "payment_button_id_copy"
    = hidden_field_tag "order[payments_attributes][][payment_frequency]", nil, id: "payment_frequency_copy"
    button.submit-btn data-target="#paymentModal" data-toggle="modal" type="submit"

等待外部窗口关闭的Javascript

 $(document).ready(function(event)
    start_at = +new Date();
    $.poll(10000, function(retry)
      $.get('/payments/check.json', function(response, status)
        if (response['completed'] == true) 
          $('#paymentModal').modal('hide');
          $('.payment-message-waiting').hide();
          $('.payment-message-success').removeClass('hide');
          $('form#checkout_form_payment_button').submit();
         else 
          if (response['failed'] == true) 
            $('.payment-message-waiting').hide();
            $('.payment-message-error').removeClass('hide')
           else 
            retry_at = +new Date();

            delta = retry_at-start_at

            // 5 min => 300000 miliseconds => 5 * 60 * 1000
            if ( delta > 300000 )
              window.location = '/content/session-expired';
             else 
              retry();
            
          
        
      )
    )

    $.poll(5000, function(retry) 
      $.get('/payments/check_payment_presence.js', function(response, status)
        var payment_info = document.getElementById('payment-info').hasChildNodes();
        if(!payment_info) 
          retry();
        
      )
    )
  );

【问题讨论】：

仔细阅读支付网关通知。您会发现它有一个“响应 URL”，它会在其中为每个已处理的付款（包括失败的付款）发送响应请求。您还会发现响应结构有据可查。您需要做的是设置您的服务器（后端）以处理来自支付网关的所有请求。但他们两个是完全不同的（分离的）过程。您可能希望使用一个数据库来存储所有网关请求（当用户离开时），并在通过响应 URL 从网关获得结果后完成它们。

请注意，来自网关的请求不是用户旅程的一部分。用户结束付款后，可以在您的服务器上返回到“谢谢”页面，但这与响应 URL 无关，响应 URL 可能会在几分钟后出现（某些支付网关最多需要 30 分钟来处理付款)。另请注意，随着请求状态的变化，您可能会为每个付款请求收到多个响应。所有网关都很好地记录了这一点。最后但并非最不重要的一点是，不要使用Stack Overflow 获取有关付款做法的建议。唯一的权限是网关的技术人员。

【参考方案1】：

我实施的解决方案（感谢@hermes_sandoval 的帮助）是强制另一个页面在模式内的 iframe 中打开，这样如果服务需要很长时间才能处理，我的用户始终可以控制。

javascript:
  $(document).ready(function() 
    $('#payment_button_id_copy').val(#@order.payments.first.payment_button["codigoMedioPago"])
    $('#payment_frequency_copy').val("#@order.payments.first.payment_frequency")
    $('#iframeRedirect').html('');
    var iframe = "<iframe name='payment_method_page'  style='height: 660px;'/>";
    $('#iframeRedirect').append(iframe);
    $('#paymentModal').modal('show');
    $('#params_form').submit();
  );