Referencia intermedia de la API de Iframe

Esta página de referencia describe cómo cargar iframe intermedio en páginas HTML.

Carga la biblioteca de JavaScript de Iframe intermedio

Coloca el siguiente fragmento de código en cualquier página HTML que quieras usar en Google One. Presiona para mostrar:

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

API de HTML

Para cargar el iframe intermedio, incluye un elemento HTML con el atributo de ID establecido en g_id_intermediate_iframe. Observa el siguiente fragmento de código de ejemplo:

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

Elemento con ID "g_id_intermediate_iframe"

Puedes colocar los atributos intermedios de datos de iframe en cualquier elemento visible o invisible, como <div> y <span>. El único requisito es que el ID del elemento esté configurado como g_id_intermediate_iframe. No coloques este ID en varios elementos.

En la siguiente tabla, se enumeran los atributos de datos con sus descripciones:

Atributo
data-src El URI del iframe intermedio de One Tap
data-done Un método de devolución de llamada de JavaScript que se activa cuando se completa la UX de One Tap.

data-src

Este atributo es el URI del iframe intermedio de One Tap. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
cadena Sí data-src="https://example.com/onetap_iframe.html"

datos hechos

Este atributo es un método de devolución de llamada de JavaScript que se activa cuando se completa la UX de One Tap.

De forma predeterminada, la página de contenido se vuelve a cargar cuando finaliza la UX de One Tap. Puedes anular el comportamiento predeterminado proporcionando tu propia devolución de llamada Done. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
Función Opcional data-done="onOneTapSuccess"

API de JavaScript

Puedes cargar el iframe intermedio llamando a un método de JavaScript.

Método: google.accounts.id.inicioIntermedio

El método google.accounts.id.initializeIntermediate carga el iframe intermedio según el objeto de configuración. Consulta el siguiente ejemplo de código del método:

google.accounts.id.initializeIntermediate(IntermediateConfig)

En el siguiente ejemplo de código, se implementa el método google.accounts.id.initializeIntermediate con una función onload:

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

Tipo de datos: InterConfig

En la siguiente tabla, se enumeran los campos con sus descripciones:

Campo
src El URI del iframe intermedio de One Tap
done Un método de devolución de llamada de JavaScript que se activa cuando la UX de One Tap lo es.

src

Este campo es el URI del iframe intermedio de One Tap. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
cadena Sí src: "https://example.com/onetap_iframe.html"

listo

Este campo es el método de devolución de llamada de JavaScript que se activará cuando se complete la UX de One Tap.

De forma predeterminada, la página de contenido se vuelve a cargar cuando finaliza la UX de One Tap. Puedes anular el comportamiento predeterminado proporcionando tu propia devolución de llamada Done. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
Función Opcional done: onOneTapSuccess