点击按钮通过innerHTML加载Calendly组件失败问题求助

你遇到的问题核心在于：通过innerHTML插入的<script>标签不会被浏览器自动执行，且Calendly的widget脚本只会在首次加载时扫描页面中已有的.calendly-inline-widget元素，动态插入的元素不会被自动初始化。

解决方案 #

直接使用Calendly提供的手动初始化方法，而非依赖innerHTML插入完整代码块，具体实现如下：

方法1：提前引入Calendly脚本

在页面的<head>或<body>末尾提前引入widget脚本：

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

然后修改你的showCalendly函数：

function showCalendly() {
  const calendlyArea = document.getElementById("calendly-area");
  // 清空目标容器
  calendlyArea.innerHTML = '';
  
  // 创建Calendly容器元素
  const widgetContainer = document.createElement('div');
  widgetContainer.className = 'calendly-inline-widget';
  widgetContainer.style.minWidth = '320px';
  widgetContainer.style.height = '630px';
  
  // 添加到目标容器
  calendlyArea.appendChild(widgetContainer);
  
  // 手动初始化Calendly组件
  if (window.Calendly) {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/MYCALENDLY/30min',
      parentElement: widgetContainer
    });
  }
}

方法2：动态加载Calendly脚本（无需提前引入）

如果不想提前在页面中引入脚本，可以在函数内部动态加载并初始化：

function showCalendly() {
  const calendlyArea = document.getElementById("calendly-area");
  calendlyArea.innerHTML = '';

  // 检查脚本是否已加载
  if (!window.Calendly) {
    const script = document.createElement('script');
    script.src = 'https://assets.calendly.com/assets/external/widget.js';
    script.async = true;
    // 脚本加载完成后再渲染组件
    script.onload = renderWidget;
    document.body.appendChild(script);
  } else {
    renderWidget();
  }

  function renderWidget() {
    const widgetContainer = document.createElement('div');
    widgetContainer.style.minWidth = '320px';
    widgetContainer.style.height = '630px';
    calendlyArea.appendChild(widgetContainer);

    Calendly.initInlineWidget({
      url: 'https://calendly.com/MYCALENDLY/30min',
      parentElement: widgetContainer
    });
  }
}

原理说明 #

Calendly的官方widget提供了initInlineWidget API，允许开发者手动指定要渲染的元素和配置，避免了依赖脚本加载时的自动扫描逻辑。而直接用innerHTML插入脚本的方式，浏览器不会执行该脚本（或执行时机不对），导致组件无法初始化。

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