iframe vs mainpage

Khi muốn ghép 1 page của 1 website hoặc chèn video, nhạc ... vào trong mainpage chúng ta thường sử dụng iframe. . Tuy nhiên 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. Vì vậy trong khuôn khổ bài này chúng ta cùng tìm hiểu và đưa ra cách khắc phục cho những vấn đề đó nhé

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.

Attributes của Iframe xem ở đây

Config Mainpage để sử dụng iframe ngọt lành

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 sauhttps://{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:

1. 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.
2. 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>

Kết luận:

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.