javascript - JQuery 重新获得对外部弹出窗口的控制
问题描述
作为支付过程的一部分,我必须通过调用一个表单来打开一个 twitter-bootstrap 模式,这个表单又会打开一个外部窗口来启动该过程,银行渠道会引导用户输入他们的数据并进行购买。
我遇到的问题是我的页面被隐藏了,我无法恢复对进程的控制,因为通道窗口正在执行
window.close();
命令(我无法更改或将其放在上面),所以当我更改初始
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();
}
})
})
});
解决方案
我实施的解决方案(感谢@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();
});
推荐阅读
- elasticsearch - 使用elasticsearch 7实现指数退避重试的最佳方法
- sql - 我可以在 postgres 语句中的公式上使用过滤器吗?
- android - 查询 Mediastore.Download 表,但没有结果
- arrays - 如何在不破坏我的结构的情况下将特定单元格排除到 BigQuery 中的数组数组中?
- python - 无法在 PyCharm 中的 Django 模型管理器上自动完成
- html - HTML/CSS 表格垂直边距
- multilabel-classification - AutoKeras 结构化数据分类类
- touch - Google Home 中 REMOTECONTROL 的触控不会改变
- javascript - window.open() 中的“”和“_blank”有什么区别?
- django - Django REST Framework:处理自定义权限类的异常