Chrome扩展中iframe内React FullCalendar拖拽功能异常求助

核心原因 #

FullCalendar默认绑定全局的window和document对象，你的React应用运行在独立iframe中时，拖拽事件触发时，FullCalendar错误使用了父页面的document上下文，导致功能异常。

解决方案 #

1. 强制指定FullCalendar使用iframe内部上下文 #

在Calendar组件中，获取iframe内部的document和window，覆盖FullCalendar的默认全局上下文配置：

// Calendar.js
import React, { useRef, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const Calendar = () => {
  const calendarRef = useRef(null);
  const containerRef = useRef(null);

  useEffect(() => {
    if (calendarRef.current && containerRef.current) {
      // 获取当前组件所在iframe的document和window
      const iframeDoc = containerRef.current.ownerDocument;
      const iframeWindow = iframeDoc.defaultView;

      // 覆盖FullCalendar的上下文配置
      const calendarApi = calendarRef.current.getApi();
      calendarApi.setOption('window', iframeWindow);
      calendarApi.setOption('document', iframeDoc);
    }
  }, []);

  return (
    <div ref={containerRef}>
      <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
        initialView="dayGridMonth"
        editable={true}
        selectable={true}
        // 其他自定义配置...
      />
    </div>
  );
};

export default Calendar;

2. 正确配置iframe属性 #

在content.js创建iframe时，设置合适的sandbox属性，保证iframe能正常运行脚本并访问自身document：

// content.js
const iframe = document.createElement('iframe');
// 指向React扩展打包后的入口页面
iframe.src = chrome.runtime.getURL('index.html');
iframe.style.cssText = `
  position: fixed;
  top: 20px;
  right: 20px;
  width: 800px;
  height: 600px;
  border: none;
  z-index: 9999;
`;
// 允许脚本执行和同源资源访问
iframe.sandbox = 'allow-scripts allow-same-origin';
document.body.appendChild(iframe);

3. 强化iframe内部CSS隔离 #

iframe本身具备天然CSS隔离特性，确保iframe入口页面加载完整样式即可避免父页面CSS干扰。若仍有冲突，可添加全局CSS重置：

<!-- index.html (iframe入口页面) -->
<!DOCTYPE html>
<html>
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
  </style>
  <!-- 引入FullCalendar及应用样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/main.min.css">
</head>
<body>
  <div id="root"></div>
  <script src="static/js/main.js"></script>
</body>
</html>

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