Next.js 13中Calendly嵌入异常及跨域帧访问错误求助

核心问题分析 #

1. 直接访问/刷新页面时，widget.js会在页面加载完成后自动扫描DOM中的data-url元素并初始化，但**内部导航（客户端路由）**时，页面不会全量刷新，widget.js不会重新执行扫描，新渲染的Calendly容器不会被初始化。
2. 跨域错误是Calendly内部iframe与recaptcha、自身域名的跨域交互问题，属于第三方脚本的正常现象，不影响功能，无需额外修复。

解决方案：手动控制Calendly初始化逻辑 #

将嵌入组件改为客户端组件，通过useEffect监听路由变化和嵌入URL更新，手动调用Calendly的初始化方法：

'use client';

import { useEffect, useRef } from 'react';
import Script from 'next/script';

export default function CalendlyEmbed({ calendarUrl }) {
  const containerRef = useRef(null);

  useEffect(() => {
    // 确保Calendly全局对象和容器存在
    if (!window.Calendly || !containerRef.current || !calendarUrl) return;

    // 清空容器，避免重复初始化导致的DOM冗余
    containerRef.current.innerHTML = '';

    // 手动初始化内嵌组件
    window.Calendly.initInlineWidget({
      url: calendarUrl,
      parentElement: containerRef.current,
    });
  }, [calendarUrl]);

  return (
    <>
      <Script
        src="https://assets.calendly.com/assets/external/widget.js"
        strategy="afterInteractive"
        onLoad={() => {
          // 页面首次加载时初始化
          if (containerRef.current && calendarUrl) {
            window.Calendly.initInlineWidget({
              url: calendarUrl,
              parentElement: containerRef.current,
            });
          }
        }}
      />
      <div ref={containerRef}></div>
    </>
  );
}

关键细节说明 #

• 'use client'：Next.js 13 App Router默认是服务器组件，必须标记为客户端组件才能使用useEffect和访问window对象。
• useRef：获取Calendly容器的DOM引用，确保初始化时能准确挂载组件。
• useEffect依赖calendarUrl：当内部导航导致组件重新渲染或嵌入URL变化时，自动重新初始化Calendly。
• Script的strategy="afterInteractive"：确保脚本在页面交互后加载，不阻塞首屏渲染。

关于跨域错误 #

这些错误来自Calendly内部的iframe与第三方服务（如recaptcha）的跨域交互，属于第三方脚本的正常行为，不会影响Calendly的功能，无需额外处理。

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