Iframe trong HTML – Cách chèn một trang web vào trong trang hiện tại – Học HTML

0
2919

Iframe trong HTML được dùng để hiển thị một trang web khác trong trang hiện tại, iframe có chức năng gần giống với một cái Tab trên trình duyệt, đó chính là dùng để mở & thao tác.

Ví Dụ:

code:

<iframe src="https://hoantn.com" height="500" width="100%"></iframe>

Cú pháp của iframe

Cú pháp để chèn iframe vào trong trang

<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à %.

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:

<iframe src="https://hoantn.com" height="300" width="100%" style="border:none"></iframe>

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:

<iframe src="https://hoantn.com" <span class="highATT">style=</span><span class="highVAL">"border:5px dotted red"</span>></iframe> 

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:

<!DOCTYPE html>
<html>
<body>
 
<iframe width="100%" height="200px" src="https://hoantn.com/" name="iframe_a"></iframe>
<p><a href="https://hoantn.com/tu-hoc-online/hoc-html/" target="iframe_a">Học HTML</a></p>
 
<p>Liên kết trên đây sẽ được mở ở trong iframe.</p>
 
</body>
</html>

Dưới đây là một số thuộc tính thường được sử dụng bên trong thẻ <iframe>

frameborder– Tùy chỉnh việc hiển thị hay không hiển thị cái đường viền bao xung quanh khung.
width– Thiết lập chiều rộng của cái khung.
height– Thiết lập chiều cao của cái khung.
srcdoc– Thiết lập nội dung sẽ được hiển thị bên trong cái khung.
scrolling– Tùy chỉnh việc hiển thị hay không hiển thị các thanh scroll của cái khung.

Tổng kết

Ở bài viết này chúng ta đã biết đến tác dụng của thẻ <iframe> và cách sử dụng cũng như một số thuộc tính đi kèm.

Nếu có góp ý hãy thắc mắc về bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây