在反應應用中將Google日歷作為iframe嵌入？

Question

有沒有辦法在反應應用程序中實現谷歌日歷的iframe，而無需自己手動處理事件？

就像webapp會顯示iframe，他們可以登錄谷歌日歷，然后它將只顯示在特定的框內。

我只能使用日歷庫找到解決方案，但不能找到我正在考慮的方法。

Answer 1

谷歌已經為請求“X-框架-選項”響應頭為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地址，即使他們的日歷是私有的，只要他們已登錄，他們就可以看到iframe等於'https://calendar.google.com/calendar/embed?src=' + encodeURI(email); 。

演示： JSfiddle鏈接 （內置嵌入工具讓我感到悲傷）。

但是，如果他們沒有登錄，則很難檢測到並顯示Google登錄頁面，就像您要求的那樣。 如果他們沒有登錄，帶有GCal嵌入URL的iframe將自動重定向到登錄頁面，但由於登錄頁面的x-frame-options設置為sameorigin ，因此將阻止加載到iframe中。 要查看此操作，請在已注銷的隱身窗口中嘗試上面的演示，然后輸入您的Gmail電子郵件。

此外，據我所知，您無法檢測iframe的加載是否被Javascript的x-frame-options阻止，因此如果日歷不是，則沒有簡單的方法可以將用戶重定向到Google登錄加載。

我有一種感覺，檢查登錄狀態的最可靠方法是通過Google登錄按鈕 。 此外，Google還為其日歷產品提供了完整的API ，包括可告訴您用戶具有哪些日歷的端點。