Question

在下面的代码中，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Falback procedure</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            window.jQuery || document.write('<script type="text/javascript" src="../localfolder/jquery.js"></script>');
        </script>
    </head>
    <body>
    </body>
</html>

由于未知原因，

本地库在缺少远程库时被加载。

我们是否在生产中使用此类代码？在客户的笔记本电脑上强制执行本地图书馆

Answer 1

这不太容易但有机会。因此，后备总是一个好主意。但在你的情况下，我在另一个脚本块中使用document.write()似乎有点奇怪。

最好创建一个脚本元素并将其附加到head：

<script type="text/javascript">
    if(!window.jQuery){
       var s = document.createElement('script');
           s.src = "../localfolder/jquery.js";
           s.type = "text/javscript";
           s.async = false;  // <--------------------you need to add this.
       document.getElementByTagName('head')[0].appendChild(s);
    }
</script>

根据评论：

默认情况下，动态创建的脚本为async，因此它不会阻止执行，但您可以明确地将async设置为false。

您可能也想了解defer的其他内容。 Check this link

Answer 2

CDN's非常棒，但它们可能会偶尔停留数分钟或数小时，会导致您的网站无法正常加载或根本无法加载。因此，最好有一个快速有效的后备解决方案作为您的故障安全。

<script type="text/javascript">  
if (typeof jQuery === 'undefined') {  
   var e = document.createElement('script');  
   e.src = '/local/jquery-2.0.min.js';  
   e.type='text/javascript';  
   document.getElementsByTagName("head")[0].appendChild(e);  
}  
</script>

但应该注意的是，上述方法不会“延迟”执行其他脚本加载（例如jQuery插件）或脚本执行（例如内联JavaScript），直到jQuery完全加载为止。由于回退依赖于附加脚本标记，因此标记之后的其他脚本标记会立即加载/执行，而不是等待加载本地jQuery，这可能会导致依赖性错误。

解决方法是使用document.write()并执行此操作您将阻止页面中包含的其他JavaScript加载和执行。如：

<script type="text/javascript">  
  if (typeof jQuery === 'undefined')   
     document.write('<script type="text/javascript" src="/local/jquery-2.0.min.js"><\/script>');  
</script>

在您的代码中：

'||'基本上充当OR语句。如果“window.jQuery”返回FALSE（换句话说，如果jQuery未成功加载），则执行下一个语句 - 将脚本标记添加到引用本地库副本的页面

编辑：对问题中使用的代码的说明。

Answer 3

这是确保加载脚本的一种方法。

有时候CDN可能会失败，但由于CDN不可靠，我发现有些库没有加载。

这样做的问题是您的带宽将用于这些库。如果不使用缩小库，则会浪费更多带宽。

后台程序加载本地jQuery库

3 个答案: