📌  相关文章
📜  如何使用 CDN 安装 sweetalert2? - HTML(1)

📅  最后修改于: 2023-12-03 15:08:17.488000             🧑  作者: Mango

如何使用 CDN 安装 sweetalert2?

简介

CDN（Content Delivery Network）即内容分发网络，通过在全球分布式的加速节点部署，使用户就近获取所需内容，提高用户访问网站的响应速度和成功率。sweetalert2是一个非常好用的JavaScript弹窗库，常用于提醒或提示用户进行操作，使用CDN安装这个库可以减少本地文件的加载，提高页面打开速度。

步骤

  1. 首先，打开官网 sweetalert2官网。在主页中可以看到CDN的地址，如下：

    <!-- Include SweetAlert2 CSS and JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.3/dist/sweetalert2.min.css" integrity="sha384-BPORWicfCZ1Zl7+OaXGGUbZKgzPv9KxhbVYgRoKbWaKzUhA3A2tEI3H9fa+6ZTs/" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.3/dist/sweetalert2.min.js" integrity="sha384-9MYy6F4cJQV6MWSTrpbxtAR4VB2kElvlifWUGSu5IAL3Qw8haXP0RI72kQJvQNwT" crossorigin="anonymous"></script>

  2. 将以上代码复制到HTML文件的头部，即head标签内。

    <head>
  <title>My Website</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.3/dist/sweetalert2.min.css" integrity="sha384-BPORWicfCZ1Zl7+OaXGGUbZKgzPv9KxhbVYgRoKbWaKzUhA3A2tEI3H9fa+6ZTs/" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.3/dist/sweetalert2.min.js" integrity="sha384-9MYy6F4cJQV6MWSTrpbxtAR4VB2kElvlifWUGSu5IAL3Qw8haXP0RI72kQJvQNwT" crossorigin="anonymous"></script>
</head>

  3. 完成以上步骤后，即可使用sweetalert2库。

    <script>
  Swal.fire({
    title: 'Hello world!',
    text: 'This is sweetalert2 demo.',
    icon: 'success',
    confirmButtonText: 'OK'
  })
</script>

    运行这段代码即可看到弹窗效果。

总结

以上就是在HTML中使用CDN安装sweetalert2库的步骤，通过使用CDN可以简化安装库的过程，提高网页性能。sweetalert2不仅仅是样式优美的弹窗库，它还有丰富的API供你调用，详情请查看官方文档。