Javascript 在react应用程序中嵌入Google日历作为iframe？

有没有一种方法可以在react应用程序中实现google日历的iframe，而无需自己手动处理事件

就像webapp会显示iframe，在那里他们可以登录到googlecalendar，然后它会显示在特定的框中

我只能使用日历库找到解决方案，但不能使用我正在考虑的方法。

谷歌已经为

请求设置了“X-Frame-Options”响应头https://calendar.google.com/calendar/r

（默认日历主页）到

sameorigin

，这意味着这将不起作用：

您的日历：

如果您尝试这样做，您将得到一个

拒绝在帧中显示“”，因为它将“X-frame-Options”设置为“sameorigin”。

。本质上，唯一允许嵌入默认日历页面的域是谷歌自己的域

尽管如此，还是有一些有趣的选择。如果你知道用户的gmail地址，即使他们的日历是私有的，只要他们登录，他们就可以看到一个iframe，其源代码等于

https://calendar.google.com/calendar/embed?src=“+encodeURI（电子邮件）

演示：（内置的嵌入工具让我很伤心）

然而，如果他们没有登录，像你要求的那样，检测并显示谷歌登录页面是很困难的。如果未登录，带有GCal嵌入URL的iframe将自动重定向到登录页面，但由于登录页面的x-frame-options设置为
sameorigin
，它将被阻止加载到iframe。若要查看此操作，请在注销的匿名窗口中尝试上面的演示，然后输入您的gmail电子邮件

此外，据我所知，您无法检测iframe的加载是否被Javascript的x-frame-options阻止，因此如果日历没有加载，就没有简单的方法将用户重定向到谷歌登录

我感觉检查登录状态最可靠的方法是通过。此外，谷歌还有一个包括端点在内的应用程序。
这很有趣