使用超时循环将数据加载到iframe的更好选项

我假设你网站上的iframe是隐藏的，用户实际上看不到它。
我将绝对使用ajax而不是使用iframe。

这个例子将并行执行所有请求(在chrome中一次最多6个)，如果它们都成功完成，则调用RedirectCustomerToCheckout，或者如果任何请求失败或通过默认的ajax超时，则调用onFailedCheckout。

如果你想使用每个请求超时，可以使用$.ajax而不是$.get。

jQuery(function () {
    $('#proceed').on('click', function () {
        var checkouts = [];
        $(cartobject).each(function (item) {
            var q = item.get('qty');
            var p = item.get('productid');
            checkouts.push($.get('http://a.company.com/checkout/' + p + '/' + q));
        });
        // $.when will wait for all checkouts to complete
        $.when.apply($, checkouts)
           .done(RedirectCustomerToCheckout)
           .fail(function onFailedCheckout() {
                alert('stuff broke !');
           });
    });
    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = 'http://a.company.com/checkout';
    }
});

由于两者共享相同的域，您可以尝试这样做。

这里我使用jQuery的.load与回调。

而不是在.each中调用iframe加载。我使用了'Q'数据结构。

// our cartQ
var cartQ = new Array();

jQuery(function () {
    $('#proceed').on('click', function () {
        // re init the Q
        cartQ = new Array();
        // add each cartobject to Q
        $(cartobject).each(function (i) {
            cartQ.unshift(this);
        });
        // begin loading iframe.
        loadFromQ();
    });

    function loadFromQ() {
        if (cartQ.length !== 0) {
            var item = cartQ.pop();
            q = item.get('qty');
            p = item.get('productid');
            // pass same function as callback
            ProceedItems(q, p, loadFromQ);
        } else {
            RedirectCustomerToCheckout();
        }
    }
    // Proceed each item to Checkout API
    function ProceedItems(quantity, productid, callback) {
        $(document.body).append("<IFRAME id=p" + productid + " ...>");
        $('iframe#p' + productid).attr("http://a.company.com/checkout/" + productid + "/" + quantity, url);
        // call callback after loaded.
        $('iframe#p' + productid).load(function () {
            callback(this);
        });
    }
    // when loop as finished :: take customer to checkout process.
    function RedirectCustomerToCheckout() {
        window.location.href = "http://a.company.com/checkout";
    }
});

希望这对你有帮助!

据我所知，我认为你主要是在第一个网站上做演示，从另一个网站结账。在我看来，您应该使用jquery将产品模板添加到用户产品中，同时向产品结帐url发送jquery get (ajax)请求。所有对产品结帐的调用都会将产品添加到同一购物车中，最后转到结帐将用户重定向到用户购物车结帐页面。我不建议使用iframe，除非你有非常特殊的理由。

如果你所做的一切都是在一个url上做一个get请求，那么为什么不只是在你的页面上添加一个带有url和查询字符串的图像作为img src

<img src="http://...your endpoint url?querystring..." class="hidden" >

您可以使用img onload事件来获得服务器发送响应的确认，这将为您提供在onload事件上重新调用的异步循环的功能，并在所有项目发送时将用户重定向到结帐。

或者您可以将与购物车中的项目一样多的图像附加到页面上，监听所有的onload事件，并在所有加载时重定向。