IFRAME VÀ CÁCH GIAO TIẾP GIỮA IFRAME VÀ MAIN PAGE - Viblo
Có thể bạn quan tâm
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 !!!
Từ khóa » Cách Sử Dụng Iframe
-
IFrame Là Gì? Cách Nhúng IFrame Vào Website Sao Cho Tối ưu Nhất?
-
Thẻ IFrame Trong HTML Là Gì? Cách Sử Dụng IFrame Trong HTML
-
Cách Nhúng Một Trang Web Bằng Thẻ Iframe Trong HTML
-
IFrame Là Gì? Cách Nhúng IFrame Vào Website Sao Cho Tối ưu Nhất
-
Iframe | Tag Html | Học Web Chuẩn
-
Iframe Là Gì? Hướng Dẫn Cách Nhúng Iframe Vào Web Hiệu Quả - Bizfly
-
Hướng Dẫn Và Ví Dụ HTML IFrame - Openplanning
-
IFrame Là Gì?
-
Bài 22: Thẻ Iframe Trong HTML - Tìm ở đây
-
Iframe Là Gì? Cách Nhúng Iframe Vào Website? - Bizfly Cloud
-
Thẻ IFRAME Trong HTML – Nhúng Trang Web Khác Vào Web Của Mình
-
IFrame Là Gì? Hướng Dẫn Nhúng IFrame Vào Website đơn Giản
-
Iframe Là Gì? Tất Cả Thông Tin [CẦN BIẾT] Về Iframe - Nhân Hòa
-
IFrame Là Gì? Cách Nhúng IFrame Vào Web - Thủ Thuật Phần Mềm