Trang này được dịch bởi Cloud Translation API.

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 thông qua JavaScript để trang web của bạn trở nê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

Có một thực thể Looker đang chạy
Có trang tổng quan Looker được nhúng riêng tư hoặc được nhúng SSO bên trong một iframe
Tìm hiểu phương thức window.postMessage()

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

Cách chuẩn bị iframe và thực thể Looker để tương tác với JavaScript
Cách nghe sự kiện từ iframe
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à có chức nă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 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 trước khi 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 nội dung 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 sử dụng tính năng Nhúng SSO, hãy thêm miền dưới 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. Các thông báo sự kiện này chứa thông tin kịp thời về nội dung Looker đượ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 tuỳ chọn Tải xuống trong nội dung được nhúng. Hãy cùng 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ó một thuộc tính type cho phép bạn xác định đó là sự kiện 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 mã này vào vị trí JavaScript của trang web khởi chạy hoặc quản lý 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"); 
    }
  }
});

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

Theo dõi sự kiện "message" từ đối tượng window.
Kiểm tra thuộc tính source của thông báo là iframe có nội dung Looker được nhúng.
Kiểm tra thuộc tính origin của thông báo là miền của thực thể Looker.
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.
Bật thuộc tính type của đối tượng sự kiện để xác định sự kiện đó là 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 linh động 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ủa bạn cũng có thể gửi thông báo đến nội dung Looker được nhúng trong 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 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 hành động được định dạng JSON đến iframe:

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

Xác định iframe mà bạn sẽ gửi hành động đến.
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 trong 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 từ và gửi hành động đến nội dung Looker được nhúng trong iframe. Hãy tham khảo các tài nguyên sau để biết thêm thông tin:

Tài liệu tham khảo về sự kiện cho tất cả sự kiện hiện có và các thuộc tính của sự kiện
Tài liệu tham khảo về hành động cho tất cả hành động có sẵn và thuộc tính của hành động đó
Các phương pháp hay nhất về bảo mật liên quan đến việc nhúng nội dung Looker