پیام‌های iframe Looker تعبیه‌شده

1. قبل از شروع

شما باید محتوای Looker را در داخل یک iframe با تعبیه خصوصی یا جاسازی SSO داشته باشید. در این کد لبه، ما با iframe شما از طریق جاوا اسکریپت تعامل خواهیم داشت تا صفحه وب شما را پویاتر کنیم. صفحه وب شما به محتوای Looker تعبیه شده iframe پیام می فرستد و از آن پیام دریافت می کند.

پیش نیازها

چیزی که یاد خواهید گرفت

  • چگونه نمونه iframe و Looker خود را برای تعامل جاوا اسکریپت آماده کنیم
  • چگونه به رویدادها از iframe خود گوش دهید
  • نحوه ارسال پیام های اکشن به iframe

آنچه شما نیاز دارید

  • به HTML و جاوا اسکریپت کد ظاهری خود که iframe را مدیریت می کند دسترسی داشته باشید
  • به تنظیمات جاسازی ادمین در نمونه Looker خود دسترسی داشته باشید

2. آماده سازی

قبل از اینکه بتوانید با iframe تعامل کنید، باید iframe و نمونه Looker خود را آماده کنید.

یک ویژگی id به iframe اضافه کنید

شما باید پیام های دریافتی از iframe را تأیید کنید. برای انجام این کار، یک ویژگی id در iframe تعریف کنید: 

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

دامنه embed را به ویژگی src iframe اضافه کنید

دامنه صفحه وب میزبان iframe را تعیین کنید. فرض کنید URL صفحه وب https://mywebsite.com/with/embed است، سپس دامنه صفحه وب https://mywebsite.com است.

اگر از Private Embedding استفاده می کنید، در src iframe، دامنه را به عنوان پارامتر query embed_domain اضافه کنید:

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

اگر از SSO Embedding استفاده می‌کنید، دامنه را به عنوان پارامتر جستجوی embed_domain به URL جاسازی شده اضافه کنید.

دامنه جاسازی را در نمونه Looker فهرست کنید

در نهایت، برای اجازه دادن به ارسال پیام، باید دامنه جاسازی را در نمونه Looker خود لیست کنید.

به صفحه Embed در بخش مدیریت نمونه Looker خود بروید. https://your_instance.looker.com/admin/embed

در قسمت Embedded Domain Allowlis t، دامنه embed را وارد کنید. پس از تایپ آن، کلید Tab را بزنید تا دامنه در یک کادر ظاهر شود. اسلش انتهایی / اضافه نشود.

دکمه Update را انتخاب کنید.

3. به پیام های رویداد از iframe گوش دهید

iframe شما با محتوای Looker تعبیه شده پیام هایی را به صفحه وب میزبان خود ارسال می کند. این پیام‌های رویداد حاوی اطلاعات به‌موقع درباره محتوای جستجوگر تعبیه‌شده هستند، مانند اینکه داشبورد جاسازی‌شده بارگیری شده است یا کاربر گزینه دانلود را در محتوای جاسازی شده انتخاب کرده است. بیایید این رویدادها را دریافت و تجزیه کنیم.

طرحواره شی رویداد را درک کنید

طرح واره شی رویداد:

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

رویداد همیشه دارای یک خاصیت type خواهد بود که به شما امکان می دهد تعیین کنید که چه رویدادی است. تمام ویژگی های خاص رویداد دیگر در مرجع رویدادهای ما تعریف شده است.

رویداد را دریافت و تجزیه کنید

این را به جایی اضافه کنید که جاوا اسکریپت صفحه وب شما 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 شما ارسال کند.

یک پیام اقدام ایجاد کنید

یک پیام اقدام در جاوا اسکریپت صفحه وب خود ایجاد کنید:

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

شی action از همان قالب شی event قبلی پیروی می کند. همیشه دارای یک ویژگی type و سپس ویژگی های خاص عمل است که در مرجع اقدام ما تعریف شده است. پیام اقدام باید فرمت JSON باشد.

پیام اقدام را ارسال کنید

در داخل جاوا اسکریپت صفحه وب خود، اقدام با فرمت 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 خود ارسال کنید. برای اطلاعات بیشتر این منابع را بررسی کنید: