Thẻ iFrame trong HTML

• Trần Thị Vân
• 1449
• 22/02/2025

Chức năng của Thẻ iFrame trong HTML

Thẻ iframe trong HTML dùng để nhúng các website khác hoặc trang web trên chính website của bạn, video từ youtube, bản đồ, các file tài liệu từ website hoặc từ Google Drive,... để hiện lên một vùng nào đó nằm trên trang web của chính mình, cho phép người dùng xem được nội dung, tương tác với nội dung mà không cần phải rời khỏi trang web.

Cú pháp của Thẻ iFrame trong HTML

<iframe src="duongdan" width="chieurong" height="chieucao" allowfullscreen="giatrifull"></iframe>

src: Chứa duongdan (Đường dẫn cần nhúng)

width: Chứa chieurong (Chiều rộng của Iframe ví dụ 100%, 300px,...).

height: Chứa chieucao (Chiều cao của iframe ví dụ: 300px,100vh,.....)

allowfullscreen: Chứa giatrifull (nếu đặt true thì cho phép click vào xem toàn màn hình, nếu false thì không cho phép).

Thẻ iframe trong HTML nhúng được những loại nào

Nhúng trang web vào thẻ iframe

Bạn có thể nhúng một website khác hoặc có thể nhúng trang web nào đó trên website của chính bạn vào thẻ iframe.

<iframe src="https://webmoi.vn/" title="Web Mới" width="100%" height="400"></iframe>

Chạy Thử

Nhúng bản đồ vào thẻ iframe

Website thường nhúng bản đồ để cho khách hàng có thể trực tiếp xem địa chỉ của doanh nghiệp và xem chỉ đường.

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15677.140993927555!2d106.5532803!3d10.7894511!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a811fb9c3bfd776!2zV2ViIE3hu5tpIC0gVGhp4bq_dCBL4bq_IFdlYnNpdGU!5e0!3m2!1svi!2s!4v1666675407094!5m2!1svi!2s" width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Chạy Thử

Nhúng video trên youtube vào thẻ iframe

<iframe width="100%" height="400" src="https://www.youtube.com/embed/X9CGScVRGb0" frameborder="0" allowfullscreen></iframe>

Chạy Thử

Nhúng file từ Google Drive vào thẻ iframe

Úp file lên Google Drive xong phân quyền chia sẽ công khai.

Sau đó trở lại danh sách nhấn vào nút 3 chấm rồi vào mở bằng, rồi chọn mở trong thẻ mới.

Bên góc phải trên chọn nút 3 chấm, rồi chọn nhúng mục... Copy iframe hoặc chỉ copy phần nằm trong src:

<iframe src="https://drive.google.com/file/d/1yfCLiP2jyxZsHMAJmlqmwpMszgGGTqw-/preview" width="100%" height="400" allow="autoplay"></iframe>

Chạy Thử

Khi nào nên dùng Thẻ iframe trong HTML

Các trường hợp cần thiết hữu ích cho website thì nên dùng thẻ iframe, trường hợp nhúng các file hoặc đường dẫn URL từ một website khác mà website đó bị nhiểm virus thì sẽ ảnh hưởng xấu tới website của bạn, nên khi dùng cần phải kiểm tra kỹ lượng xem website kia có bị gì không.

Cách tối ưu thẻ iframe trong HTML để cải thiện hiệu suất website

Thẻ iframe giúp nhúng nội dung từ nguồn bên ngoài vào trang web một cách nhanh chóng, nhưng nếu sử dụng không hợp lý có thể làm tăng thời gian tải trang và ảnh hưởng đến trải nghiệm người dùng. Việc tối ưu iframe giúp website hoạt động ổn định hơn, đặc biệt trên các thiết bị có tốc độ mạng chậm.

Sử dụng iframe hợp lý để tránh ảnh hưởng tốc độ tải trang

Không nên lạm dụng quá nhiều iframe trên cùng một trang vì mỗi iframe có thể tạo thêm yêu cầu tải dữ liệu riêng từ máy chủ bên ngoài. Điều này khiến trình duyệt phải xử lý nhiều tài nguyên hơn và có thể làm giảm tốc độ hiển thị nội dung chính.

Chỉ nên sử dụng iframe cho những nội dung thực sự cần thiết như bản đồ, video, biểu mẫu hoặc các tài nguyên không thể tích hợp trực tiếp vào website. Với các nội dung quan trọng, nên ưu tiên giải pháp tải trực tiếp để kiểm soát tốt hơn hiệu suất.

Tối ưu kích thước iframe trên thiết bị di động

Kích thước iframe cần được thiết kế linh hoạt để hiển thị tốt trên nhiều loại màn hình. Một iframe có chiều rộng cố định có thể gây lỗi tràn ngang khi người dùng truy cập bằng điện thoại hoặc máy tính bảng.

Có thể sử dụng kích thước theo tỷ lệ phần trăm hoặc kết hợp với CSS để iframe tự điều chỉnh theo chiều rộng của thiết bị. Điều này giúp nội dung nhúng luôn cân đối và mang lại trải nghiệm xem tốt hơn.

Ví dụ thiết lập iframe có khả năng thích ứng:

<iframe src="https://example.com" width="100%" height="400" title="Nội dung nhúng"></iframe>

Kiểm tra khả năng tương thích khi nhúng nội dung bên ngoài

Không phải mọi website đều cho phép nhúng nội dung thông qua iframe. Một số trang có chính sách bảo mật ngăn chặn việc hiển thị bên trong iframe để bảo vệ dữ liệu và tránh các nguy cơ giả mạo.

Trước khi sử dụng iframe, cần kiểm tra nguồn nội dung có hỗ trợ nhúng hay không. Đồng thời nên lựa chọn các nguồn uy tín để hạn chế lỗi hiển thị, vấn đề bảo mật hoặc tình trạng nội dung bị thay đổi ngoài ý muốn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ iframe trong HTML.