Cách sử dụng iFrame

Cú pháp đơn giản nhất dùng để nhúng iFrame vào website là:

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

Config iFrame page là gì?

Để các trang iFrame page chấp nhận được hiển thị trong trang main page dưới dạng thẻ iFrame, bạn cần thêm config này trong file:

 

iFrame Config là gì?

Có 2 loại iFrame Config:

• iFrame Config link tương đối: Khi ghép iFrame vào main page sẽ có dạng sau/mypage/jobs
• iFrame Config 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, bạn thêm config sau trong iFrame page fileconfig/application.rb

iFrame page bằng js là gì?

Để xây dựng kênh thông tin lắng nghe giữa 2 bên website, có hai cách để thực hiện;

• Cách 1: 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.
• Cách 2: Giao tiếp trực tiếp từ client bằng JS

Khi nhúng 1 trang web khác vào trang mình bằng iframe thì ta không thể sử dụng các lệnh JS thường dùng. Để thao tác với các elements trên Iframe đó, mà phải sử dụng lệnh JS dựa trên Iframe ta lồng vào.

Bạn xem code ví dụ sau:

Với nội dung trên web bình thường ta có thể dùng document.getElementById("myFrame")còn nếu thành phần đó nằm trên iFrame, tức ở 1 trang web khác ta phải sử dụng lệnh kháciframe.contentWindow.document.getElementsByTagName("H1")[0]; chỉ có vậy thôi đơn giản phải không nào.

Đóng mở pop-up

Đoạn code với cú pháp:

Có ý nghĩa thêm một event để lắng nghe mọi thông điệp được gửi từ các iFrame page.

Trong các trang iFrame page chỉ cần dử dụng đoạn code sau để gửi data lên main page:

Tóm lại, iFrame là gì? Nó là một công cụ phù hợp giúp doanh nghiệp nâng cao trải nghiệm khách hàng trên website một cách hiệu quả. Tuy vậy, trong quá trình sử dụng iFrame, doanh nghiệp nên cân nhắc các vấn đề về nguồn gốc, độ bảo mật của sữ liệu để đảm bảo truyền thông an toàn nhất.

Hy vọng rằng qua bài viết của chúng tôi, bạn đọc đã có được những thông tin hữu ích và cái nhìn toàn diện về loại công cụ này, từ đó khai thác nó một cách có hiệu quả để nâng cao uy tín, tầm vóc của website thương hiệu.

Tham khảo thêm: iFrame là gì? Cách nhúng iFrame vào website sao cho tối ưu nhất?