Referensi Intermediate Iframe API

Halaman referensi ini menjelaskan cara memuat iframe perantara ke dalam halaman HTML.

Memuat Library JavaScript Iframe Menengah

Tempatkan cuplikan kode berikut ke dalam halaman HTML mana pun yang ingin Anda tampilkan di Google One Ketuk untuk ditampilkan:

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

API HTML

Anda dapat memuat iframe perantara dengan menyertakan elemen HTML dengan atribut ID yang ditetapkan ke g_id_intermediate_iframe. Lihat contoh cuplikan kode berikut:

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

Elemen dengan ID "g_id_intermediate_iframe"

Anda dapat menempatkan atribut data iframe perantara di elemen yang terlihat atau tidak terlihat, seperti <div> dan <span>. Satu-satunya persyaratan adalah ID elemen ditetapkan ke g_id_intermediate_iframe. Jangan letakkan ID ini di beberapa elemen.

Tabel berikut mencantumkan atribut data beserta deskripsinya:

Atribut
data-src URI iframe menengah Sekali Ketuk
data-done Metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk selesai.

data-src

Atribut ini adalah URI dari iframe menengah Sekali Ketuk. Lihat tabel berikut untuk informasi lebih lanjut:

Type Wajib Contoh
string Ya data-src="https://example.com/onetap_iframe.html"

data selesai

Atribut ini adalah metode callback JavaScript yang dipicu saat UX Sekali Ketuk selesai.

Secara default, halaman konten akan dimuat ulang saat UX Sekali Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback yang sudah selesai. Lihat tabel berikut untuk informasi selengkapnya:

Type Wajib Contoh
Fungsi Opsional data-done="onOneTapSuccess"

JavaScript API

Anda dapat memuat iframe perantara dengan memanggil metode JavaScript.

Metode: google.accounts.id.initializeIntermediate

Metode google.accounts.id.initializeIntermediate memuat iframe perantara berdasarkan objek konfigurasi. Lihat contoh kode metode berikut:

google.accounts.id.initializeIntermediate(IntermediateConfig)

Contoh kode berikut mengimplementasikan metode google.accounts.id.initializeIntermediate dengan fungsi onload:

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

Jenis data: IntermediateConfig

Tabel berikut mencantumkan kolom beserta deskripsinya:

Kolom
src URI iframe menengah Sekali Ketuk
done Metode callback JavaScript yang akan dipicu jika UX Sekali Ketuk adalah satu.

src

Kolom ini adalah URI dari iframe menengah Sekali Ketuk. Lihat tabel berikut untuk informasi lebih lanjut:

Type Wajib Contoh
string Ya src: "https://example.com/onetap_iframe.html"

done

Kolom ini adalah metode callback JavaScript yang akan dipicu saat UX Sekali Ketuk selesai.

Secara default, halaman konten akan dimuat ulang saat UX Sekali Ketuk selesai. Anda dapat mengganti perilaku default dengan memberikan callback yang sudah selesai. Lihat tabel berikut untuk informasi selengkapnya:

Type Wajib Contoh
Fungsi Opsional done: onOneTapSuccess