jquery引入外部CDN 加载失败则引入本地jq库

以下是“jquery引入外部CDN 加载失败则引入本地jq库”的完整攻略，包括两条示例说明。

步骤一：引入CDN

首先，在HTML的head标签中引入jquery的CDN链接。例如：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

这里使用的是bootcdn.net提供的jquery CDN链接，版本号是3.5.1。

步骤二：判断CDN是否加载成功

接下来，使用jquery提供的方法判断CDN是否加载成功。可以在head标签中添加如下代码：

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    if (typeof jQuery == 'undefined') {
      document.write(unescape("%3Cscript src='js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
  </script>
</head>

这里使用了一个条件语句判断CDN是否加载成功。如果jquery未定义，就使用document.write方法引入本地jquery库。

步骤三：引入本地jq库

在head标签中添加了一个新的script标签，用于引入本地的jquery库。这里的路径是js/jquery.min.js，可以根据实际情况进行修改。

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    if (typeof jQuery == 'undefined') {
      document.write(unescape("%3Cscript src='js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
  </script>
</head>

这样就完成了“jquery引入外部CDN 加载失败则引入本地jq库”的攻略。下面分别给出两个示例说明。

示例一：CDN加载成功

如果CDN加载成功，就不需要引入本地jquery库。在浏览器中查看页面源代码，可以看到head标签中只有一个jquery CDN链接，没有引入本地jquery库的代码。

示例二：CDN加载失败

如果CDN加载失败，就会自动引入本地jquery库。可以将CDN链接修改为一个不存在的链接（例如https://cdn.example.com/jquery.min.js），再查看页面源代码，可以看到head标签中自动添加了一个引入本地jquery库的代码，用于替代CDN链接。

<head>
  <script src="https://cdn.example.com/jquery.min.js"></script>
  <script>
    if (typeof jQuery == 'undefined') {
      document.write(unescape("%3Cscript src='js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
  </script>
</head>

这样，即使CDN加载失败，我们的页面也可以正常使用jquery库，提高了页面的稳定性和用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery引入外部CDN 加载失败则引入本地jq库 - Python技术站