Thẻ IFRAME trong HTML là thẻ dùng để nhúng 1 trang web, 1 tài liệu nào đó vào trang web hiện tại. Nó giống như 1 cái khung mà tại đó trình duyệt sẽ hiển thị một trang riêng biệt bao gồm cả thanh cuộn và boder. Để có thể hình dung 1 cách dễ dàng về công dụng của thẻ IFRAME thì bạn xem ví dụ demo ở dưới đây.
Tham khảo thêm
- Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML
- Thẻ Table trong HTML – Thẻ tạo bảng trong HTML
- Các thẻ tạo danh sách (list) trong HTML
Hướng dẫn dùng thẻ IFRAME để nhúng trang web
Để chèn iframe vào trang web bạn cặp thẻ <iframe> với cấu trúc như sau:
<iframe src="link-web"></iframe>
Trong đó
- <iframe></iframe> là cặp thẻ đóng mở
- src là thuộc tính bắt buộc để dẫn tới 1 trang web khác
Ví dụ
<iframe src="https://nguyenhung.net"></iframe>
Các thuộc tính cơ bản của thẻ IFRAME trong HTML
- src: Thuộc tính khai báo đường dẫn tới 1 trang web hoặc 1 file tài liệu nào đó.
- width: Thuộc tính dùng để khai báo chiều rộng của iframe (đơn vị là px hoặc %)
- height: Thuộc tính dùng để khai báo chiều cao của iframe (đơn vị là px hoặc %)
- name: Thuộc tính này dùng để đặt tên cho frame. Nó hay được dùng khi muốn hiển thị 1 liên kết nào đó trong 1 frame có thuộc tính name.
- frameborder: Thuộc tính dùng để thiết lập đường viền bao quanh frame. Thuộc tính này sẽ có 2 giá trị: 0 – ẩn đường viền, 1 – hiện đường viền. Nếu không khai báo thuộc tính này thì mặc định là đường viền được hiển thị.
Ví dụ về thẻ IFRAME trong HTML
Dưới đây là đoạn code ví dụ về thẻ IFRAME với đầy đủ các thuộc tính cơ bản.
<a href="https://nguyenhung.net/hoc-html" target="the-iframe">Series học HTML</a><br/><br/> <iframe src="https://nguyenhung.net" width="100%" height="500px" name="the-iframe" frameborder="0"></iframe>
Trong đó có thẻ <a> với thuộc tính target dùng để nhắm đích tới iframe có name là the-iframe.
Lời kết
Như vậy là bạn đã biết dùng thẻ IFRAME trong HTML để nhúng 1 trang web, tài liệu bất kỳ vào trang web của bạn rồi nhé. Cách làm rất đơn giản đúng không nào. Nếu thấy bài viết hay hãy like và share nhé. Nhớ theo dõi chuyên mục học HTML để học thêm nhiều thẻ khác trong HTML nhé. Chúc bạn thành công!
Mình làm theo hướng dẫn của bạn nhưng gặp phải lỗi website nguồn từ chối kết nối. Vậy cách khắc phục thế nào bạn? Cảm ơn bạn. (P/S: mình đã gỡ các plugin chống spam trên website nguồn nhưng vẫn không được, thử kết nối các website khác thì lại được).
cho em hỏi là tại sao em dung lenh iframe rồi mà khi hiện thị lên ca 2 trang web đều hiển thị một lúc,không biết có thể sử dụng mã nào để hiện lên trang web em muốn nhúng mà ẩn đi trang web cũ không ạ
chào bạn , mình có 2 trang html đặt tên là header và footer , mình muốn nhúng cả 2 trang vào trong 1 trang html mới thì dùng iframe có được không.
Mình không biết lý do bạn nhúng là làm gì nhưng bạn có thể dùng iframe để nhúng cả 2 đều được nhé.
mình có đoạn code form iframe nhưng khi dán vào web lại không hiển thị được bạn chỉ giúp mình với
Bạn cần phải kiểm tra xem nguồn cung cấp iframe đó còn hoạt động ko nhé. Nếu còn thì bạn kiểm tra lại cách bạn chèn đã đúng chưa.
nó vẫn hoạt động, mình chèn bằng cách copy đoạn code ngta tạo sẵn xong mình vô viết bài qua phần văn bản rồi dán ra, nhưng nó chả hiển thị dc, mình tìm đủ mọi cách mà cũng chả thấy j.
Bạn có thể share cái iframe đó qua mình check thử xem sao nhé. Nếu nó còn hoạt động thì vấn đề chỉ có là do bạn chèn sai nên mới không hiển thị.
Có tạo được dạng ifrrame mà không có link dưới dạng html không bác nhỉ
Ý bạn là nhúng tập tin html vào luôn đó hả? Cái đó làm đc nhưng không phải dùng iframe bạn nhé.
Lưu ý: Lần sau bạn nên dùng tên thật để được duyệt bình luận. Tks!
Có thể nhúng 1 phần của trang web đó dc ko ạ
Nếu site khác nhúng trang của mình vào website của họ thì có được xem là 1 backlink không vậy?
Thực sự thì mình cũng chưa tìm hiểu đến điều này
minh nhúng vào, blog khong cho thi giai quyet the nao vay ad
Bạn có thể nói rõ hơn câu hỏi đc ko. Mình chưa hiểu ý bạn lắm
Mình có nhúng được 1 vùng riêng của web A sang web B không nhỉ? Ví dụ web A có BXh hay thống kê nào đó mà chỉ muốn nhúng khoảng đó thôi thay vì toàn bộ trang web.
Vậy thì bạn xem họ có cho lấy code nhúng ko thì lấy để nhúng
Mình muốn chèn web A vào bài viết của web mình, nhưng muốn khi người đọc click vào thì nó sẽ dẫn đến web B chứ không phải web A. Có thể làm được vậy không bạn?
Mình ko hiểu ý của bạn. Bạn muốn chèn web A vào bài viết theo dạng nào? Dạng chèn link hay chèn kiểu iframe này?
Chèn web A theo kiểu iframe này. Bình thường khi click vào thì nó dẫn đến web A. Mình muốn khi click vào thì nó dẫn đến web B khác web A
Chắc là phải dùng kỹ thuật khác chứ iframe không làm được theo ý bạn rồi
a có bài viết nào hướng dẫn sử dụng iframe để tạo 1 cái giống như sidebar di chuyển theo thanh scrollbar ko ạ ?
Mình ko hiểu ý bạn lắm. Nhưng nếu bạn muốn tạo sidebar cố định rồi nhúng iframe thì có thể đọc bài viết này
Chào bạn,
Mình có thử cách này nhưng một số website không hiểu code này, có khi nào web đó đã chặn hiển thị không bạn ?
Cảm ơn đã chia sẽ.
Chào Nguyễn Hùng,
Bạn hướng dẫn giúp mình cách nhúng link dạng sau đây vào blogspot nhé. Thanks bạn. Mình làm theo các bước trong bài hướng dẫn này nhưng không thành công. Xin cảm ơn bạn.
https://www.memrise.com/course/1962481/toeicvocabulary-adjtectives-21-30/
Blogspot mình ko dùng nên mình ko thử dc. Nhưng mình xem qua hình như link bạn share họ chặn nhúng nên ko nhúng đc bạn à
Anh ơi cho em hỏi nhúng trang web khác vào web của mình thì có ảnh hưởng đến tốc độ truy cập, thứ hạng website không a ?
Cũng có ảnh hưởng 1 chút đó bạn. Nhưng mình quan sát thì nếu trang nhúng load chậm thì trang của bạn vẫn load dc xong trước và người dùng vẫn có thể đọc nội dung trên trang bình thường
Hi Hùng
Cho mình hỏi, hiện tại mình có dùng thẻ iframe trong wordpress nhưng không làm được như vậy, hiện tại có cách nào khác chèn được 1 link web vào wordpress không, Hùng hỗ trợ giúp mình
Cảm ơn sự chia sẻ từ bạn.
Vu
Trên web của bạn có đang cài plugin cache như WP Rocket hay gì đó ko? Bạn kiểm tra lại vì có thể 1 số plugin đang chặn nhúng trong WordPress hoặc web bạn muốn nhúng vào đang chặn ko cho bạn nhúng