Destiny图书馆管理系统主页编辑器仅支持无JavaScript的HTML，有何变通方案？

• 需在Destiny图书馆管理系统中更新学校图书馆主页，编辑端仅支持粘贴自定义HTML后保存，系统会拦截所有包含JavaScript的内容，上传时直接触发报错。
• 页面需要落地两个核心功能：校园活动自定义照片轮播、第三方供应商提供的数字馆藏杂志轮播展示组件，两类功能的原生实现都依赖JavaScript支持。
• 核心诉求：寻找不内嵌script标签也能调用所需JavaScript的方法，或是其他可落地的替代实现路径。

• 优先利用iframe嵌入能力对接第三方组件
  Destiny这类图书馆管理系统一般不会拦截iframe嵌入操作，且多数版本会提前将常用数字杂志供应商的域名加入嵌入白名单。直接通过iframe标签填入供应商提供的公开嵌入链接即可，轮播组件的JavaScript会在iframe独立沙箱环境内运行，不会触发主页面的脚本校验规则。如果嵌入失败，可直接联系系统管理员申请将对应供应商域名加入嵌入白名单，全程不需要自行编写前端脚本。
• 自定义照片轮播改用纯CSS实现
  完全不需要JavaScript依赖，仅通过HTML内嵌的<style>标签即可实现完整的自动轮播、手动切换效果，这类内嵌样式不会被系统的脚本规则拦截。核心实现逻辑是利用CSS动画、:target伪类控制轮播图的显隐状态，可适配主流浏览器的显示规则。
  最简可用的纯CSS自动轮播代码参考：

  <style>
  .photo-carousel {position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden;}
  .carousel-item {position: absolute; inset: 0; opacity: 0; animation: rotate 12s infinite;}
  .carousel-item:nth-child(2) {animation-delay: 4s;}
  .carousel-item:nth-child(3) {animation-delay: 8s;}
  @keyframes rotate {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
  }
  </style>
  <div class="photo-carousel">
    <img class="carousel-item" src="对应图片存储地址" alt="校园活动照片1">
    <img class="carousel-item" src="对应图片存储地址" alt="校园活动照片2">
    <img class="carousel-item" src="对应图片存储地址" alt="校园活动照片3">
  </div>
  

  替换为实际的图片地址即可正常使用，全程不涉及任何JavaScript代码。
• 需要规避的无效操作
  不要尝试用javascript:伪协议、内联事件属性、编码隐藏脚本等方式绕过拦截，这类操作不仅会被系统的多层安全校验拦截，还可能触发安全告警，导致主页编辑权限被收回。
• iframe也被完全禁止的备选方案
  如果系统不允许任何iframe嵌入，可将需要展示的轮播内容（活动照片、数字杂志封面+详情跳转链接）部署到学校官方站点的静态页面中，在Destiny主页放置对应的静态入口图和跳转链接，引导用户访问完整轮播内容，不需要在主页面嵌入任何动态脚本。

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