Thông báo bằng iframe của Looker được nhúng

1. Trước khi bắt đầu

Bạn nên nhúng nội dung Looker vào trong một iframe bằng cách sử dụng nhúng riêng tư hoặc nhúng SSO. Trong lớp học lập trình này, chúng ta sẽ tương tác với iframe thông qua JavaScript để làm cho trang web của bạn trở nên linh hoạt hơn. Trang web của bạn sẽ gửi và nhận thông báo từ nội dung Looker được nhúng của iframe.

Điều kiện tiên quyết

Kiến thức bạn sẽ học được

  • Cách chuẩn bị iframe và phiên bản Looker cho hoạt động tương tác JavaScript
  • Cách theo dõi các sự kiện từ iframe
  • Cách gửi tin nhắn hành động đến iframe

Bạn cần có

  • Quyền truy cập vào HTML và JavaScript của mã giao diện người dùng để quản lý iframe
  • Quyền truy cập vào chế độ cài đặt nhúng của quản trị viên trong phiên bản Looker

2. Chuẩn bị

Bạn cần chuẩn bị iframe và phiên bản Looker trước khi có thể tương tác với iframe.

Thêm một id thuộc tính vào iframe

Bạn sẽ cần xác thực các thông báo đến từ iframe. Để làm như vậy, hãy xác định một thuộc tính id trên iframe:

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

Thêm miền của nội dung được nhúng vào thuộc tính src của iframe

Xác định miền của trang web lưu trữ iframe. Giả sử URL của trang là https://mywebsite.com/with/embed thì miền của trang đó là https://mywebsite.com.

Nếu bạn đang sử dụng tính năng Nhúng riêng tư, hãy thêm miền làm tham số truy vấn embed_domain vào src của iframe:

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

Nếu bạn đang sử dụng tính năng Nhúng SSO, hãy thêm miền làm tham số truy vấn embed_domain vào URL nhúng.

Thêm miền của thành phần nhúng vào danh sách cho phép trong phiên bản Looker

Cuối cùng, bạn cần đưa miền của thành phần nhúng vào danh sách cho phép trong phiên bản Looker để cho phép gửi thông báo.

Chuyển đến trang Nhúng trong mục Quản trị của phiên bản Looker. https://your_instance.looker.com/admin/embed

Trong trường Danh sách cho phép miền được nhúng, hãy nhập miền của nội dung được nhúng. Sau khi nhập, hãy nhấn phím Tab để miền xuất hiện trong một hộp. Đừng thêm dấu gạch chéo ở cuối /.

Chọn nút Cập nhật.

3. Theo dõi thông báo sự kiện từ iframe

Iframe có nội dung Looker được nhúng sẽ gửi thông báo đến trang web lưu trữ. Các thông báo event này chứa thông tin kịp thời về nội dung Looker được nhúng, chẳng hạn như nếu trang tổng quan được nhúng đã bắt đầu tải hoặc người dùng đã chọn tuỳ chọn Tải xuống trong nội dung được nhúng. Hãy nhận và phân tích cú pháp các sự kiện này.

Tìm hiểu giản đồ đối tượng sự kiện

Giản đồ của đối tượng sự kiện là:

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

Sự kiện sẽ luôn có một thuộc tính type cho phép bạn xác định sự kiện đó là gì. Tất cả các thuộc tính khác dành riêng cho sự kiện đều được xác định trong tài liệu tham khảo về sự kiện của chúng tôi.

Nhận và phân tích sự kiện

Thêm đoạn mã này vào nơi JavaScript của trang web khởi tạo hoặc quản lý iframe của bạn:

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

Đoạn mã này thực hiện những việc sau:

  1. Lắng nghe sự kiện "message" từ đối tượng window.
  2. Kiểm tra xem thuộc tính source của thông báo có phải là iframe có nội dung Looker được nhúng hay không.
  3. Kiểm tra xem thuộc tính origin của thông báo có phải là miền của phiên bản Looker hay không.
  4. JSON phân tích cú pháp thuộc tính data của thông báo để truy cập và phân tích cú pháp đối tượng sự kiện.
  5. Chuyển đổi trên thuộc tính type của đối tượng sự kiện để xác định sự kiện đó là gì và hành động dựa trên sự kiện đó.

Giờ đây, trang web lưu trữ của bạn có thể phản ứng linh hoạt với các sự kiện mà nội dung Looker được nhúng phát ra!

4. Gửi thông báo hành động đến iframe

Trang web lưu trữ cũng có thể gửi thông báo đến nội dung Looker được nhúng của iframe. Các thông báo hành động này có thể thay đổi trạng thái của nội dung Looker được nhúng, chẳng hạn như cập nhật bộ lọc trên trang tổng quan được nhúng. Hãy tạo một thông báo hành động để yêu cầu trang tổng quan được nhúng chạy các truy vấn và gửi thông báo đến iframe của bạn.

Tạo thông báo hành động

Tạo một thông báo hành động trong JavaScript của trang web:

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

Đối tượng action có cùng định dạng với đối tượng event trước đó. Đối tượng này sẽ luôn có một thuộc tính type, sau đó là các thuộc tính cụ thể của hành động được xác định trong tài liệu tham khảo về hành động của chúng tôi. Thông báo hành động phải ở định dạng JSON.

Gửi thông báo hành động

Trong JavaScript của trang web, hãy gửi hành động được định dạng JSON đến iframe của bạn:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. Xác định iframe mà bạn sẽ gửi hành động đến.
  2. Gọi phương thức postMessage() trên thuộc tính contentWindow của iframe để gửi thông báo.

Giờ đây, trang web lưu trữ của bạn có thể linh hoạt thay đổi trạng thái của nội dung Looker được nhúng!

5. Thông tin khác

Xin chúc mừng! Giờ đây, bạn có thể theo dõi các sự kiện và gửi thao tác đến nội dung Looker được nhúng trong iframe. Hãy tham khảo các tài nguyên sau đây để biết thêm thông tin: