Question

是否可以尝试从备用位置加载javaScript源文件，如果它无法从第一个加载？

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

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

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

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

谢谢！

Answer 1

我建议您使用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');
    }
  }
});

您只需要确保有一些检测加载外部文件失败的方法。

Answer 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中删除了，稍微丑陋但更简洁的代码。

如果第一个无法加载，请在第二个位置查找Javascript源文件

2 个答案: