中級 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 です。詳細については、次の表をご覧ください。

タイプ 必須
string data-src="https://example.com/onetap_iframe.html"

データ完了

この属性は、ワンタップ 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 ワンタップの中間 iframe の URI
done ワンタップ UX が 1 つの場合にトリガーされる JavaScript コールバック メソッド。

src

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

タイプ 必須
string src: "https://example.com/onetap_iframe.html"

完了

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

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

タイプ 必須
関数 任意 done: onOneTapSuccess