এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

এমবেডেড লুকার আইফ্রেম মেসেজিং

1. আপনি শুরু করার আগে

আপনার ব্যক্তিগত এম্বেডিং বা এসএসও এম্বেডিং সহ একটি আইফ্রেমের ভিতরে লুকার সামগ্রী এমবেড করা উচিত। এই কোডল্যাবে, আমরা আপনার ওয়েবপৃষ্ঠাটিকে আরও গতিশীল করতে জাভাস্ক্রিপ্টের মাধ্যমে আপনার আইফ্রেমের সাথে যোগাযোগ করব। আপনার ওয়েব পৃষ্ঠা আইফ্রেমের এমবেডেড লুকার সামগ্রী থেকে বার্তা পাঠাবে এবং বার্তা গ্রহণ করবে৷

পূর্বশর্ত

একটি চলমান Looker উদাহরণ আছে
আইফ্রেমের ভিতরে একটি লুকার ড্যাশবোর্ড ব্যক্তিগতভাবে এম্বেড করা বা SSO এম্বেড করা আছে
window.postMessage() পদ্ধতি বুঝুন

আপনি কি শিখবেন

জাভাস্ক্রিপ্ট ইন্টারঅ্যাকশনের জন্য কীভাবে আপনার আইফ্রেম এবং লুকারের উদাহরণ প্রস্তুত করবেন
আপনার আইফ্রেম থেকে ইভেন্টগুলি কীভাবে শুনবেন
কিভাবে আপনার আইফ্রেমে অ্যাকশন মেসেজ পাঠাবেন

আপনি কি প্রয়োজন হবে

আপনার ফ্রন্টএন্ড কোডের এইচটিএমএল এবং জাভাস্ক্রিপ্টে অ্যাক্সেস যা iframe পরিচালনা করে
আপনার লুকার ইনস্ট্যান্সে অ্যাডমিন এম্বেড সেটিংসে অ্যাক্সেস করুন

2. প্রস্তুতি

আইফ্রেমের সাথে ইন্টারঅ্যাক্ট করার আগে আপনাকে আপনার আইফ্রেম এবং লুকারের উদাহরণ প্রস্তুত করতে হবে।

আইফ্রেমে একটি `id` অ্যাট্রিবিউট যোগ করুন

আপনার আইফ্রেম থেকে আসা বার্তাগুলিকে যাচাই করতে হবে। এটি করার জন্য, iframe এ একটি id বৈশিষ্ট্য সংজ্ঞায়িত করুন:

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

iframe এর `src` অ্যাট্রিবিউটে এম্বেডের ডোমেন যোগ করুন

আইফ্রেম হোস্টিং ওয়েবপৃষ্ঠার ডোমেন নির্ধারণ করুন। বলুন ওয়েবপেজের URL হল https://mywebsite.com/with/embed তারপর ওয়েবপেজের ডোমেন হল https://mywebsite.com ।

আপনি যদি ব্যক্তিগত এম্বেডিং ব্যবহার করেন, iframe এর src-এ, ডোমেনটিকে একটি embed_domain ক্যোয়ারী প্যারামিটার হিসেবে যোগ করুন:

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

আপনি যদি SSO এম্বেডিং ব্যবহার করেন, তাহলে এম্বেড URL- এ একটি embed_domain ক্যোয়ারী প্যারামিটার হিসেবে ডোমেনটিকে যোগ করুন।

লুকার ইন্সট্যান্সে এম্বেডের ডোমেনের অনুমতি দিন

সবশেষে, মেসেজ পাঠানোর অনুমতি দেওয়ার জন্য আপনাকে আপনার লুকার ইন্সট্যান্সে এম্বেডের ডোমেনের অনুমতি তালিকাভুক্ত করতে হবে।

আপনার লুকার ইনস্ট্যান্সের অ্যাডমিন বিভাগে এম্বেড পৃষ্ঠাতে নেভিগেট করুন। https://your_instance.looker.com/admin/embed

এমবেডেড ডোমেন অ্যালোলিস টি ক্ষেত্রে, এম্বেডের ডোমেন লিখুন। এটি টাইপ করার পরে, ট্যাব কী টিপুন যাতে ডোমেনটি একটি বাক্সে উপস্থিত হয়। একটি ট্রেলিং স্ল্যাশ / অন্তর্ভুক্ত করবেন না।

আপডেট বোতামটি নির্বাচন করুন।

3. iframe থেকে ইভেন্ট বার্তা শুনুন

এমবেডেড লুকার কন্টেন্ট সহ আপনার আইফ্রেম তার হোস্ট ওয়েবপেজে বার্তা পাঠায়। এই ইভেন্ট বার্তাগুলিতে এমবেডেড লুকার বিষয়বস্তু সম্পর্কে সময়মত তথ্য থাকে, যেমন এমবেড করা ড্যাশবোর্ড লোড হওয়া শুরু করেছে বা ব্যবহারকারী এমবেড করা সামগ্রীর মধ্যে ডাউনলোড বিকল্পটি নির্বাচন করেছেন৷ আসুন এই ইভেন্টগুলি গ্রহণ এবং বিশ্লেষণ করি।

ইভেন্ট অবজেক্ট স্কিমা বুঝুন

ইভেন্ট অবজেক্টের স্কিমা হল:

{
  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"); 
    }
  }
});

কোড স্নিপেট নিম্নলিখিত কাজ করে:

window অবজেক্ট থেকে "message" ইভেন্টের জন্য শোনে।
এমবেডেড লুকার বিষয়বস্তু সহ বার্তার source বৈশিষ্ট্যটি আইফ্রেম কিনা তা পরীক্ষা করে।
বার্তার origin সম্পত্তি আপনার লুকার ইনস্ট্যান্সের ডোমেন কিনা তা পরীক্ষা করে।
JSON ইভেন্ট অবজেক্ট অ্যাক্সেস এবং পার্স করতে বার্তার data বৈশিষ্ট্য পার্স করে।
ইভেন্ট অবজেক্টের type প্রপার্টি চালু করে এটি কোন ইভেন্ট তা নির্ধারণ করতে এবং এটিতে কাজ করে।

এখন আপনার হোস্ট ওয়েবপেজ আপনার এমবেডেড লুকার সামগ্রী নির্গত ইভেন্টগুলিতে গতিশীলভাবে প্রতিক্রিয়া জানাতে পারে!

4. iframe এ কর্ম বার্তা পাঠান

আপনার হোস্ট ওয়েবপেজ আপনার আইফ্রেমের এমবেডেড লুকার সামগ্রীতেও বার্তা পাঠাতে পারে৷ এই অ্যাকশন বার্তাগুলি আপনার এমবেড করা লুকার সামগ্রীর অবস্থা পরিবর্তন করতে পারে, যেমন আপনার এম্বেড করা ড্যাশবোর্ডে ফিল্টার আপডেট করা। আসুন একটি অ্যাকশন বার্তা তৈরি করি যা আপনার এমবেডেড ড্যাশবোর্ডকে তার প্রশ্নগুলি চালাতে এবং বার্তাটি আপনার আইফ্রেমে পাঠাতে বলে৷

একটি কর্ম বার্তা তৈরি করুন

আপনার ওয়েবপৃষ্ঠার জাভাস্ক্রিপ্টের ভিতরে একটি অ্যাকশন বার্তা তৈরি করুন:

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

action অবজেক্ট আগের event অবজেক্টের মতো একই ফর্ম্যাট অনুসরণ করে। এটিতে সর্বদা একটি type সম্পত্তি থাকবে এবং তারপরে অ্যাকশন নির্দিষ্ট বৈশিষ্ট্য থাকবে যা আমাদের অ্যাকশন রেফারেন্সে সংজ্ঞায়িত করা হয়েছে। অ্যাকশন মেসেজ অবশ্যই JSON ফরম্যাটেড হতে হবে।

কর্ম বার্তা পাঠান

আপনার ওয়েবপৃষ্ঠার জাভাস্ক্রিপ্টের ভিতরে আপনার আইফ্রেমে JSON ফর্ম্যাট করা অ্যাকশন পাঠান:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');

আপনার আইফ্রেম নির্ধারণ করুন যেটিতে আপনি আপনার অ্যাকশন পাঠাবেন।
বার্তা পাঠাতে iframe এর contentWindow প্রপার্টিতে postMessage() পদ্ধতিতে কল করুন।

এখন আপনার হোস্ট ওয়েবপৃষ্ঠা গতিশীলভাবে আপনার এমবেডেড লুকার সামগ্রীর অবস্থা পরিবর্তন করতে পারে!

5. অতিরিক্ত তথ্য

অভিনন্দন! আপনি এখন থেকে ইভেন্ট শুনতে পারেন এবং আপনার আইফ্রেমের এমবেড করা লুকার সামগ্রীতে অ্যাকশন পাঠাতে পারেন। আরও তথ্যের জন্য এই সংস্থানগুলি দেখুন:

সমস্ত উপলব্ধ ইভেন্ট এবং তাদের বৈশিষ্ট্যের জন্য ইভেন্টের রেফারেন্স
সমস্ত উপলব্ধ ক্রিয়া এবং তাদের বৈশিষ্ট্যগুলির জন্য অ্যাকশন রেফারেন্স
আপনার লুকার কন্টেন্ট এম্বেড করার জন্য নিরাপত্তার সর্বোত্তম অনুশীলন