ajax图像加载破坏完整的SSL

Question

我的网站除了从这个ajax调用中拉出的图像外，还有完整的SSL。

    $.ajax({
        url : 'index.php?route=taobao/taobao/related_products&product_id=<?php echo $product_id;?>&cid=<?php echo $cid;?>&tm=<?php echo $tm;?>',
        dataType : 'html',
        beforeSend : function(){
            $('#related_products').append('<div class="loading_related" style="margin:15px auto;text-align:center"><img src="public/image/load5.gif" /></div>');
        },
        complete : function(){
            $('.loading_related').remove();

            $('#related_products img').each(function() {
                var src = this.src.replace(/(http\:\/\/img\d\.tbcdn\.cn)/, "https://img.alicdn.com");
                $(this).attr('src', src);
            });
        },
        success : function(html){
            $('#related_products').html(html);
        }
    });

我无法访问模板文件来更改url，因此我通过

$('#related_products img').each(function() {
    var src = this.src.replace(/(http\:\/\/img\d\.tbcdn\.cn)/, "https://img.alicdn.com"); 
    $(this).attr('src', src);
});

这工作得很好，整个站点将是ssl，但我遇到了混合内容错误(我猜是因为闪存的不安全请求？)有没有什么方法可以让我的站点完全没有mixed-content错误？

Answer 1

在将这些图像附加到DOM之前，请尝试设置这些图像的URI协议。下面是一个示例：

$.ajax({
  url: 'index.php?route=taobao/taobao/related_products&product_id=<?php echo $product_id;?>&cid=<?php echo $cid;?>&tm=<?php echo $tm;?>',
  dataType: 'html',
  beforeSend: function() {
    $('#related_products').append('<div class="loading_related" style="margin:15px auto;text-align:center"><img src="public/image/load5.gif" /></div>');
  },
  success: function(html) {
    var newHTML = $('<div/>', {
      html: html
    }).find('img').prop('src', function() {
      return this.src.replace(/(http\:\/\/img\d\.tbcdn\.cn)/, "https://img.alicdn.com");
    }).end().html();

    $('#related_products').html(newHTML);
  }
});

顺便说一句，如果一次只有一个元素.loading_related，那么你的完整回调在这里就没有用了。