如何使仅执行一次的联系表单脚本在页面多处加载运行？

问题核心是：原嵌入脚本仅会在首次加载时查找指定ID的div并渲染表单，且页面中重复使用相同ID违反HTML规范，导致弹窗内的表单无法触发渲染。

以下是可行的解决方案：

步骤1：保留顶部正常工作的表单 #

顶部的表单代码无需修改，继续使用原ID和脚本：

<div id="form_98695b88-54e6-45df-84b9-50efc7b51e2d" style="min-width: 500px; max-width: 525px;">Loading...</div>
<script async src="https://slate.wichita.edu/register/?id=98695b88-54e6-45df-84b9-50efc7b51e2d&amp;output=embed&amp;div=form_98695b88-54e6-45df-84b9-50efc7b51e2d">/**/</script>

步骤2：修改弹窗内的表单结构 #

给弹窗内的表单div设置唯一新ID，避免和顶部重复：

<!-- 弹窗触发按钮 -->
<button onclick="openFormModal()">打开联系表单</button>

<!-- 自定义弹窗容器（可根据你的弹窗样式调整） -->
<div id="contactFormModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center;">
  <div style="background: #fff; padding: 2rem; border-radius: 8px;">
    <!-- 弹窗内的表单容器，使用唯一ID -->
    <div id="modal_contact_form" style="min-width: 500px; max-width: 525px;">Loading...</div>
    <button onclick="closeFormModal()" style="margin-top: 1rem;">关闭</button>
  </div>
</div>

步骤3：添加动态加载表单的JS函数 #

通过动态创建script元素，每次打开弹窗时重新加载表单脚本并指定弹窗内的div ID：

function openFormModal() {
  const modal = document.getElementById('contactFormModal');
  const formContainer = document.getElementById('modal_contact_form');
  
  // 重置加载状态
  formContainer.innerHTML = 'Loading...';
  
  // 动态生成表单脚本
  const formScript = document.createElement('script');
  formScript.src = `https://slate.wichita.edu/register/?id=98695b88-54e6-45df-84b9-50efc7b51e2d&output=embed&div=${formContainer.id}`;
  formScript.async = true;
  
  // 插入脚本触发渲染
  document.body.appendChild(formScript);
  
  // 显示弹窗
  modal.style.display = 'flex';
}

function closeFormModal() {
  const modal = document.getElementById('contactFormModal');
  modal.style.display = 'none';
}

关键说明 #

• 避免ID重复：HTML中同一页面的元素ID必须唯一，这是解决问题的基础。
• 动态加载脚本：原脚本是加载后立即执行的，仅会查找当时存在的指定ID元素，因此每次打开弹窗时需要重新生成脚本，让它找到弹窗内的新容器。
• 重置加载状态：每次打开弹窗时清空容器内容，确保用户看到正确的加载提示。

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