中繼 iframe API 參考資料

這個參考網頁說明如何在 HTML 網頁中載入中繼 iframe。

載入中繼 iframe JavaScript 程式庫

將下列程式碼片段插入所有要顯示 Google One 觸控功能的 HTML 頁面：

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

如要載入中繼 iframe，您可以加入 ID 屬性設為 g_id_intermediate_iframe 的 HTML 元素。請參閱下列程式碼片段範例：

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

ID 為「g_id_intermediate_iframe」的元素

您可以將中繼 iframe 資料屬性放在任何可見或隱藏的元素中，例如 <div> 和 <span>。唯一的規定是元素 ID 設為 g_id_intermediate_iframe。請勿將這個 ID 放在多個元素中。

下表列出資料屬性及其說明：

data-src

這項屬性是 One Tap 中繼 iframe 的 URI。詳情請參閱下表：

資料完成

這項屬性是在 One Tap 使用者體驗完成後觸發的 JavaScript 回呼方法。

根據預設，系統會在 One Tap 使用者體驗完成後重新載入內容頁面。只要提供自己的完成回呼，即可覆寫預設行為。詳情請參閱下表：

JavaScript API

您可以呼叫 JavaScript 方法來載入中繼 iframe。

方法：google.accounts.id.initialmediate

google.accounts.id.initializeIntermediate 方法會根據設定物件載入中繼 iframe。請參閱下列方法的程式碼範例：

google.accounts.id.initializeIntermediate(IntermediateConfig)

以下程式碼範例使用 onload 函式實作 google.accounts.id.initializeIntermediate 方法：

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

資料類型：IntermediateConfig

下表列出各欄位及其說明：

src

這個欄位是 One Tap 中繼 iframe 的 URI。詳情請參閱下表：

完成

這個欄位是在 One Tap 使用者體驗完成後觸發的 JavaScript 回呼方法。

根據預設，系統會在 One Tap 使用者體驗完成後重新載入內容頁面。只要提供自己的完成回呼，即可覆寫預設行為。詳情請參閱下表：