嵌入网站的Google Calendar iframe如何实现实时更新？

Google Calendar的嵌入iframe本身没有内置实时同步机制，再加上浏览器同源策略的限制，我们无法直接跨域操作iframe内的内容来监听日历更新。以下是两种可行的解决方案：

方法1：定时重载iframe（最简便） #

通过JavaScript定时重新设置iframe的源地址，实现局部刷新（无需整页刷新）。

步骤： #

1. 给iframe添加一个唯一ID，方便JS获取元素：

<iframe id="google-calendar" src="https://calendar.google.com/calendar/embed?src=<myEmail>.com&ctz=America%2FLos_Angeles" frameborder="0" scrolling="no"></iframe>

2. 添加JavaScript代码实现定时刷新：

// 获取目标iframe
const calendarIframe = document.getElementById('google-calendar');
// 设置刷新间隔（示例为5分钟，单位：毫秒）
const refreshGap = 300000;

function reloadCalendar() {
  // 拆分原URL，添加时间戳参数避免浏览器缓存旧内容
  const [baseUrl, params] = calendarIframe.src.split('?');
  const newSrc = `${baseUrl}?${params}&t=${Date.now()}`;
  calendarIframe.src = newSrc;
}

// 启动定时任务
setInterval(reloadCalendar, refreshGap);

说明： #

• 可以根据需求调整refreshGap的值，建议不要设置过短（比如小于1分钟），避免触发Google的请求频率限制。
• 添加时间戳参数&t=${Date.now()}是为了强制浏览器请求最新的日历内容，绕过缓存。

方法2：使用Google Calendar API（精准更新） #

如果需要仅在日历有实际变化时才刷新，可以通过Google Calendar API定时检查事件更新，再触发iframe刷新。不过这个方案需要：

• 配置Google Cloud项目并启用Calendar API
• 获取API密钥或OAuth授权（根据日历是否公开）
• 调用Events.list接口对比事件的更新时间

这种方式更灵活但实现复杂度更高，适合有开发经验的场景。

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