使用Intro.js实现引导动画遇完整性校验及未定义问题求助

在通过CDN引入Intro.js库实现引导动画时，出现两个问题：

1. 资源的integrity属性SHA-512摘要校验失败，资源被浏览器拦截
2. 控制台报错Uncaught ReferenceError: introJs is not defined

错误原因分析 #

1. SHA-512摘要校验失败 #

integrity属性用于验证加载的资源是否和预期一致，避免资源被篡改。出现校验失败的原因包括：

• 使用的哈希值与CDN上实际提供的Intro.js 6.0.0版本文件哈希不匹配（可能是复制哈希时出错，或CDN资源更新后哈希值变更）
• 网络异常导致资源加载不完整，文件内容与预期哈希不符

2. introJs未定义 #

这个错误是第一个问题的连锁结果：浏览器拦截了校验失败的Intro.js文件，库根本没有被加载到页面中，自然不存在全局的introJs对象。此外，如果JS代码在库加载完成前就执行，也会触发这个错误，但当前场景下主要由第一个错误导致。

解决办法 #

针对SHA-512校验失败 #

• 获取正确哈希值：从CDN提供商的Intro.js 6.0.0详情页，复制官方提供的SHA-512哈希值替换现有integrity属性内容。
• 临时移除integrity属性（仅用于测试，生产环境不推荐）：直接删除script标签中的integrity="..."部分，确认资源能正常加载后，再补全正确的哈希值。

修正后的Intro.js引入示例（需替换为官方正确哈希）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/6.0.0/intro.min.js" integrity="sha512-xxxxxxx（替换为正确哈希）" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

针对introJs未定义 #

• 先解决第一个校验问题，确保Intro.js库能正常加载。
• 确保JS代码在库加载完成后执行：将JS代码放在Intro.js引入标签的后面，或用DOM加载完成事件包裹，避免提前执行：

document.addEventListener('DOMContentLoaded', function() {
  introJs().setOption("dontShowAgain", true).start();
});

附：原始代码 #

引入库的代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/6.0.0/intro.min.js" integrity="sha512-i3JuyB+yXgX08haAnY9OnbCuv+a0aB6eLeKh970IOC3XOeWVnOtZlcla55VztDzqCHbl2zn9gpeNu2VBNdvmdQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

HTML结构代码 #

<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>

JavaScript代码 #

introJs().setOption("dontShowAgain", true).start();

内容的提问来源于stack exchange，提问作者user20837053