Chắc hẳn bạn đã từng thấy một video YouTube xuất hiện ngay trong bài viết, một bản đồ Google Maps hiển thị trực tiếp trên trang liên hệ, hay thậm chí là một biểu mẫu đăng ký được tích hợp ngay trong website bán hàng. Những layout đó đều được sử dụng thẻ iframe HTML để giúp cải thiện trải nghiệm của người dùng khi sử dụng website.
Đọc bài viết sau để được giải đáp chi tiết hơn về:
- Tổng quan về <iframe> trong HTML: Cú pháp, trình duyệt hỗ trợ
- Các thuộc tính iframe phổ biến
- Ưu & nhược điểm của <iframe>
- Tổng hợp các cách phổ biến để sử dụng <iframe> trong lập trình web
- Một số ứng dụng thực tế của <iframe>
- Câu hỏi thường gặp về iframe trong HTML
Thẻ iframe HTML là gì?
Iframe hay inline frame là một phần tử HTML được hiển thị bằng thẻ <iframe>, cho phép nhúng một tài nguyên bên ngoài (một trang web, video, bản đồ, hoặc biểu mẫu) vào trong trang web hiện tại, dưới dạng một khung hiển thị riêng biệt như một “cửa sổ con”. Phần tử iframe cho phép người dùng xem và tương tác với nội dung được tải từ một URL khác mà không cần rời khỏi trang chính.
Iframe được sử dụng với nhiều mục đích khác nhau như:
- Nhúng đa phương tiện (embedding multimedia): Dễ dàng tích hợp video, âm thanh hoặc hình ảnh động từ các nền tảng như YouTube,…
- Nhúng bản đồ (Maps): Nhúng bản đồ từ các dịch vụ như Google Maps trực tiếp vào trang web của bạn.
- Biểu mẫu hoặc Widgets: Kết hợp các biểu mẫu hoặc tiện ích từ các nguồn khác mà không cần viết mã phức tạp.
Cú pháp cơ bản của <iframe> khi được sử dụng trong đoạn mã HTML:
<iframe src="URL" title="description"></iframe>
Trong đó,
- Thuộc tính src chỉ định URL của tài liệu bạn muốn nhúng.
- Iframe có thể bao gồm video, bản đồ hoặc toàn bộ trang web từ các nguồn khác.
Dưới đây là một ví dụ cơ bản về cách sử dụng iframe để hiển thị một trang web khác được nhúng trong trang web hiện tại.
<!DOCTYPE html> <html> <head> <title>HTML iframe Tag</title> </head> <body style="text-align: center"> <h2>HTML iframe Tag</h2> <iframe src= "https://www.youtube.com/embed/iRL0gIHFAgQ?si=neuD8JOQ25ffCoYa" height="370" width="400" allowfullscreen> </iframe> </body> </html>
Ở ví dụ trên thể hiện việc nhúng (embed) một video YouTube vào trang web bằng thẻ <iframe> với giải thích chi tiết như sau:
- src=”https://www.youtube.com/embed/iRL0gIHFAgQ?si=neuD8JOQ25ffCoYa”: Đây là link nhúng (embed) của video YouTube, đúng định dạng để hoạt động trong iframe.
- height=”370″ và width=”400″: Đặt kích thước khung hiển thị video.
- allowfullscreen: Cho phép nội dung bên trong <iframe> (như video YouTube) chuyển sang chế độ toàn màn hình khi người dùng nhấn vào nút mở rộng
Một số thuộc tính của thẻ iframe HTML
Dưới đây là một số thuộc tính phổ biến của <iframe> trong lập trình web.
| Thuộc tính | Giá trị (Value) | Description |
| width | pixels | Điều chỉnh chiều rộng của <iframe>, mặc định là 300 pixels. |
| src | URL | Địa chỉ cụ thể của trang web cần nhúng. |
| allowfullscreen | true or false | Cho phép <iframe> kích hoạt chế độ toàn màn hình. |
| allowpaymentrequest | true or false | Bật API payment request cho cross-origin iframes (iframe khác nguồn) |
| loading |
|
Xác định thời điểm trình duyệt sẽ tải <iframe> |
| srcdoc | Html code | Đặt nội dung HTML để hiển thị trong <iframe>. |
| sandbox | allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation | Giới hạn hành vi của nội dung trong <iframe> |
| allow | Feature policy string | Chỉ định quyền cho iframe (ví dụ: microphone, camera, clipboard-write…) |
| height | pixels | Đặt chiều cao của iframe, mặc định là 150 pixels. |
| name | text | Chỉ định tên cho <iframe>. |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url | Kiểm soát thông tin giới thiệu để truy xuất iframe. |
Ưu & Nhược điểm khi dùng thẻ iframe
Thẻ <iframe> là công cụ tiện lợi trong HTML để nhúng nội dung từ trang web khác, nhưng việc sử dụng nó cũng có những mặt lợi và hại mà lập trình viên nên cân nhắc kỹ trước khi triển khai.
| Ưu điểm | Nhược điểm |
| Dễ xử lý và tiết kiệm công sức trong lập trình | Nội dung bên trong iframe không được Google index như nội dung gốc trên trang. |
| Nội dung trong iframe không ảnh hưởng trực tiếp đến CSS/JavaScript của trang chủ. | Không liên kết hoặc đánh dấu nội dung được nhúng. |
| Không cần tải nội dung về máy chủ, chỉ cần chèn URL là có thể hiển thị video, bản đồ, biểu mẫu… | Nhúng nội dung từ các trang web bên ngoài thông qua <iframe> có thể bị giới hạn bởi chính sách bảo mật như X-Frame-Options hoặc Content-Security-Policy. |
| Iframe có thể được tải độc lập, giúp chia tải giữa các tài nguyên khác nhau | Nội dung trong iframe có thể bị cắt xén hoặc hiển thị không đầy đủ nếu không tính toán kỹ. |
| Nhúng được các ứng dụng nhỏ như chatbot, công cụ tính toán, biểu mẫu khảo sát | Dễ bị đánh cắp thông tin cá nhân thông qua trang web hoặc emai giả mạo. Tăng nguy cơ bị tấn công nếu nội dung có thể chứa plug-in gây hại hoặc lừa đảo. |
Hướng dẫn cách sử dụng thẻ iframe HTML trong lập trình web
Dưới đây là hướng dẫn chi tiết từng bước để sử dụng <iframe> hiệu quả trong các dự án web.
Sử dụng thuộc tính chiều cao và chiều rộng (width và height)
Để điều chỉnh kích thước hiển thị của khung iframe, bạn có thể sử dụng hai thuộc tính cơ bản là width và height. Việc thiết lập đúng kích thước sẽ đảm bảo nội dung nhúng hiển thị rõ ràng và phù hợp với giao diện tổng thể.
Giá trị của thuộc tính sẽ được mặc định theo pixels, nhưng bạn cũng có thể sử dụng đơn vị phần trăm tùy theo nhu cầu.
<!DOCTYPE html> <html> <body> <h2>HTML iframe Tag</h2> <p> Hứng khởi ngành IT tại Việt Nam cùng ITviec </p> <iframe src= "https://www.youtube.com/embed/iRL0gIHFAgQ?si=neuD8JOQ25ffCoYa" height="395" width="400"> </iframe> </body> </html>
Trong đó, bạn xác định chiều cao của iframe là 395px và chiều rộng của iframe là 400px.
Kết quả hiển thị của đoạn mã trên:
Loại bỏ viền của iframe
Theo mặc định, iframe sẽ có đường viền xung quanh phần nội dung được nhúng vào. Để xóa đường viền, bạn có thể sử dụng thuộc tính style và border của CSS.
Ví dụ như đoạn code dưới đây, để thực hiện bỏ đường viền, bạn bổ sung thêm thuộc tính style=”border: none” bên trong thẻ <iframe>.
<!DOCTYPE html> <html> <body> <h2>HTML iframe Tag</h2> <p> Hứng khởi ngành IT tại Việt Nam cùng ITviec </p> <iframe src= "https://www.youtube.com/embed/iRL0gIHFAgQ?si=neuD8JOQ25ffCoYa" height="395" width="400" style="border: none"> </iframe> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Tùy chỉnh viền của iframe bằng CSS
Bạn có thể điều chỉnh viền của iframe bằng các thuộc tính của CSS như kích thước, màu sắc và style.
<!DOCTYPE html> <html> <body> <p>Hứng khởi ngành IT tại Việt Nam cùng ITviec</p> <iframe src= "https://www.youtube.com/embed/iRL0gIHFAgQ?si=neuD8JOQ25ffCoYa" height="400" width="400" style="border: 4px solid red"> </iframe> </body> </html>
Kết quả hiển thị của đoạn mã trên:
Mở liên kết trong iframe bằng thuộc tính target
Bạn có thể nhắm mục tiêu vào iframe có liên kết bằng cách sử dụng thuộc tính name của iframe và thuộc tính target trong liên kết. Cách này sẽ phù hợp khi bạn muốn người dùng nhấn link và xem nội dung ngay trong cùng một trang.
<!DOCTYPE html> <html> <body> <h2>HTML iframe Tag</h2> <p> Click the link text </p> <iframe src= "https://itviec.com/assets/salary_report/itviec-blog-logo-80b8703de9dbfaf6cf5eee224518a9c0b350667bb4778e516f89fa7f4bf90741.png" height="400" width="350" name="iframe_a"> </iframe> <p> <a href= "https://itviec1.uptech.vn/checkbox-html/" target="iframe_a"> Converter </a> </p> </body> </html>
Ví dụ trên sử dụng thẻ <iframe> để nhúng một hình ảnh, và một liên kết (link) có khả năng thay đổi nội dung hiển thị trong iframe khi được nhấp vào.
- name=”iframe_a”: Đặt tên cho iframe, để liên kết có thể nhắm tới và thay đổi nội dung của nó.
- Khi bạn click vào liên kết https://itviec1.uptech.vn/checkbox-html/, trình duyệt sẽ mở trang blog trong khung iframe có tên là iframe_a.
Ứng dụng của thẻ iframe HTML trong thực tế
Nhìn chung, bất kỳ nội dung nào cũng có thể được nhúng vào trang web bằng iframe. Trong đó, một số lĩnh vực có thể được sử dụng phổ biến như:
- Video Youtube: Cung cấp trực tiếp các video có liên quan cho người dùng. Video mang lại nhiều lợi ích, chẳng hạn như tăng tính trực quan và trải nghiệm của người dùng. Thay vì tải file video lên trực tiếp, bạn chỉ cần chèn đường dẫn YouTube hoặc Vimeo thông qua iframe, vừa tiết kiệm tài nguyên vừa đảm bảo tốc độ tải trang.
- Google Maps: Nếu bạn cần hiển thị vị trí doanh nghiệp hoặc chỉ đường, bạn có thể sử dụng iframe để tích hợp Google Maps vào website của mình.
- Widgets: Các widget như Facebook fanpage, lịch sự kiện, biểu mẫu đăng ký (Google Forms) hoặc các bảng điều khiển từ dịch vụ bên ngoài cũng có thể được đưa vào trang web qua iframe.
- Các ứng dụng (Applications): Tích hợp các ứng dụng bên ngoài như công cụ tính toán, chatbot, trình xem file PDF, hoặc cả trang admin nhỏ vào trong một phần của trang chính.
Câu hỏi thường gặp về thẻ iframe HTML
Làm thế nào để tạo iframe responsive?
Để tạo iframe responsive, bạn cần đảm bảo tất cả các thành phần trên trang web đều phải có sự phản hồi. Đầu tiên, bạn cần xóa các thuộc tính width và height khỏi mã, sau đó sử dụng thuộc tính HTML hoặc CSS để thực hiện responsive. Cụ thể như sau:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/PMz9ovrVb_Q"></iframe> </div> </body> </html>
Ở ví dụ trên, iframe được đặt trong phần tử div và áp dụng một số thuộc tính CSS để thiết lập kích thước. Đoạn mã này sẽ tạo ra một iframe hiển thị video YouTube theo tỷ lệ 16:9, tự động co giãn theo kích thước màn hình mà không bị vỡ layout.
- <meta name=”viewport” …> là thẻ meta giúp trình duyệt trên thiết bị di động hiển thị trang web phù hợp với kích thước màn hình, thuộc tính cần thiết khi bạn thực hiện responsive design.
- width: 100%: chiếm toàn bộ chiều ngang của trình duyệt.
- padding-top: 56.25%: giữ tỷ lệ 16:9 (vì 9 / 16 = 0.5625 → 56.25%). Đây là tips phổ biến để tạo khung hình tỷ lệ cố định khi chiều cao được tính dựa trên chiều rộng.
- position: absolute: iframe sẽ phủ kín toàn bộ phần .container.
- top, left, right, bottom: 0: căng hết các cạnh.
- width: 100%, height: 100%: chiếm hết chiều ngang và dọc của .container.
- border: none: bỏ viền iframe.
- <iframe>: Nhúng một video từ YouTube bằng iframe. Kết hợp với container đã được set tỷ lệ, nên video sẽ luôn hiển thị tỷ lệ 16:9 dù người dùng đang dùng máy tính hay điện thoại.
Nếu bạn kiểm tra chiều rộng màn hình ngay bên trong trình duyệt của mình, bạn sẽ thấy iFrame hiển thị phản hồi và tỷ lệ khung hình của nó được duy trì.
Sự khác biệt giữa thẻ frame và thẻ iframe HTML là gì?
Frame và iframe có công dụng đáp ứng các mục đích khác nhau trong phát triển web. Trong đó, sự khác biệt chính nằm ở cấu trúc và sự linh hoạt, cụ thể như sau:
- <frame>: Một phần của Frameset, thường được dùng trong HTML 4 để chia nhỏ trình duyệt thành nhiều cửa sổ hiển thị tài liệu khác nhau. Nó đã bị khai tử trong HTML5.
- <iframe>: Phần tử inline dùng để nhúng tài liệu hoặc trang web vào một phần của trang hiện tại. Nó vẫn được hỗ trợ trong HTML5 và linh hoạt hơn nhiều.
Làm thế nào để cho phép toàn màn hình (fullscreen) trong iframe?
Nếu bạn gặp sự cố khi dùng chế độ toàn màn hình (fullscreen) nhưng chúng không hoạt động khi nhúng iframe, bạn có thể giải quyết sự cố này bằng cách thêm thuộc tính allowfullscreen vào thẻ iframe.
<iframe src='http://localhost:53623/bi/site/site1/dashboards/523d298e-cfed-4746-9d29-eb1cc73b1537/Health%20Care/Sales%20Analysis%20Dashboard?isembed=true' id='dashboard-frame' width='100%' height='100%' allowfullscreen style=”border:none;”></iframe>
Bằng cách thêm thuộc tính allowfullscreen, bạn kích hoạt chế độ toàn màn hình cho nội dung được nhúng, cho phép người dùng xem nội dung đó ở chế độ toàn màn hình mà không gặp bất kỳ sự cố nào.
Tuy nhiên, bạn cần lưu ý khi sử dụng allowfullscreen, tùy vào nguồn nhúng, trang đó cũng phải cho phép tính năng fullscreen (ví dụ: YouTube cho phép).
Một ví dụ khác về việc sử dụng thuộc tính allowfullscreen để kích hoạt chế độ toàn màn hình và có đường viền (border).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Iframe Tag</title> </head> <body style="text-align: center;"> <h1 style="color: red;"> ITviec </h1> <iframe width="400" height="200" src= "https://www.youtube.com/embed/lLqvuK6_7Uk?si=XvfUZ70UDQj_FTMt" allowfullscreen style="border: 5px solid black; box-sizing: border-box;"> </iframe> </body> </html>
Trong đó:
- border: 5px solid black: tạo đường viền đen dày 5px xung quanh iframe.
- box-sizing: border-box: đảm bảo viền không làm tăng tổng chiều rộng và chiều cao iframe.
Tổng kết
Thẻ iframe HTML là công cụ giúp tích hợp nội dung từ bên ngoài vào trang web một cách linh hoạt. Tuy nhiên, bạn cần sử dụng đúng cú pháp, lựa chọn nguồn nội dung đáng tin cậy và đảm bảo các thiết lập bảo mật phù hợp. Qua đó, trang web của bạn sẽ được tối ưu hiệu quả về nội dung, trải nghiệm người dùng cũng như đạt được sự bảo mật an toàn khi vận hành.
Xem thêm: Giải đáp “tất tần tật” những điều cần biết về HTML