Question

我想借助ajax动态加载一些模板文件。我已经添加了ajax $.get方法来加载html文件，该方法在safari浏览器以外的所有浏览器中都可以正常工作。

在野生动物园中，我第一次打开url时出现“无法加载资源：已取消” 错误。但是，当我再次刷新页面后，它将加载所有文件。

当我使用http请求而不是https打开URL时，它可以在safari浏览器中首次加载模板文件。

仅当我使用 https 打开网址时，才会发生此问题。我已经成功安装了证书，并且可以在其他浏览器上正常工作。甚至在野生动物园也没有证书问题。

这是我的代码

var decorator = {
  init: function(book, cd) {
    this.loadTPL(cd);
  },
  tpl: {
    btnStart: "tpl/startBtn.html",
    interfaceTpl: "tpl/interfaceTpl.html",
    topMenu: "tpl/topMenu.html",
    topMenuItem: "tpl/topMenuItem.html",
  },
  loadTPL: function(cbTpl) {
    var self = this;
    var objTpl = {};

    async.forEachOf(this.tpl, function(value, key, callback) {
      $.get(value, {}, function(data) {
        //alert("Load was performed.");
        //console.log(value, data);
        objTpl[key] = data;
        callback();
      });

    }, function(err, results) {
      if (err) {
        console.log(err);
      }
      self.tpl = objTpl;
      cbTpl(err);
    });
  }
}

有什么想法吗？

Answer 1

当您的方法“应该”起作用时，它会进入JS怪异的未知区域，特别是使用异步库。因此，我的解决方案基本上涉及所有重构。相反，您可以使用jQuery Promise触发所有需要的获取，然后使用Promise处理程序处理其中每个响应/错误。

例如：

$(templatesToLoad).each(function (element, index) {
  $.ajax({element.url, cache: false })
    .done(function (result) {
        objTpl[key] = result;
        element.allback(); // callback for each template
    })
    .fail(function () {
     alert( "error" );
    })
    .always(function () {
     alert( "completed" );
    });
});

注意：$。获取它只是$ .ajax的糖代码。默认情况下，除非指定了其他方法，否则$ .ajax会执行获取。

无论使用哪种浏览器，浏览器都会处理这些调用，并会根据每种浏览器的功能和限制，在允许的情况下尽快触发每个调用，因此无需担心特定的实现。

作为一般规则，请始终记住检查呼叫和响应的编码及其格式，json，文本或用作响应格式的任何内容。

Answer 2

这可能是缓存/超时问题。尝试将ajax超时设置为较大的值。如果可行，请退后直到找到最佳位置。

Ajax获取请求无法在HTTPS的Safari中使用

2 个答案: