IFRAME VÀ CÁCH GIAO TIẾP GIỮA IFRAME VÀ MAIN PAGE

Dự án hiện tại của mình có sự phối hợp của nhiều bên. Mỗi bên phát triển một phần khác nhau kết hợp lại thành sản phẩm hoàn chỉnh.

Phương pháp được lựa chọn ở đây là dùng thẻ Iframe của HTML để ghép các phần vào nhau. Tuy vậy, sau khi thực hiện có xuất hiện một số vấn đề về domain hoặc cách thức lắng nghe thông điệp giữa hai bên.

Chúng ta cùng tìm hiểu và đưa ra cách khắc phục cho những vấn đề trên.

THẺ IFRAME LÀ GÌ?

Iframe là một tag HTML có tác dụng hiển thị một trang web trong một trang web khác.

Cú pháp

<iframe src="http://www.w3schools.com"></iframe>

src: Chứa đường dẫn tới trang web muốn hiển thỵ.

Hiện tại Iframe được hỗ trợ bởi tất cả các trình duyệt.

Chi tiết về từng attributes của Iframe các bạn có thể tham khảo ở đây

CONFIG ĐỂ MAIN PAGE CÓ THỂ SỬ DỤNG IFRAME PAGE

Để các trang iframe page chấp nhận được hiển thỵ trong trang main page dưới dạng thẻ iframe cần thêm config này trong file: config/application.rb

config.action_dispatch.default_headers = {
  "X-Frame-Options" => "ALLOWALL"
}

CONFIG ĐƯỜNG LINK TƯƠNG ĐỐI HOẶC TUYỆT ĐỐI

Đường link tương đối: Khi ghép iframe vào main page sẽ có dạng sau /mypage/jobs

Đường link tuyệt đối: Khi ghép iframe vào main page sẽ có dạng sau https://{iframe_url}/mypage/jobs

Khi sử dụng thẻ iframe không có config gì thêm main page sẽ mặc định nhận iframe dưới dạng đường link tương đối.

Để main page nhận iframe dưới dạng đường link tuyệt đối thêm config sau trong iframe page file config/application.rb:

config.action_controller.asset_host = "DOMAIN"

LẮNG NGHE THÔNG ĐIỆP TỪ IFRAME PAGE BẰNG JS

Vì iframe sẽ hiển thỵ một trang web khác hoàn toàn nên những tác vụ cần sự kết hợp của hai bên cần phải có một kênh thông tin lắng nghe điều này.

Có hai cái cách:

C1: Sử dụng API cách này khá rõ ràng tuy nhiên sẽ tốn tài nguyên của server vì phải request liên lục lên server.

C2: Giao tiếp trực tiếp từ clien bằng JS

ỨNG DỤNG DEMO PHẦN ĐÓNG MỞ POPUP

Thêm đoạn code sau vào view của main page:

<div class="popup-origin" id="popup-origin">
  <div class="popup-overlay"></div>
  <div class="popup-window is-lastest-window">
    <div class="popup-content-size ui-draggable ui-draggable-handle ui-resizable">
      <p class="popup-close"></p>
      <iframe class="popup-content" src="" allowfullscreen></iframe>
    </div>
  </div>
</div>
<div class="row" id="popup"></div>

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    var url = event.data["url"];
    var status = event.data["status"];
    var OPEN_POPUP = 1;

    if (status == OPEN_POPUP) {
      var popup = $("#popup-origin").clone();
      $("#popup").empty().append(popup);
      $("#popup").find(".popup-origin").show().find("iframe").attr("src", url);
    } else {
      $("#popup").empty();
    };
  }, false);

  $(document).on("click",".popup-close",function() {
    $("#popup").empty();
  });
</script>

Trong đó: window.addEventListener("message", function(event) { }): Thêm một event để lắng nghe mọi thông điệp được gửi từ các iframe page

Khi đó trong các trang iframe page chỉ cần dử dụng đoạn code sau để gửi data lên main page.

<script type="text/javascript">
  $("#js-scroll-tab-apply .row").click(function(){
    top.postMessage({url: "url", status: 1}, "http://mainpage_url");
  });
</script>

Tóm lại iframe là một tag html khá hữu ích và được ứng dụng khác nhiều trong các ứng dụng web có sự kết hợp nhiều bên.

Bài viết chỉ đề cập một số vấn đề thực tế gặp phải trong dự án rất mong nhận được sự đánh giá từ bạn đọc.

Thanks for reading !!!