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

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

Bạn phải nhúng nội dung trên Looker vào iframe với tính nă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 của bạn thông qua JavaScript để giúp trang web của bạn linh động hơn. Trang web của bạn sẽ gửi thông báo đến 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à thực thể Looker cho hoạt động tương tác JavaScript
  • Cách nghe sự kiện từ iframe của bạn
  • Cách gửi thông báo hành động đến iframe của bạn

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 mà 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 của bạn

2. Công tác chuẩn bị

Bạn cần chuẩn bị iframe và thực thể Looker rồi mới có thể tương tác với iframe.

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

Bạn sẽ cần xác thực các tin nhắn đến từ iframe. Để thực hiện việc này, hãy xác định 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 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 web là https://mywebsite.com/with/embed, thì miền của trang web là https://mywebsite.com.

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

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

Nếu bạn đang dùng phương thức Nhúng SSO, hãy thêm miền ở dạng tham số truy vấn embed_domain vào URL nhúng.

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

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

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 Được phép đối với miền được nhúng, hãy nhập miền của nội dung nhúng. Sau khi nhập, hãy nhấn phím Tab để miền xuất hiện trong một hộp. Không được dấu gạch chéo ở cuối /.

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

3. Nghe các thông báo sự kiện từ iframe

iframe của bạn có nội dung được nhúng trên Looker sẽ gửi thông báo đến trang web lưu trữ tương ứng. Những thông báo về sự kiện này chứa thông tin kịp thời về nội dung của trình giao diện được nhúng, chẳng hạn như liệu trang tổng quan được nhúng đã bắt đầu tải hay người dùng đã chọn lựa 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 về giản đồ đối tượng sự kiện

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

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

Sự kiện sẽ luôn có 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 cụ thể khác của sự kiện đượ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 cú pháp sự kiện

Thêm đoạn mã này vào nơi JavaScript của trang web của bạn khởi chạy 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 sẽ thực hiện những việc sau:

  1. Theo dõi sự kiện "message" từ đối tượng window.
  2. Kiểm tra thuộc tính source của thông báo là iframe với nội dung được nhúng trên Looker.
  3. Kiểm tra để đảm bảo rằng tài sản origin của thông báo là miền của phiên bản Looker.
  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. Bật thuộc tính type của đối tượng sự kiện để xác định đó là sự kiện gì và thực hiện hành động đối với sự kiện đó.

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

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

Trang web lưu trữ của bạn cũng có thể gửi thông báo đến nội dung Looker được nhúng trong iframe. Những thông báo hành động này có thể thay đổi trạng thái của nội dung trong Looker được nhúng, chẳng hạn như cập nhật các 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 truy vấn và gửi thông báo đó đến iframe.

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

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

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

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

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

Bên trong JavaScript của trang web, hãy gửi thao tác có định dạng JSON tới 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 thao tác đế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 động 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ể nghe các sự kiện từ và gửi các hành động đến nội dung Looker được nhúng của iframe. Hãy tham khảo các tài nguyên sau để biết thêm thông tin: