IFrame API-Referenz für Fortgeschrittene

Auf dieser Referenzseite wird beschrieben, wie ein dazwischen liegender iFrame in HTML-Seiten geladen wird.

Laden der JavaScript-Zwischenbibliothek für iFrames

Füge das folgende Code-Snippet in alle HTML-Seiten ein, die du über Google One Tap anzeigen lassen möchtest:

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

HTML-API

Sie können den dazwischenliegenden iFrame laden, indem Sie ein HTML-Element einfügen, in dem das ID-Attribut auf g_id_intermediate_iframe gesetzt ist. Sehen Sie sich das folgende Beispielcode-Snippet an:

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

Element mit der ID „g_id_intermediate_iframe“

Sie können die iFrame-Zwischenattribute in alle sichtbaren oder unsichtbaren Elemente einfügen, z. B. <div> und <span>. Die einzige Voraussetzung ist, dass die Element-ID auf g_id_intermediate_iframe festgelegt ist. Verwenden Sie diese ID nicht für mehrere Elemente.

In der folgenden Tabelle sind die Datenattribute und ihre Beschreibungen aufgeführt:

Attribut
data-src URI Ihres One Tap-Zwischen-iFrames
data-done Eine JavaScript-Callback-Methode, die ausgelöst wird, wenn die One Tap-UX abgeschlossen ist.

Daten-src

Dieses Attribut ist der URI Ihres One Tap-Zwischen-iFrames. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Ja data-src="https://example.com/onetap_iframe.html"

Daten fertig

Dieses Attribut ist eine JavaScript-Callback-Methode, die ausgelöst wird, wenn die One Tap-UX abgeschlossen ist.

Standardmäßig wird die Inhaltsseite neu geladen, wenn die One Tap-UX abgeschlossen ist. Sie können das Standardverhalten überschreiben, indem Sie einen eigenen fertigen Callback angeben. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
Funktion Optional data-done="onOneTapSuccess"

JavaScript API

Sie können den dazwischenliegenden iFrame laden, indem Sie eine JavaScript-Methode aufrufen.

Methode: google.accounts.id.initialIntermediate

Die Methode google.accounts.id.initializeIntermediate lädt den Zwischen-iFrame basierend auf dem Konfigurationsobjekt. Hier ein Codebeispiel für die Methode:

google.accounts.id.initializeIntermediate(IntermediateConfig)

Im folgenden Codebeispiel wird die Methode google.accounts.id.initializeIntermediate mit einer onload-Funktion implementiert:

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

Datentyp: IntermediateConfig

In der folgenden Tabelle sind die Felder und die zugehörigen Beschreibungen aufgeführt:

Feld
src URI Ihres One Tap-Zwischen-iFrames
done Eine JavaScript-Callback-Methode, die ausgelöst wird, wenn One Tap UX eine ist.

src

Dieses Feld enthält den URI Ihres One Tap-Zwischen-iFrames. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
String Ja src: "https://example.com/onetap_iframe.html"

Fertig

Dieses Feld ist die JavaScript-Callback-Methode, die ausgelöst wird, wenn die One Tap-UX abgeschlossen ist.

Standardmäßig wird die Inhaltsseite neu geladen, wenn die One Tap-UX abgeschlossen ist. Sie können das Standardverhalten überschreiben, indem Sie einen eigenen fertigen Callback angeben. Weitere Informationen finden Sie in der folgenden Tabelle:

Typ Erforderlich Beispiel
Funktion Optional done: onOneTapSuccess