弹出窗口阻止问题(这不应该发生吗?)

发布于 2024-12-29 02:15:53 字数 6779 浏览 4 评论 0原文

首先澄清一下,我正在尝试打开一个弹出窗口来响应用户事件。

我正在 Facebook 上开发一个涉及电子商务交易的应用程序,由于与我的 EV SSL 证书相关的原因,我必须在一个新的、完全安全的窗口中打开我们的计费终端。因此,流程如下:

  1. 用户选择“新卡”作为付款方式,并输入收件人的送货地址
  2. 用户单击“下订单”,该命令使用 AJAX 调用来验证地址,如果有效,则将其与数据库同步。
  3. 如果地址有效(AJAX 成功:function()),并且用户选择“新卡”,则应该使用 window.open 调用打开安全计费终端。

据我了解,大多数现代浏览器(包括 Chrome、Firefox 和 Safari)都应该遍历链以确定源事件是否是用户发起的(在本例中,它是单击事件),但是尽管如此,我似乎无法阻止此弹出窗口被阻止,并且我的用户在弄清楚发生了什么情况时遇到了很大的麻烦。

不幸的是,当弹出窗口被阻止时,Chrome 并不会让它变得那么明显,因此大多数用户不会注意到这一点,并会认为该应用程序只是“损坏”。

有什么想法吗?距离发布还有一周,我已经绝望了...

[编辑] 这是供参考的代码:

/* -- Step 3: Complete Checkout Click -- */

$('div.finishGroupOrder').live('click', function() {

    /* User is Click-Happy? */

    if ( $('div#billing-contents div#loader').length ) {

        alert('Your order is processing.  We know it\'s hard, but please be patient.');
        return false;

    }       

    var paymentMethod   = $('input[name="method"]:checked').val();                      // Payment Method Selected ( Card on File / New / PayPal )

    var secureSession   = $(this).attr('secure');                                   // Secure Session ID

    var orderData       = { addressSelection: $('input[name="address"]:checked').val(),
                        price: $('div.price').attr('value')  };

    /* Form Validation */

    switch( orderData.addressSelection ) {

        case 'new': // User chose to enter address manually

            var allInputs = $('div#new-address').find('input:not(#address2), select');
            var validInputs = $('div#new-address').find('input[value!=""]:not(#address2), select[value!=""]');

            if ( allInputs.length === validInputs.length ) {                            // All inputs are valid, capture their contents

                allInputs.removeClass('bad-value');

                var address = {   phone: $('input#phone').val(),
                               address1: $('input#address1').val(),
                               address2: $('input#address2').val(),
                               city: $('input#city').val(),
                               state: $('select#state').val(),
                               zip: $('input#zipcode').val()  };

                var validatedAddress = validation.validateAddress(address);

                if (validatedAddress) {

                    address.address1    = validatedAddress.address1;
                    address.address2    = validatedAddress.address2;
                    address.city        = validatedAddress.city;
                    address.state       = validatedAddress.state;
                    address.timeOffset  = validatedAddress.timeOffset;              // Time offset from EST (PST = -3, EST = 0, etc.)

                    $('input#timezone').val(address.timeOffset);

                } else {

                    allInputs.addClass('bad-value');
                    return false;

                }

            } else {                                                            // Some inputs are invalid, prompt the user to fix them

                allInputs.filter(function() { return ($.inArray( this, validInputs ) > -1) ? false : true; }).addClass('bad-value');
                return false;

            }

            break;

        case 'verified':    // User chose to ship to verified address

            var address = {   address1: 'verified'  };

            break;

        default:

            alert('Please choose an address where you want the flowers to be delivered.');
            return false;

            break;

    }


    /* Sync Order With Updated Address Information */

    $.ajax({    type: 'POST',
            url: location.protocol + '//' + location.host + '/_ajax/order.ajax.php',
            data: 'action=update_order&' + $.param( address ),

            success: function() {

                /* Load Selected Payment Method */

                switch( paymentMethod ) {

                    //case 'paypal': paypal(); break;

                    case 'member':
                        newGroupOrderDialogActions.payAsMember();
                        break;

                    case 'newCard':
                        newGroupOrderDialogActions.payWithCard( secureSession );
                        //$('div.group-secure-terminal').trigger('click');
                        break;

                }

            }
    });

还有 newGroupOrderActions.payWithCard()...

/* -- Pay With a New Credit Card -- */

                                payWithCard: function( session ) {

                                    var windowHeight = 769;         // Terminal Height
                                    var windowWidth = 638;          // Terminal Width
                                    var w = screen.availWidth;      // Available Screen (W)
                                    var h = screen.availHeight;     // Available Screen (H)
                                    var top = (h-windowHeight)/2;       // Center Positioning
                                    var left = (w-windowWidth)/2;       // Center Positioning


                                    /* Open Secure Order Terminal */

                                    var secureTerminal = window.open('https://secure.mydomain.ly/contribute?id=' + session, 'myCompany: Secure Checkout', 'menubar=0,toolbar=0,location=1,resizable=0,scrollbars=1,height='+windowHeight+',width='+windowWidth+',top='+top+',left='+left);


                                    /* Check for Secure Order Terminal Close Event */

                                    var onFinish = setInterval(function() {

                                        try {
                                            if (secureTerminal.closed) {                                                                    // Window has been unloaded, check the order to see if it has been approved

                                                clearTimeout(onFinish);

                                                $.ajax({    type: 'POST',
                                                        url: location.protocol + '//' + location.host + '/_ajax/redirect.ajax.php',
                                                        data: 'action=group_order_status_redirect',
                                                        success: function(redirect) { newGroupOrderDialogActions.publishOrder( redirect ) }         // If redirect is not null, order was successful.  Redirect to order page   
                                                });
                                            }
                                        } catch (e) {}

                                    }, 200);

                                },

First to clarify, I am trying to open a pop-up in response to a user event.

I am developing an application on Facebook that involves e-commerce transactions, and for reasons related to my EV SSL certificates, I have to open our billing terminal in a new, fully-secure window. As such, the process goes as follows:

  1. User selects "new card" as payment method and enter's the recipient's shipping address
  2. User clicks "Place Order," which uses an AJAX call to validate the address, and IF valid, syncs it with the database.
  3. IF address is valid (AJAX success: function()), and the user selected "new card," then the secure billing terminal is supposed to open using a window.open call.

As I understand it, most modern browsers including Chrome, Firefox, and Safari are supposed to traverse up the chain to determine if the source event was user-initiated (in this case, it was--a click event), however despite this I cannot seem to prevent this pop-up from getting blocked and my users are having a great deal of trouble figuring out what's going on.

Unfortunately Chrome doesn't make it all that noticeable when a pop-up is blocked, so most users will not notice this and will assume that the app is simply "broken."

Any ideas? We're a week from launch and I'm getting desperate...

[EDIT] Here is the code for reference:

/* -- Step 3: Complete Checkout Click -- */

$('div.finishGroupOrder').live('click', function() {

    /* User is Click-Happy? */

    if ( $('div#billing-contents div#loader').length ) {

        alert('Your order is processing.  We know it\'s hard, but please be patient.');
        return false;

    }       

    var paymentMethod   = $('input[name="method"]:checked').val();                      // Payment Method Selected ( Card on File / New / PayPal )

    var secureSession   = $(this).attr('secure');                                   // Secure Session ID

    var orderData       = { addressSelection: $('input[name="address"]:checked').val(),
                        price: $('div.price').attr('value')  };

    /* Form Validation */

    switch( orderData.addressSelection ) {

        case 'new': // User chose to enter address manually

            var allInputs = $('div#new-address').find('input:not(#address2), select');
            var validInputs = $('div#new-address').find('input[value!=""]:not(#address2), select[value!=""]');

            if ( allInputs.length === validInputs.length ) {                            // All inputs are valid, capture their contents

                allInputs.removeClass('bad-value');

                var address = {   phone: $('input#phone').val(),
                               address1: $('input#address1').val(),
                               address2: $('input#address2').val(),
                               city: $('input#city').val(),
                               state: $('select#state').val(),
                               zip: $('input#zipcode').val()  };

                var validatedAddress = validation.validateAddress(address);

                if (validatedAddress) {

                    address.address1    = validatedAddress.address1;
                    address.address2    = validatedAddress.address2;
                    address.city        = validatedAddress.city;
                    address.state       = validatedAddress.state;
                    address.timeOffset  = validatedAddress.timeOffset;              // Time offset from EST (PST = -3, EST = 0, etc.)

                    $('input#timezone').val(address.timeOffset);

                } else {

                    allInputs.addClass('bad-value');
                    return false;

                }

            } else {                                                            // Some inputs are invalid, prompt the user to fix them

                allInputs.filter(function() { return ($.inArray( this, validInputs ) > -1) ? false : true; }).addClass('bad-value');
                return false;

            }

            break;

        case 'verified':    // User chose to ship to verified address

            var address = {   address1: 'verified'  };

            break;

        default:

            alert('Please choose an address where you want the flowers to be delivered.');
            return false;

            break;

    }


    /* Sync Order With Updated Address Information */

    $.ajax({    type: 'POST',
            url: location.protocol + '//' + location.host + '/_ajax/order.ajax.php',
            data: 'action=update_order&' + $.param( address ),

            success: function() {

                /* Load Selected Payment Method */

                switch( paymentMethod ) {

                    //case 'paypal': paypal(); break;

                    case 'member':
                        newGroupOrderDialogActions.payAsMember();
                        break;

                    case 'newCard':
                        newGroupOrderDialogActions.payWithCard( secureSession );
                        //$('div.group-secure-terminal').trigger('click');
                        break;

                }

            }
    });

And the newGroupOrderActions.payWithCard()...

/* -- Pay With a New Credit Card -- */

                                payWithCard: function( session ) {

                                    var windowHeight = 769;         // Terminal Height
                                    var windowWidth = 638;          // Terminal Width
                                    var w = screen.availWidth;      // Available Screen (W)
                                    var h = screen.availHeight;     // Available Screen (H)
                                    var top = (h-windowHeight)/2;       // Center Positioning
                                    var left = (w-windowWidth)/2;       // Center Positioning


                                    /* Open Secure Order Terminal */

                                    var secureTerminal = window.open('https://secure.mydomain.ly/contribute?id=' + session, 'myCompany: Secure Checkout', 'menubar=0,toolbar=0,location=1,resizable=0,scrollbars=1,height='+windowHeight+',width='+windowWidth+',top='+top+',left='+left);


                                    /* Check for Secure Order Terminal Close Event */

                                    var onFinish = setInterval(function() {

                                        try {
                                            if (secureTerminal.closed) {                                                                    // Window has been unloaded, check the order to see if it has been approved

                                                clearTimeout(onFinish);

                                                $.ajax({    type: 'POST',
                                                        url: location.protocol + '//' + location.host + '/_ajax/redirect.ajax.php',
                                                        data: 'action=group_order_status_redirect',
                                                        success: function(redirect) { newGroupOrderDialogActions.publishOrder( redirect ) }         // If redirect is not null, order was successful.  Redirect to order page   
                                                });
                                            }
                                        } catch (e) {}

                                    }, 200);

                                },

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文