有没有办法在 React 应用程序中实现 Google 日历的 iframe，而无需自己手动处理事件？
就像网络应用程序会在 iframe 中显示他们可以登录谷歌日历一样，它只会在特定的框中显示它。
我只能使用日历库找到解决方案，但无法找到我正在考虑的方法。
最佳答案
Google 已将请求的“X-Frame-Options”响应 header 设置为 https://calendar.google.com/calendar/r (默认日历主页)至sameorigin ，这意味着这不起作用:
<h2>Your Calendar:</h2>
<iframe src="https://calendar.google.com/calendar/r"></iframe>
如果你尝试这样做，你将得到 Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 。本质上，唯一允许嵌入默认日历页面的域是 Google 自己的域。
话虽这么说，有一些有趣的选项可用。如果你知道用户的gmail地址，即使他们的日历是私有(private)的，只要他们登录，他们就可以看到一个源等于'https://calendar.google.com/calendar/embed?src=' + encodeURI(email);的iframe .
演示:JSfiddle link (内置的嵌入工具让我很伤心)。
但是，如果他们未登录，则很难检测到并显示 Google 登录页面(如您所要求的那样)。如果他们没有登录，带有 GCal 嵌入 URL 的 iframe 将自动重定向到登录页面，但因为登录页面的 x-frame-options 设置为 sameorigin ，它将被阻止加载到 iframe 中。要查看实际效果，请在注销的隐身窗口中尝试上面的演示，然后输入您的 Gmail 电子邮件。
此外，据我所知，您无法使用 Javascript 检测 iframe 的加载是否被 x-frame-options 阻止，因此没有简单的方法可以重定向用户登录 Google，如果日历无法加载。
我感觉检查登录状态的最可靠方法是通过 the Google Sign-in button 。另外，Google还有一个full API just for their Calendar product ，包括端点 that would tell you which calendars a user has .
关于javascript - 将 Google 日历作为 iframe 嵌入到 React 应用程序中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56521467/