Referencia intermedia de la API de Iframe

En esta página de referencia, se describe cómo cargar un iframe intermedio en páginas HTML.

Carga la biblioteca de JavaScript del iframe intermedio

Coloca el siguiente fragmento de código en las páginas HTML que quieras que Google One muestre cuando se presione:

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

API de HTML

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

<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 el ID "g_id_intermediate_iframe"

Puedes colocar los atributos de datos de iframe intermedios en cualquier elemento visible o invisible, como <div> y <span>. El único requisito es que el ID del elemento esté configurado en 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 de tu iframe intermedio de One Tap
data-done Es un método de devolución de llamada de JavaScript que se activará cuando se complete la UX de One Tap.

data-src

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

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

data-done

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

Para cargar el iframe intermedio, llama a un método de JavaScript.

Método: google.accounts.id.initializeIntermediate

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: InternalConfig

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

Campo
src El URI de tu iframe intermedio de One Tap
done Es un método de devolución de llamada de JavaScript que se activará cuando la UX de One Tap sea uno.

src

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

Tipo Obligatorio Ejemplo
string 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 se completa la UX de One Tap. Puedes anular el comportamiento predeterminado si proporcionas tu propia devolución de llamada de fin. Consulta la siguiente tabla para obtener más información:

Tipo Obligatorio Ejemplo
Función Opcional done: onOneTapSuccess