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

データ完了

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

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

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

完了

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

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