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

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

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

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

מה תלמדו

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

מה צריך להכין

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

2. הכנות

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

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

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

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

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

בודקים את הדומיין של דף האינטרנט שמארח את ה-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

בשדה Allowed Domain Allowlis (אישור דומיין מוטמע), מזינים את הדומיין של ההטמעה. לאחר ההקלדה, מקישים על 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. JSON מנתח את המאפיין 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. מידע נוסף זמין במקורות המידע הבאים: