Question

假设我的服务器上有一堆脚本，这些脚本在我的应用中使用。

所以，我的<head>包含了很多 <script src="http://myServer.com/myScript.js"></script>

如果我正在开发localhost＆amp;没有网络访问权限，我想引用那些作为一堆 <script src="http://localhost/myScript.js"></script>或者，甚至是 <script src="myScript.js"></script>

我是JS的新手，有没有一种标准方法可以在脚本文件的两个可能的服务器之间切换？谷歌在这件事上不是我的朋友。

Answer 1

您可以根据您是否从localhost访问该页面来动态加载脚本并将其添加到文档中，如下所示：

<script> 

var script = document.createElement("script");

if (/localhost/.test(document.location.hostname)) {
    script.setAttribute("src", "./myScript.js");
} else {
    script.setAttribute("src", "http://www.myServer.com/myScript.js");
}

document.body.appendChild(script);

</script>

Answer 2

如果我希望能够在从CDN中获取资源的网络应用程序离线时继续开发，我已经使用了回退。

例如，对于jQuery：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    if(!window.jQuery) {
        document.write('<script src="./js/jquery.min.js"><\/script>');
        console.error('jQuery from CDN not available - reverting to local copy');
    }
</script>

或者对于BootstrapJS：

<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    if(!(typeof $().modal == 'function')) {
        document.write('<script src="./js/bootstrap.min.js"><\/script>');
        console.error('Bootstrap JS from CDN not available - reverting to local copy');
    }
</script>

或者对于FontAwesome：

<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
...
<span class="fa hide" id="faChecker"></span>
<script type="text/javascript">
    if($('#faChecker').css('fontFamily') !== 'FontAwesome') {
        $('<link type="text/css" rel="stylesheet" href="./css/font-awesome.min.css" \/>').appendTo('head');
        console.error('FontAwesome CSS from CDN not available - reverting to local copy');
    }
</script>

同样，您可以使用myScript.js设置的某个变量，如果未设置，请使用本地回退版本。

如果CDN出现故障，这有助于防止您的网站出现故障。

如何在本地和;远程脚本？

2 个答案: