簡單檢測CDN連接是否有效

時間 2019-11-10

原文原文鏈接

CDN連接常常是使用的。可是，CDN連接掛了怎麼辦，所以，就要調用使用本站點的庫，那麼怎麼實現呢？javascript

檢測CDN的jquery連接是否有效（這種方法比較簡單）css

<script src="" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>

那麼，問題來了，假如我要檢測其餘CDN呢？如使用bootstrap框架的js與css呢?html

本人就想了一個比較簡單的方法（同步方式）前端

...
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
...

<script>
      //判斷cdn是否有效
      $.when(
          //同步方式發送請求
          $.ajax({
              url: "https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css",
              async: false
          }),
          $.ajax({
              url: "https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js",
              async: false
          })
          //若是連接失效，就寫入本地的連接
          ).fail(function() {
              $("link[href='https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css']").after(" < link rel = 'stylesheet' href = 'css/bootstrap.min.css' > ");
              $("script[src='https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js'").after(" < script type = 'text/javascript' src = 'js/bootstrap.min.js' > < \/script>");
          });
 </script>

使用requirejs加載（異步方式）java

<!doctype html>
<html>
    <head>
        <title>requirejs</title>
        <meta charset="utf-8">
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>
        <span>requirejs</span>
    </body>
</html>

main.jsjquery

require.config({
    paths: {
        //配置cdn與本地jq
        jquery: ['http://cdn.bootcss.com/jquery/2.0.0/jquery.min', 'jquery-2.0.0.min'],
    },
    map: {
        //這個是require-css插件，即css.min.js
        '*': {
            'css': 'css.min' 
        }
    },
});

require(['jquery'], function($) {
    alert("jquery load");
});
//引入的寫法是插件寫法，直接在這裏寫路徑
require(['css!../css/a.css'], function() {
    alert('stylesheet load');
});