中級 iFrame API リファレンス

このリファレンス ページでは、中間 iframe を HTML ページに読み込む方法について説明します。

中間 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 ワンタップ中間 iframe の URI
data-done ワンタップ UX の完了時にトリガーされる JavaScript コールバック メソッド。

data-src

この属性は、ワンタップ ミドルウェア iframe の URI です。詳しくは、次の表をご覧ください。

タイプ 必須 例
文字列 はい data-src="https://example.com/onetap_iframe.html"

data-done

この属性は、ワンタップ UX の完了時にトリガーされる JavaScript コールバック メソッドです。

デフォルトでは、ワンタップ UX が完了するとコンテンツ ページが再読み込みされます。独自の完了コールバックを指定することで、デフォルトの動作をオーバーライドできます。詳しくは、次の表をご覧ください。

タイプ 必須 例
関数 省略可 data-done="onOneTapSuccess"

JavaScript API

中間 iframe を読み込むには、JavaScript メソッドを呼び出します。

メソッド: 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 ワンタップ UX が 1 つの場合にトリガーされる JavaScript コールバック メソッド。

src

このフィールドは、ワンタップ中間 iframe の URI です。詳細については、次の表をご覧ください。

タイプ 必須 例
文字列 はい src: "https://example.com/onetap_iframe.html"

完了

このフィールドは、ワンタップ UX が完了したときにトリガーされる JavaScript コールバック メソッドです。

デフォルトでは、ワンタップ UX が完了するとコンテンツ ページが再読み込みされます。独自の完了コールバックを指定することで、デフォルトの動作をオーバーライドできます。詳しくは、次の表をご覧ください。

タイプ 必須 例
関数 省略可 done: onOneTapSuccess