Thẻ HTML iframe nhúng tài liệu web vào trang web. Tài liệu nhúng có thể là PDF, trang web, hoặc tài sản khác. Thuộc tính src định nghĩa vị trí tài nguyên nhúng.
Bạn có thể nhúng nội dung một tài liệu web, như PDF hoặc bản đồ từ Google Maps, vào trang khác, dùng HTML.
Đó là nơi HTML <iframe> xuất hiện. Thẻ HTML <iframe> dùng để nhúng đối tượng bên ngoài như trang web khác vào một trang web đơn lẻ. Hướng dẫn này sẽ thảo luận, kèm ví dụ, cách dùng thẻ HTML <iframe> nhúng tài nguyên web vào trang web.
HTML iframe
HTML iframe, hay khung nội tuyến (inline frames), hiển thị tài liệu web bên ngoài trên trang. Bạn có thể nhúng bản đồ, PDF, video, hoặc tài nguyên khác dùng thẻ HTML <iframe>.
Mã lưu trong khung nội tuyến độc lập với phần còn lại của trang web. Bất kỳ kiểu dáng hoặc JavaScript áp dụng cho trang web sẽ không áp dụng trong iframe.
Cú pháp cho thẻ HTML <iframe>:
<iframe src="url"></iframe>
Thẻ <iframe> dùng tạo iframe. Chúng ta chỉ định thuộc tính src của iframe. Thuộc tính chứa vị trí phần tử HTML chúng ta muốn nhúng vào trang. Đây nên là URL HTML.
Ví dụ mã HTML Iframe
Hãy xem ví dụ khám phá cách thẻ <iframe> hoạt động.
Giả sử chúng ta xây dựng trang web cho hội sử học Washington, D.C. địa phương. Họ muốn trang có video nhúng từ Khan Academy về sự ra đời Hiến pháp Mỹ. Trang này là tài liệu tham khảo cho ai quan tâm tham gia hội. Chúng ta có thể dùng mã sau nhúng video vào trang web:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
Mã trả về:
Chúng ta dùng phần tử <iframe> nhúng tài nguyên web bên ngoài vào trang. Tài nguyên nhúng là liên kết "https://www.youtube.com/embed/Rk8dCnKIfP4". Điều này trỏ đến video hội muốn hiển thị.
HTML Iframe Chiều cao và Chiều rộng
Thuộc tính height và width dùng đặt kích thước iframe. Giả sử hội sử học muốn video lớn hơn trên trang.
Chúng ta đặt chiều rộng video YouTube 500 pixel và chiều cao 300 pixel:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
Mã trả về:
Video nhúng bây giờ rộng 500 pixel và cao 300 pixel trên tài liệu HTML. Điều này giúp mọi người dễ xem video trên trang web.
Thay vào đó, chúng ta có thể đặt width và height của thẻ iframe dùng CSS. Nhưng, vì HTML hỗ trợ thuộc tính height và width, điều này không cần thiết.
Xóa viền HTML iframe
Khi làm việc với thẻ <iframe>, bạn sẽ thấy nội dung bị bao quanh viền. Nếu muốn xóa viền, bạn có thể dùng thuộc tính CSS border:none;.
Hội sử học yêu cầu xóa viền quanh video YouTube. Đây là mã chúng ta dùng:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
Mã trả về:
Video bây giờ không còn viền.
HTML iframe Mục tiêu liên kết (Link Targets)
Ngoài ra, thẻ <iframe> có thể dùng làm khung đích (target frame) cho liên kết. Chúng ta có thể đặt iframe làm khung đích cho liên kết dùng thuộc tính target trong liên kết HTML. Thuộc tính target HTML phải tham chiếu thuộc tính name của <iframe>.
Giả sử hội sử học có video khác muốn hiển thị về Điều I Hiến pháp Mỹ. Video cũng do Khan Academy xuất bản.
Khi văn bản Sự ra đời được nhấp, video Sự ra đời Hiến pháp Mỹ nên hiển thị trong iframe. Khi văn bản Điều I được nhấp, video về Điều I nên hiển thị.
Chúng ta có thể dùng mã sau:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Sự ra đời</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Điều I</a>
Mã trả về:
Mặc định, video về sự ra đời Hiến pháp Mỹ hiển thị trong iframe. Nội dung iframe thay đổi trỏ đến video Khan Academy về Điều I khi nhấp Điều I.
Iframe được chuyển hướng về video sự ra đời Hiến pháp nếu video đó chưa hiển thị khi nhấp Sự ra đời.
Kết luận
Thẻ <iframe> HTML nhúng tài nguyên web bên ngoài như trang web vào trang web khác. Hữu ích nếu muốn thêm bản đồ, tệp, video, hoặc trang web khác vào trang của bạn.
Hướng dẫn này đã thảo luận, tham khảo ví dụ, cách dùng thẻ HTML <iframe> hiển thị tài nguyên web bên ngoài trên trang. Bây giờ bạn có kiến thức bắt đầu dùng thẻ <iframe> như chuyên gia!
Để tìm hiểu thêm về viết mã HTML, hãy đọc hướng dẫn học HyperText Markup Language.