中繼 iframe API 參考資料

本參考頁面說明如何將中繼 iframe 載入至 HTML 網頁。

注意： 請參閱「使用 Iframe 整合 One Tap」一節，瞭解中介 iframe 的相關背景資訊。

載入中介 iframe JavaScript 程式庫

將下列程式碼片段放入您希望 Google One Tap 顯示的任何 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
data-done	在 One Tap 使用者體驗完成時觸發的 JavaScript 回呼方法。

data-src

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

類型	必填	範例
字串	是	data-src="https://example.com/onetap_iframe.html"

data-done

這個屬性是 One Tap UX 完成時觸發的 JavaScript 回呼方法。

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

類型	必填	範例
函式	選用	data-done="onOneTapSuccess"

JavaScript API

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

方法：google.accounts.id.initializeIntermediate

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
done	當 One Tap UX 為 1 時，系統會觸發的 JavaScript 回呼方法。

src

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

類型	必填	範例
字串	是	src: "https://example.com/onetap_iframe.html"

完成

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

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

類型	必填	範例
函式	選用	done: onOneTapSuccess