2

如果从第一个位置加载失败，是否可以尝试从备用位置加载 JavaScript 源文件？

例如，在 HTML 文件中，我可能有：

<script type="text/javascript" src="http://domain.com/javascript_file.js"></script>

但如果加载失败，我可以尝试从第二个位置加载文件：

<script src="directory/javascript_file.js" type="text/javascript"></script>

谢谢！

4

2 回答 2

2

这是可能的。

我可能会这样处理它：

首先，创建一个函数来加载脚本。

function loadScript(src) {
    var s = document.createElement('script'), x;
    s.type = 'text/javascript';
    s.async = true;
    s.src = src;
    x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(x, s);
}

这对于加载脚本来说已经足够好了，但是我们怎么知道它什么时候完成加载，或者根本没有加载呢？

让我们添加两个回调参数（一个代表成功，一个代表失败）和一个超时参数。我们还需要在我们的script元素上附加一个事件监听器，以便在它加载时触发回调。

function loadScript(src, onSuccess, onFail, timeout) {
    var s = document.createElement('script'), x, loaded;
    s.type = 'text/javascript';
    s.async = true;
    s.src = src;

    s.onload = s.onreadystatechange = function() {
        if (''+s.readyState).match(/^(|complete|loaded|uninitialized)$/) {
            loaded = true;
            onSuccess && onSuccess();
            s.onload = s.onreadystatechange = null;
        }
    }

    if (onFail) {
        setTimeout(function(){loaded || onFail();}, timeout || 5000);
    }

    x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(x, s);
}

全面披露：

  • 这是完全未经测试的。
  • 第一个代码块是从 Google Analytics 中抄袭而来的，代码不那么难看。
  • 在看到 Slace 的答案后，第二块代码是从 yepnope 中扯下来的，代码稍微难看，但更简洁。
于 2012-02-21T02:07:09.250 回答
2

我建议您使用yepnope.js来执行此操作。这是一个使用 jQuery 的示例：

yepnope({
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
});

您只需要确保有某种方法可以检测到加载外部文件失败。

于 2012-02-21T01:24:32.890 回答