Eventos de JavaScript insertados

Una vez que haya creado una inserción (que puede ser pública, privada, con inserción firmada o a través de la API), puede interactuar con esos iframes mediante JavaScript. Puedes hacer que tu página sea más dinámica en función del estado del elemento insertado e incluso modificar el elemento insertado desde tu página web.

Ten en cuenta que Looker no controla el orden en el que los navegadores envían eventos a las aplicaciones web. Esto significa que el orden de los eventos no está garantizado en todos los navegadores o plataformas. Asegúrate de escribir el código JavaScript de forma adecuada para tener en cuenta la gestión de eventos de los distintos navegadores.

Puedes usar JavaScript de una de las siguientes formas para el contenido insertado de Looker:

• Usando el kit de desarrollo de software (SDK) de Looker para insertar contenido, que se describe en la página de documentación del SDK para insertar contenido
• Usando eventos de JavaScript, tal como se describe en la sección Acceder a eventos en JavaScript de esta página

Preparación

Para poder interactuar con el iframe insertado, sigue estos pasos:

• Añade un ID al iframe.
• Añada el dominio de inserción al atributo src del iframe.
• Añade el dominio de inserción a la lista de permitidos.

Añadir un ID al iframe

Más adelante, cuando recupere datos del iframe, deberá validar que la información con la que está trabajando procede realmente del iframe de Looker. Para facilitar este proceso, añade un ID a tu iframe si aún no lo has hecho. En el siguiente ejemplo, se asigna el ID looker añadiendo id="looker" al iframe:

<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>

Añadir el dominio de inserción al atributo src del iframe

En el atributo src del iframe, incluya el dominio en el que se está usando el iframe. En el siguiente ejemplo, puede especificar myownpersonaldomain.com como dominio añadiendo ?embed_domain=https://myownpersonaldomain.com" al final de la URL en el atributo src:

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com">
</iframe>

Si utilizas la inserción con firma, asegúrate de añadir el embed_domain a la URL de inserción.

Si usas el SDK de inserción, añade sdk=3 al final de la URL de inserción. El parámetro sdk=3 indica que el SDK está presente y que Looker puede aprovechar las funciones adicionales que proporciona el SDK, como la transmisión de eventos de JavaScript entre el iframe de Looker y su dominio. El SDK no puede añadir este parámetro por sí mismo porque forma parte de la URL firmada. Por ejemplo:

<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>

Añadir el dominio de inserción a la lista de permitidos

Por último, debes añadir el dominio en el que se usa el iframe a la lista de permitidos de la página Insertar del panel Administrar de Looker. Para ello, sigue estos pasos:

1. En el campo Lista de permitidos de dominios insertados, introduzca el dominio en el que se está usando el iframe y, a continuación, pulse la tecla Tab para que el dominio aparezca en un cuadro dentro del campo.

2. Haz clic en Actualizar.

Puedes usar el comodín * en la lista de permitidas para crear un patrón de dominio. Por ejemplo, https://*.myownpersonaldomain.com permitiría tanto https://analytics.myownpersonaldomain.com como https://data.myownpersonaldomain.com.

Si usas la inserción sin cookies con Looker 23.8 o una versión posterior, el dominio de inserción se puede especificar cuando se adquiere la sesión sin cookies. Esta es una alternativa a añadir el dominio de inserción a la lista de permitidos mediante el panel Administrar > Insertar. Consulta las prácticas recomendadas de seguridad si decides aprovechar esta función.

Obtener datos del iframe

Después de completar los pasos de preparación, puedes acceder a los eventos que se transfieren entre el iframe de Looker y tu dominio procesando los eventos postMessage.

El iframe insertado puede crear varios tipos de eventos, tal como se describe en la sección Referencia de tipos de eventos de esta página.

Acceder a eventos en JavaScript

A continuación, se muestra un ejemplo de cómo detectar estos eventos en JavaScript y, a continuación, registrarlos en la consola:

window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

A continuación se muestra un ejemplo de cómo procesar estos eventos en jQuery y, después, registrarlos en la consola:

$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});

Tabla de resumen de tipos de eventos

En la siguiente tabla se resumen los tipos de eventos. Selecciona un tipo de evento para ver los detalles correspondientes.