הודעות iframe מוטמעות של Looker

1. לפני שמתחילים

התוכן של Looker צריך להיות מוטמע בתוך iframe באמצעות הטמעה פרטית או הטמעה באמצעות SSO. ב-Codelab הזה, נבצע אינטראקציה עם ה-iframe באמצעות JavaScript כדי להפוך את דף האינטרנט לדינמי יותר. דף האינטרנט ישלח הודעות לתוכן Looker המוטמע ב-iframe ויקבל ממנו הודעות.

דרישות מוקדמות

מה תלמדו

  • איך מכינים את המופע של iframe ושל Looker לאינטראקציה של JavaScript
  • איך להאזין לאירועים מה-iframe
  • איך שולחים הודעות פעולה ל-iframe

מה צריך להכין

  • גישה ל-HTML ול-JavaScript של קוד הקצה הקדמי שמנהלים את ה-iframe
  • גישה להגדרות ההטמעה של האדמין במכונה של Looker

2. הכנות

כדי שתוכלו לבצע פעולות ב-iframe, עליכם להכין את ה-iframe ואת מכונה של Looker.

הוספת מאפיין id ל-iframe

תצטרכו לאמת את ההודעות שמגיעות מה-iframe. כדי לעשות זאת, צריך להגדיר מאפיין id ב-iframe:

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

מוסיפים את הדומיין של הטמעת הקוד למאפיין src של ה-iframe.

בודקים את הדומיין של דף האינטרנט שמארח את ה-iframe. נניח שכתובת ה-URL של דף האינטרנט היא https://mywebsite.com/with/embed, אז הדומיין של דף האינטרנט הוא https://mywebsite.com.

אם משתמשים בהטמעה פרטית, ב-src של ה-iframe, מוסיפים את הדומיין כפרמטר שאילתה embed_domain:

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

אם אתם משתמשים בהטמעת SSO, מוסיפים את הדומיין כפרמטר של שאילתה embed_domain לכתובת ה-URL להטמעה.

הוספת הדומיין של ההטמעה לרשימת ההיתרים במכונה של Looker

לבסוף, צריך להוסיף את הדומיין של התוסף לרשימת ההיתרים במכונה של Looker כדי לאפשר שליחת הודעות.

עוברים לדף Embed בקטע Admin במכונה של Looker. https://your_instance.looker.com/admin/embed

בשדה Embedded Domain Allowlist, מזינים את הדומיין של ה-embed. לאחר ההקלדה, מקישים על Tab כדי שהדומיין יופיע בתיבה. אין להוסיף קו נטוי בסוף /.

לוחצים על הלחצן עדכון.

3. האזנה להודעות אירועים מה-iframe

ה-iframe עם התוכן המוטמע של Looker שולח הודעות לדף האינטרנט של המארח שלו. הודעות האירועים האלה מכילות מידע עדכני על תוכן המראה המוטמע, למשל אם הטעינה של מרכז הבקרה המוטמע התחילה או שהמשתמש בחר באפשרות ההורדה מתוך התוכן המוטמע. בואו נקבל וננתח את האירועים האלה.

הסבר על הסכימה של אובייקט האירוע

הסכימה של אובייקט האירוע היא:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

האירוע תמיד יכלול את המאפיין type שמאפשר לכם לקבוע איזה אירוע זה. כל שאר המאפיינים הספציפיים לאירוע מוגדרים במאמר העזרה בנושא אירועים.

קבלה וניתוח של האירוע

מוסיפים את הקוד הזה למקום שבו JavaScript של דף האינטרנט מפעיל או מנהל את ה-iframe:

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

קטע הקוד מבצע את הפעולות הבאות:

  1. האזנה לאירוע "message" מהאובייקט window.
  2. המאפיין source של ההודעה בודק את ה-iframe עם התוכן המוטמע של Looker.
  3. הפונקציה בודקת שהמאפיין origin של ההודעה הוא הדומיין של המופע ב-Looker.
  4. המערכת מבצעת ניתוח של המאפיין data של ההודעה כדי לגשת לאובייקט האירוע ולנתח אותו.
  5. המתג מפעיל את המאפיין type של אובייקט האירוע כדי לקבוע באיזה אירוע מדובר ולפעול לפיו.

עכשיו דף האינטרנט המארח יכול להגיב באופן דינמי לאירועים שהתוכן המוטמע של Looker פולט.

4. שליחת הודעה פעולה ל-iframe

דף האינטרנט המארח יכול גם לשלוח הודעות לתוכן Looker המוטמע ב-iframe. הודעות הפעולה האלה יכולות לשנות את המצב של תוכן Looker המוטמע, למשל לעדכן את המסננים במרכז הבקרה המוטמע. עכשיו ניצור הודעת פעולה שמנחה את מרכז הבקרה המוטמע להריץ את השאילתות שלו ולשלוח את ההודעה ל-iframe שלכם.

יצירת הודעת פעולה

יוצרים הודעת פעולה ב-JavaScript של דף האינטרנט:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

הפורמט של האובייקט action זהה לפורמט של האובייקט event הקודם. תמיד יהיה לו מאפיין type ולאחר מכן מאפיינים ספציפיים לפעולה שמוגדרים בהפניה לפעולה. הודעת הפעולה צריכה להיות בפורמט JSON.

שליחת הודעת הפעולה

בתוך קוד ה-JavaScript של דף האינטרנט, שולחים את הפעולה בפורמט JSON אל ה-iframe:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. קובעים את ה-iframe שאליו תשלחו את הפעולה.
  2. כדי לשלוח את ההודעה, צריך להפעיל את השיטה postMessage() במאפיין contentWindow של ה-iframe.

עכשיו דף האינטרנט המארח יכול לשנות באופן דינמי את המצב של תוכן Looker המוטמע.

5. מידע נוסף

מעולה! עכשיו אפשר להאזין לאירועים מתוכן Looker המוטמע ב-iframe ולשלוח אליו פעולות. לקבלת מידע נוסף, אפשר לעיין במקורות המידע הבאים: