分類
网站

當 CDN 失敗時回滾到自己的 js 資源

雖然 CDN 故障的概率非常微小,但是有些人爲的障礙卻可能導致用戶無法從 CDN 加載到資源。這時只要回滾到自己服務器上的資源就可以了,能用 CDN 的用戶優先才 CDN 加載,無法使用 CDN 的用戶從自己服務器加載。

<!DOCTYPE html>
<html>

<head>
  <!-- 在 head 裏調用 CDN 庫 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
  <p>網頁正文</p>
  <!-- 在網頁底部檢查一個 CDN 庫裏變量 -->
  <script>
    if (!window.jQuery) {
      document.write('<script src="js/jquery-3.2.1.min.js"><\/script>');
      document.write('<script src="js/bootstrap.bundle.min.js"><\/script>');
      document.write('<link rel="stylesheet" href="css/bootstrap.min.css" \/>');
    }
  </script>
</body>
</html>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *