Cách chèn Iframe (khung trang web) vào trang web

Iframe là gì?

Có thể tạm hiểu Iframe là một khung trang web nằm bên trong một trang web khác, giống ví vụ dưới đây:

Cách chèn Iframe vào trang web

Để chèn Iframe vào trang web, ta sử dụng thẻ <iframe> theo cú pháp sau:

<iframe src="URL"></iframe>

Trong đó, URL là địa chỉ của trang web mà bạn muốn chèn vào Iframe.

<iframe src="http://code24h.com"></iframe>

Thiết lập kích thước cho Iframe

Thuộc tính awidth dùng để thiết lập chiều rộng cho Iframe.

Thuộc tính height dùng để thiết lập chiều cao cho Iframe.

Giá trị của thuộc tính awidth và height có thể được xác định theo đơn vị :

• px (Pixel)
hoặc
• % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: Phần tử chứa thẻ Iframe có chiều rộng là 800px, ta thiết lập chiều rộng cho Iframe là 50% thì khi hiển thị ra màn hình Iframe sẽ có chiều rộng là 400px)

<iframe src="http://code24h.com" awidth="50%" height="400px"></iframe>

Gỡ bỏ đường viền cho Iframe

Thuộc tính frameborder dùng để thiết lập sự tồn tại của đường viền bao quanh Iframe. Thuộc tính frameborder có 2 giá trị:

• 0: xóa bỏ đường viền
• 1: tồn tại đường viền

Nếu không xác định thuộc tính frameborder thì mặc định Iframe luôn có đường viền

<iframe src="http://code24h.com" awidth="100%" height="200px" frameborder="0"></iframe>
<iframe src="http://code24h.com" awidth="100%" height="200px" frameborder="1"></iframe>

Ngoài ra, ta cũng có thể dùng CSS hoặc thuộc tính style để tạo đường viền cho Iframe.

<iframe src="http://code24h.com" awidth="80%" height="400px" frameborder="0" style="border:10px solid brown"></iframe>

Dùng Iframe để xem trang liên kết

Thuộc tính name dùng để đặt tên cho một Iframe.

Thuộc tính target ở thẻ <a> dùng để mở trang liên kết vào Iframe.

<a href="http://code24h.com/html/default.html" target="iframe_123">Xem trang liên kết</a>
<iframe src="http://code24h.com" awidth="100%" height="400px" name="iframe_123"></iframe>