Can you automatically choose between two <script src=&quo

Can you automatically choose between two <script src=""> files?

本文关键字：script src quo lt Can automatically choose between two you      更新时间：2023-09-26

假设你正在实现一个大量使用jQuery的网站。你可以输入一些像

这样的代码
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

并从某个存储库导入。如果你在没有互联网的情况下开发它，你可以下载源代码并将其存储在本地的某个地方，然后用一些脚本(如

)访问它。
<script src="js/jquery-1.10.2.min.js"></script>

但是有没有一种简单的方法可以同时拥有两者呢?例如，如果您可以到达存储库，请使用它，但如果您不能使用本地副本。

检查第一个脚本中是否有变量。如果没有找到，请使用document。编写以创建第二个脚本标记。下面是我找到的一个jQuery示例:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.7.1.min.js"><'/script>')</script>

在CDN上引用脚本的故障安全方法是仅在CDN因任何原因失败时链接到本地副本。

这样做的方法是简单地检查脚本中是否有任何内容已经执行。对于jQuery，这只是检查jQuery是否存在:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
    if (!window.jQuery) document.write('<script type="text/javascript" src="/path/to/jquery-ver.sion.min.js"><'/script>');
</script>

就我个人而言，我从来没有因为CDN离线而导致脚本失败，但是我有过互联网中断的时期。使用脚本设置适当的回退，我已经能够继续本地开发，因为页面仍然可以工作，而无需连接到CDN。

如果所需资源不可用，您可以动态添加资源。如:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript"> 
        if( typeof $ != "function")
        {
            var head= document.getElementsByTagName('head')[0];
            var script= document.createElement('script');
            script.type= 'text/javascript';
            script.src= 'js/jquery-1.10.2.min.js';
            head.appendChild(script);
        }
        </script>
</head>
<body>
</body>
</html>

虽然托管在Google CDN上的JQuery应该足够安全，但下面的代码可以作为requireJS的后备。

requirejs.config({
    enforceDefine: true,
    paths: {
        jquery: [
            '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
            'js/jquery-ui.min.js'
        ]
    }
});
require(['jquery'], function ($) {
});
相关文章：