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

Question

我不太确定如何恰当地命名这个问题。

我想讨论与另一个网站及时POST/GET数据的最佳方法，并使用jQuery作为主力。当然，我愿意接受更好的方法和库的建议，尽管是基于Javascript或c#的。

让我试着设置这个场景。

两个站点共享子域'a.company'，但它们是两个独立的IIS7站点。

网站1

• a.company.com/products
• asp MVC 5
• 包含一个'puesdo'购物车方法，用于收集想要传递到站点2的产品。

网站2

• a.company.com/checkout
• 由供应商预编译，无法访问CS文件，但可以修改aspx/masterfile文档
• ASP Webforms
• 有有限的API，将URL转换为产品并添加到它的购物车。
• 例子a.company.com/checkout/product/qty

目前，当按钮'proceed to checkout'在站点1上被点击时，jQuery函数循环遍历每个购物车项目并产生一个类似的url: a.company.com/checkout/product/qty，然后将url加载到文档的iframe中。这个循环也有一个setTimeout函数

jQuery(function(){
  $('#proceed').on('click', function(){
       // set integer for timeout
       n = 2;
       $(cartobject).each(function(i){
              q = item.get('qty');
              p = item.get('productid');
              // delay loop
              setTimeout(function(){ 
                   ProceedItems(q,p) 
              }, 1000 * (i + 1));
              n = n + parseInt(i);
       });
       n = n * 2 + "000"; // from each function
       // delay redirect so loop can finish
       setTimeout(function(){
            RedirectCustomerToCheckout();
       }, n );

  });
  // Proceed each item to Checkout API
  function ProceedItems(quantity, productid)
  {
      $("#iframe").attr("src","http://a.company.com/checkout/" + productid + "/" + quantity);
  }
  // when loop as finished :: take customer to checkout process.
  function RedirectCustomerToCheckout()
  {
       window.location.href = "http://a.company.com/checkout";
  } 
});

这个方法是有效的，我很欣赏，整个"如果它没有坏"-但我的焦虑一直在边缘，因为我认为一定有更好的方法。也许添加代码来检查iframe是否完成了它的加载/回发?

主要关注的是:iframe没有加载(也没有产生任何反馈)-页面重定向用户没有完成循环(因为连接缓慢)?

在确保加载完成方面，使用带有应答成功/失败/完成检查的Ajax POST/GET函数是否更安全?

希望能得到一些建议。

Remote Address:10.0.0.100:800
Request URL:http://a.company.com/checkout/46026/1
Request Method:GET
Status Code:302 Found
GET /checkout/46026/1 HTTP/1.1
Host: a.company.com
Connection: keep-alive
Accept: */*
Origin: http://a.company.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Referer: http://a.company.com
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

Answer 1

我假设你网站上的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';
    }
});

Answer 2

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

这里我使用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";
    }
});

希望这对你有帮助!

Answer 3

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

Answer 4

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

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

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

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