WebVN Cộng đồng web Việt Nam
Iframe trong HTML được dùng để hiển thị một trang web khác trong trang hiện tại.
Cú pháp của iframe
Cú pháp để chèn iframe vào trong trang
|
1 |
<iframe src="URL"></iframe> |
Trong đó URL là địa chỉ trang web mà bạn muốn hiển thị.
Chiều dài và chiều cao của iframe
Sử dụng thuộc tính height và width để thiết lập kích cỡ của iframe.
Đơn vị đo mặc định là pixel nhưng bạn cũng có thể sử dụng đơn vị là %.
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <iframe src="https://webvn.com/run-example/?pid=1793" width="200" height="200"></iframe> </body> </html> |
Bỏ đường viền của iframe
Mặc định, khi hiển thị iframe trong HTML sẽ có đường viền màu đen bao quanh.
Để bỏ đường viền này, bạn có thể dùng thuộc tính border trong CSS:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <iframe src="https://webvn.com/run-example/?pid=1793" style="border:none"></iframe> </body> </html> |
Với CSS, bạn cũng có thể thay đổi kích cỡ, kiểu hiển thị và màu của đường viền iframe:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <iframe src="https://webvn.com/run-example/?pid=1793" <span class="highATT">style=</span><span class="highVAL">"border:5px dotted red"</span>></iframe> </body> </html> |
Trỏ liên kết tới iframe
Bạn có thể trỏ liên kết mở trong một ifame bằng cách sử dụng thuộc tính target với giá trị là tên được đặt trong thuộc tính name của iframe:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <iframe width="100%" height="200px" src="https://webvn.com/run-example/?pid=1793" name="iframe_a"></iframe> <p><a href="https://webvn.com" target="iframe_a">Webvn.com</a></p> <p>Liên kết trên đây sẽ được mở ở trong ifame.</p> </body> </html> |
Trong bài https://webvn.com/giao-dien-html/
Mình thử thêm iframe vào section, nhưng sau khi thêm vào thì phần footer không hiển thị nữa, cho em hỏi lỗi tại sao vậy ad?